Android Layout XML 中使用自定義的 Custom View

在 Android 中,

要客製化視覺元件 (Custom View Component) 可以用 extends 繼承 Android 原生 Class,

而這些客製化視覺元件若要加入到 Layout XML 中設定,

則須注意以下幾個步驟 :

步驟 1: 建立 Custom View Component.

Custom View 必須有三個建構子 :

 程式碼

public CustomViewClassName(Context context) {
    ...
}

public CustomViewClassName(Context context, AttributeSet attrs) {
    ...
}

public CustomViewClassName(Context context, AttributeSet attrs, int defStyle) {
    ...
}

步驟 2: 在 res/values/attrs.xml 中, 宣告 Custom View 在 Layout XML 中可以使用的 Attribute 屬性有哪些.

若步驟 3 的 Custom Layout 沒用到 Custom View 的自訂屬性, 則 attrs.xml 可以省略.


步驟 3: 在 Project 專案中, Layout XML 使用 Custom View.

若 Custom Layout 有用到 Custom View 的自訂屬性,

則宣告要加上 xmlns:yourCustomName="http://schemas.android.com/apk/res-auto"

 範例

Layout 範例 1:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/rank_bg"
    >
    ...
    <studio.tom.library.image.DisplayAnimationImageView
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:src="@drawable/bookmark_new"
        app:imageAnimationType="scale"
        app:imageAnimationStartValue="0.2"
        app:imageAnimationToValue="1"
        app:imageAnimationDuration="500"
        app:imageAnimationInterpolator="0"
        />
    ...
</LinearLayout>
 
Layout 範例 2:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:shimmer="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    >
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        shimmer:duration="1000"
        >
        <ImageView
            android:src="@drawable/girl"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            />
    </com.facebook.shimmer.ShimmerFrameLayout>
</LinearLayout>

以上, 參考看看. ^^

昭佑.天翔