Android系統編程入門系列之界面Activity繪制展示-有解無憂

上篇文章介紹了界面Activity的啟動方式和生命周期，本篇將繼續介紹在界面Activity中的內容是如何繪制展示給用戶的，

在Android系統上運行新創建的界面Activtiy，給用戶展示的是空白的，而得益于AndroidStudio的強大模板支持，新創建的界面Activity會自動重寫onCreate()方法，并在該方法內自動創建以下兩行類似默認代碼，

super.onCreate(savedInstanceState)
setContentView(R.layout.xxx)

顯然，setContentView()方法就是加載當前界面Activity的繪制內容，而名為R.layout.xxx的引數中的xxx，代指檔案名，被稱為布局檔案，在系列文章首篇有提到res目錄是存放應用資源的檔案夾，該目錄下有個名為layout的目錄，就是專門存放布局檔案的，
在AndroidStudio中，只要在layout目錄下創建布局檔案，就可以在java目錄下源代碼中通過呼叫R.layout中與布局檔案同名的常量來使用，而其中的類名為R的檔案，是在java(generate)目錄的當前應用包名下自動生成的，

在AndroidStudio中新創建的布局檔案默認生成如下模板，該檔案符合xml檔案格式，其中標簽名只能是Android系統定義或我們應用內自定義的控制元件名，而其屬性也只能使用已定義的屬性，

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</android.support.constraint.ConstraintLayout>

視圖

View視圖，是Android系統繪制圖形的基本單元類，也是系統與用戶互動的基本單元類，所有的視圖類追蹤其父類，都可以追溯到同一個父類android.view.View，

如果直接在布局檔案中添加視圖使用，那么稱這個視圖是靜態加載的，靜態創建視圖需要使用大量布局檔案，在應用程式打包時占用大量存盤空間，但是當應用程式安裝之后，Android系統會更加快速的繪制這些視圖，
相反地，也可以在源代碼檔案的當前界面Activity中，直接呼叫視圖類的構造方法創建一個視圖，并加載到當前界面中，那么稱該視圖是動態加載的，動態創建的視圖是寫入到源代碼中，所以應用程式打包時不會占用太多存盤空間，只是在應用程式安裝運行后，Android系統需要更多時間去決議并繪制這些視圖，
上面兩種視圖加載方式雖然有所差別，但是在不涉及大量視圖加載的輕量級應用中差別不是很大，一般界面中的視圖都是固定數量的，可以直接靜態創建視圖的，這樣可以借助AndroidStudio的布局預覽插件實時預覽當前界面布局效果；只有在根據不同資料加載不同視圖這種類似的動態改變大量界面時，可能動態加載視圖的方式會更方便一些，

視圖除了需要創建加載外，還可以修改其屬性以便于Android系統區分繪制，同樣地，既可以在靜態加載時動態設定默認屬性值，也可以在源代碼中動態設定屬性值，

注意：針對同一個屬性，動態設定結果會優先覆寫靜態屬性值，

任何視圖在創建加載后，有兩個屬性值是必須要指定的，那就是表示視圖寬度和高度的尺寸，在布局檔案中，靜態加載的視圖必須以標簽中的android:layout_width和android:layout_height屬性設定；在源代碼中，動態加載的視圖默認寬度和高度都是LayoutParams.WRAP_CONTENT，表示自適應內容尺寸，也可以呼叫視圖類中的.layoutParams.width和.layoutParams.height變數直接訪問或修改，

根據視圖負責的任務不同，可大致分為容器類視圖、展示類視圖、編輯類視圖三種型別，

容器類視圖，一般符合后綴為Layout的命名規范，可作為父視圖，在其內部繼續加載繪制子視圖，包括展示類視圖和編輯類視圖，常用的有將子視圖位置線性排列繪制的線性布局android.widget.LinearLayout，對子視圖使用相對位置繪制的相對布局android.widget.RelativeLayout,集合上述兩種布局優勢更加靈活繪制子視圖相對位置的約束布局androidx.constraintlayout.widget.ConstraintLayout等，
展示類視圖，可理解為輸出型視圖，一般是容器類視圖的子類，且符合后綴為View的命名規范，主要負責將資料資源以更直觀的形式展示給用戶，像是展示文本內容的android.widget.TextView，展示圖片的android.widget.ImageView,展示視頻的android.widget.VideoView等，
編輯類視圖，可理解為輸入型視圖，一般是展示類視圖或容器類視圖的子類，且命名都不符合上述兩種型別的命名規范，可以根據用戶的控制實時改變自身視圖的相關屬性，比如允許用戶文字輸入并實時展示輸入結果的android.widget.EditText，允許用戶選擇時間并展示的android.widget.TimePicker，在用戶操作需要提示時展示的android.widget.Toast等，

系統視圖

正如上邊舉例的幾個視圖，都是在AndroidSDK中定義的視圖，稱為系統視圖，系統視圖都位于android.widget包下，
在日常開發中，只需要掌握如何使用系統視圖即可，這里以動態加載的方式介紹幾個常用視圖案例，

首先是界面Activity對應的布局檔案，以上文中AndroidStudio自動生成的模板布局檔案為例，為了在源代碼中獲取到這個布局檔案的根視圖，在根視圖<android.support.constraint.ConstraintLayout>標簽中增加android:id 屬性，屬性值以@+id/開頭表示新增屬性值，可以定義任意值；而如果以@id/開頭，只能使用已經定義過的屬性值，所有新增的屬性，都由AndroidStudio自動存盤在前面提到的R檔案中，在源代碼中可以通過R.id.xxx常量獲取，其中xxx即定義的屬性值，

android:id="@+id/activity_main_root"

之后便可以在源代碼的界面Activity中獲取到該視圖，并操作該視圖例如增加子視圖，

        val rootLayout = findViewById<ConstraintLayout>(R.id.activity_main_root)

        val button1=Button(this)
        button1.text="按鈕"
        button1.id=R.id.button_1

        val textView1=TextView(this)
        textView1.text="文本展示區"

        val layoutParamsButton1 = ConstraintLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        layoutParamsButton1.topMargin = 500
        layoutParamsButton1.topToTop=rootLayout.id
        layoutParamsButton1.leftToLeft=rootLayout.id
        layoutParamsButton1.rightToRight=rootLayout.id
        button1.layoutParams=layoutParamsButton1

        val layoutParamsTextView1 = ConstraintLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        layoutParamsTextView1.circleConstraint=button1.id
        layoutParamsTextView1.circleAngle=30f
        layoutParamsTextView1.circleRadius=300
        textView1.layoutParams=layoutParamsTextView1


        rootLayout.addView(button1)
        rootLayout.addView(textView1)

在上邊代碼中有用到R.id.button1變數，由于其系結視圖并未在布局檔案中靜態加載，所以該視圖對應的id值只能在資源檔案中單獨宣告，可以在res資源目錄下新建一個xml格式的資源檔案，在其中增加如下代碼以創建一個id供上邊源代碼中使用，

<resources>
    <item name="button_1" type="id"></item>
</resources>

最終上述代碼的運行效果如下圖，

自定義視圖

雖然AndroidSDK提供的系統視圖可以滿足大部分常見場景，但是開發的樂趣在于自由繪制視圖及互動，Android系統同樣允許開發者自由定義視圖以滿足他們的特殊愛好需求，想必不需強調也能理解，這種自定義視圖只能在定義該視圖的所屬modle模塊中使用，或者在定義了自定義視圖的所屬modle模塊的被依賴子modle模塊中使用，對于自定義視圖，其相關屬性可能因視圖而異，但是使用方式與系統視圖類似，所以主要掌握如何定義自定義視圖，這里以自定義的輸入框為例簡單說明，

自定義視圖首先要在源代碼中定義一個視圖類，該類必須繼承自android.view.View或其子類，在介紹視圖分類時可以發現，容器類視圖是另外兩種視圖的父類，所以一般在編輯類視圖和展示類視圖均不滿足自定義視圖的需求時，就直接選擇容器類視圖作為自定義視圖的父類，而不是直接繼承android.view.View，而如果自定義視圖的需求與某個編輯類視圖或展示類視圖的功能重合，也就可以直接在該視圖上修改，那么直接繼承這個編輯類視圖或展示類視圖即可，

在繼承視圖類之后，Java語言的話，需要重寫自定義視圖的三個構造方法,而如果應用程式是運行在Android5.0及以上的系統上，還需要重寫第四個構造方法，

Android版本號5.0，對應于Android API等級為21，對應Android版本簡稱為LOLLIPOP

    public MyEditText(Context context) {
		//動態加載視圖時呼叫該構造方法
        this(context, null);
    }

    public MyEditText(Context context, AttributeSet attrs) {
		//靜態加載視圖時呼叫該構造方法
        this(context, attrs, 0);
    }

    public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
		//確保其他構造方法都最終呼叫該構造方法
        super(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MyEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

而如果是Kotlin撰寫的話，只需要重寫兩個構造方法即可

	@JvmOverloads
	constructor(context: Context?, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : super(
		context,
		attrs,
		defStyleAttr
	) {
	}

	@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
	constructor(
		context: Context?,
		attrs: AttributeSet?,
		defStyleAttr: Int,
		defStyleRes: Int
	) : super(context, attrs, defStyleAttr, defStyleRes) {
	}

之后可根據需求重寫三個父類方法，

視圖布局，呼叫onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int)方法，確保該自定義視圖在其父視圖的位置，
視圖測量，呼叫onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int)方法，確定該視圖在繪制時的尺寸，
視圖繪制，呼叫onDraw(canvas: Canvas)方法，將該視圖中的屬性資訊繪制到螢屏上，

如果上述程序都沒有問題，就可以像加載系統視圖一樣的加載自定義視圖了，但是自定義視圖往往也需要新增一些屬性控制，如果簡單的在該視圖類中增加一些getter、setter方法以訪問相關屬性，這樣就可以在源代碼中像使用系統視圖一樣的動態加載自定義視圖了，但是如果想在布局檔案中靜態加載視圖，這就需要重寫上述代碼中的三參構造方法中了，
靜態設定屬性值，首先就要先創建固定的屬性名，在res/values資源目錄中創建xml格式的資源檔案，并在其中定義屬性值如下所示

    <declare-styleable name="StyleMyEditText">
        <attr name="myDefaultText" format="string" />
    </declare-styleable>

之后在上述重寫構造方法中獲取這些屬性值并賦予其實際意義即可，

		val typedArray = context.obtainStyledAttributes(attrs, R.styleable.StyleMyEditText)
		val defaultText = typedArray.getString(R.styleable.StyleMyEditText_myDefaultText)
		setText(defaultText)
		typedArray.recycle()  //回收代碼不能少，否則容易記憶體泄漏

如此，就可以在靜態加載自定義視圖的布局檔案中正常設定其屬性值了，

    <com.kotlin.helloword.MyEditText
        android:layout_width="200dp"
        android:layout_height="100dp"
        app:myDefaultText="默認顯示內容"
        />

自定義屬性值通過app域使用，android域只能設定Android系統提供的固定屬性值

內容有限，視圖的簡單使用先大致這些，詳情案例可參考后續視頻內容，而視圖作為系統與用戶互動的基本單元，其使用功能更加多元，下一章將繼續介紹視圖間的影片與互動，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/289041.html

標籤：Android

上一篇：Jetpack Compose和View的互操作性

下一篇：Android系統編程入門系列之界面Activity繪制展示