开发中经常遇到一些使用率很高的组合控件,比如用户头像、名称、背景及点击动画,再比如新闻列表中的新闻图片、标题、时间、评论等,这些都可以“抽象”成一个组合式控件,以便于调用。
这里以一个简要的新闻版块信息为例,简要说明一下组合控件的构建流程。效果图:
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!粗略的效果图(还望包涵~):