Android自定義View之『 自定義組合控件 』

開發中經常遇到一些使用率很高的組合控件，比如用戶頭像、名稱、背景及點擊動畫，再比如新聞列表中的新聞圖片、標題、時間、評論等，這些都可以“抽象”成一個組合式控件，以便於調用。

這裏以一個簡要的新聞版塊信息爲例，簡要說明一下組合控件的構建流程。效果圖：

 

1、在attrs.xml中定義屬性，供自定義類InfoBlockView使用：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="InfoBlockView">
        <attr name="img" format="reference"/>
        <attr name="title" format="string"/>
        <attr name="author" format="string"/>
        <attr name="comment" format="string"/>
    </declare-styleable>

</resources>

 

2、定義佈局info_block_layout.xml，至於佈局中的控件、間距可以內部設定，也可以通過設置屬性值，在控件外部控制：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/block_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:text="xxx"/>

    <ImageView
        android:id="@+id/block_image_view"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        tools:srcCompat="@tools:sample/backgrounds/scenic[1]" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/block_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="作者"/>
        <TextView
            android:id="@+id/block_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="評論數"/>
    </LinearLayout>
</LinearLayout>

 

3、定義類InfoBlockView，這個佈局中使用的是LinearLayout，因此自定義類繼承了LinearLayout。

注意代碼中引用自定義屬性的格式：R.styleable.[自定義名]_[屬性名]。

package com.example.blc.myviewapplication;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class InfoBlockView extends LinearLayout {
    public InfoBlockView(Context context) {
        super(context);
        init(context, null);
    }

    public InfoBlockView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public InfoBlockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    void init(Context context, @Nullable AttributeSet attrs){
        //加載自定義佈局
        LayoutInflater.from(context).inflate(R.layout.info_block_layout, this, true);
        if (attrs != null){
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.InfoBlockView);

            //獲取自定義屬性，填充佈局中的控件
            //填充圖片
            int img = a.getResourceId(R.styleable.InfoBlockView_img, 0);
            ImageView imgView = findViewById(R.id.block_image_view);
            imgView.setImageResource(img);

            //填充作者
            String author = a.getString(R.styleable.InfoBlockView_author);
            TextView authorText = findViewById(R.id.block_author);
            authorText.setText(author);

            //填充標題
            String title = a.getString(R.styleable.InfoBlockView_title);
            TextView titleText = findViewById(R.id.block_title);
            titleText.setText(title);

            //填充評論數
            String comment = a.getString(R.styleable.InfoBlockView_comment);
            TextView commentText = findViewById(R.id.block_comment);
            commentText.setText(comment);

            a.recycle();
        }
    }

}

 

4、在需要使用這個控件的佈局中引用該控件，這裏在一個ScrollView的線性佈局中加入幾個上面自定義好的控件：

<?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"
    xmlns:test="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:showDividers="middle"
            android:dividerPadding="20dp"
            android:divider="@android:drawable/divider_horizontal_bright"
            android:orientation="vertical">


            <com.example.blc.myviewapplication.InfoBlockView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                test:img="@drawable/img1"
                test:title="@string/title2"
                test:comment="@string/comment2"
                test:author="@string/author2">
            </com.example.blc.myviewapplication.InfoBlockView>
            <com.example.blc.myviewapplication.InfoBlockView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                test:img="@drawable/img2"
                test:title="@string/title3"
                test:comment="@string/comment3"
                test:author="@string/author3">
            </com.example.blc.myviewapplication.InfoBlockView>

        </LinearLayout>
    </ScrollView>



</android.support.constraint.ConstraintLayout>

 

5、在strings.xml中定義了幾個字符串：

<resources>
    <string name="app_name">MyViewApplication</string>

    <string name="title1">現在是讀書時間！</string>
    <string name="title2">這個草莓有點紅！</string>
    <string name="title3">說實話，我有點渴了！</string>

    <string name="author1">小紅</string>
    <string name="author2">小白</string>
    <string name="author3">小LAN</string>

    <string name="comment1">2評論</string>
    <string name="comment2">10評論</string>
    <string name="comment3">0評論</string>
</resources>

 

OK！粗略的效果圖（還望包涵~）：