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！粗略的效果图（还望包涵~）：