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變量直接訪問或修改。

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

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

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

1. 視圖布局，調用onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int)方法，確保該自定義視圖在其父視圖的位置。
2. 視圖測量，調用onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int)方法，確定該視圖在繪制時的尺寸。
3. 視圖繪制，調用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系統提供的固定屬性值

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