Android自定义组合控件--图片加文字，类似视频播放软件的列表

Posted 2020-09-16 程序猿的玻璃心

分四步来写：
1，组合控件的xml;
2，自定义组合控件的属性;
3，自定义继承组合布局的class类，实现带两参数的构造器;
4，在xml中展示组合控件。
具体实现过程：
一、组合控件的xml
我接触的有两种方式，一种是普通的Activity的xml；一种是父节点为merge的xml。我项目中用的是第一种，但个人感觉第二种好，因为第一种多了相对或者绝对布局层。
我写的 custom_pictext.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/custom_pic_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/a" />

    <TextView
        android:id="@+id/custom_date_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/custom_pic_iv"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="8dp"
        android:text="2017" />

    <TextView
        android:id="@+id/custom_text_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/custom_pic_iv"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="4dp"
        android:text="题目" />
</RelativeLayout>

这里展示一个merge的例子，有时间，大家可以自己体会下。

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:id="@+id/title_bar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/title_bar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:singleLine="true"
        android:textSize="17sp" />

    <Button
        android:id="@+id/title_bar_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="7dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp" />

</merge>

这两个xml，都是写在layout中的。
二、自定义组合控件的属性
这步是我们自定义的重要部分之一，自定义组件的私有特性全显示在这。
首先在values中创建attrs.xml
然后定义属性，如下代码

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <declare-styleable name="CustomPicText">
        <attr name="pic_backgroud" format="reference"/>
        <attr name="pic_backgroud_width" format="dimension"/>
        <attr name="pic_backgroud_height" format="dimension"/>
        <attr name="pic_text" format="string"/>
        <attr name="pic_text_color" format="color"/>
        <attr name="pic_text_size" format="integer"/>
        <attr name="pic_date" format="string"/>
        <attr name="pic_date_color" format="color"/>
        <attr name="pic_date_size" format="integer"/>
    </declare-styleable>

</resources>

这里有几点需要注意的，第一：属性名为name，第二：属性单位为fromat。这单位包含的值可以查看这里。
三、自定义继承组合布局的class类，实现带两参数的构造器
我实现的CustomPicText.java

/**
 * Created by Hman on 2017/5/4.
 * 为了测试自定义组合控件
 */
public class CustomPicText extends RelativeLayout {

    private ImageView customPicIv;
    private TextView customDateTv;
    private TextView customTextTv;

    public CustomPicText(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 加载layout
        View view = LayoutInflater.from(context).inflate(R.layout.custom_pictext,this);
        customPicIv = (ImageView) view.findViewById(R.id.custom_pic_iv);
        customDateTv = (TextView) view.findViewById(R.id.custom_date_tv);
        customTextTv = (TextView) view.findViewById(R.id.custom_text_tv);

        // 加载自定义属性配置
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomPicText);
        // 为自定义属性添加特性
        if (typedArray != null) {
            // 为图片添加特性
            int picBackgroud = typedArray.getResourceId(R.styleable.CustomPicText_pic_backgroud, 0);
            float picWidth = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_width,25);
            float picHeight = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_height,25);
            customPicIv.setBackgroundResource(picBackgroud);
//            customPicIv.setMinimumWidth(picWidth);

            // 为标题设置属性
            String picText = typedArray.getString(R.styleable.CustomPicText_pic_text);
            int picTextColor = typedArray.getColor(R.styleable.CustomPicText_pic_text_color,16);
            int picTextSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 16);
            customTextTv.setText(picText);
            customTextTv.setTextColor(picTextColor);
            customTextTv.setTextSize(picTextSize);

            // 为日期设置属性
            String picDate = typedArray.getString(R.styleable.CustomPicText_pic_date);
            int picDateColor = typedArray.getColor(R.styleable.CustomPicText_pic_date_color, 0);
            int picDateSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 12);
            customDateTv.setText(picDate);
            customDateTv.setTextColor(picDateColor);
            customDateTv.setTextSize(picDateSize);

            typedArray.recycle();


        }


    }
}

在这里，我们也可以给控件添加一些监听器，大家自己去加上；这里值得注意的是一个加载配置的类TypeArray
4，在xml中展示组合控件
这个随便写到一个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"
    xmlns:hman="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.eastsun.widget.CustomPicText
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        hman:pic_backgroud="@mipmap/b"
        hman:pic_date="2017/5/6"
        hman:pic_date_color="@color/white"
        hman:pic_text="第一张图片"
        hman:pic_text_color="@color/red"
        hman:pic_text_size="18"></com.eastsun.widget.CustomPicText>

</LinearLayout>

这里有一点别忘记，添加xmlns:hman=”http://schemas.android.com/apk/res-auto”
总结
程序基本上到这就结束了。
看下效果截图