android 組合控件自定義View

1、比如要實現下面的這種效果：

2、首先實現佈局效果，新建佈局文件layout_custom

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="52dp">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:src="@mipmap/ic_launcher" />


    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="16dp"
        android:layout_toEndOf="@+id/iv_icon"
        android:textSize="18dp"
        tools:text="title" />

    <ImageView
        android:id="@+id/iv_arrow"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="16dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/dp_10"
        android:layout_toStartOf="@id/iv_arrow"
        android:textSize="15dp"
        tools:text="0" />


    <View
        android:id="@+id/v_driver"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:background="@color/colorAccent" />

</RelativeLayout>

3、在項目values文件夾下新建attrs.xml,設置組合控件屬性

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

    <declare-styleable name="CommonValueView">

        <attr name="title" format="string" />
        <attr name="left_img_visible" format="boolean" />
        <attr name="right_img_visible" format="boolean" />
        <attr name="divider_line" format="color" />
        <attr name="divider_visibility" format="boolean" />
        <attr name="left_img" format="reference|integer" />
        <attr name="right_img" format="reference|integer" />

    </declare-styleable>

</resources>

4、新建CustomLayout繼續RelativeLayout，初始化控件

 private void initView(Context context) {
        View.inflate(context, R.layout.layout_custom, this);
        left_img = this.findViewById(R.id.iv_icon);
        right_img = this.findViewById(R.id.iv_arrow);
        title = this.findViewById(R.id.tv_title);
        driver = this.findViewById(R.id.v_driver);
        msg = this.findViewById(R.id.tv_msg);
    }

獲取自定義控件屬性

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CommonValueView);
String title = array.getString(R.styleable.CommonValueView_title);
boolean leftShow = array.getBoolean(R.styleable.CommonValueView_left_img_visible, true);
boolean rightShow = array.getBoolean(R.styleable.CommonValueView_right_img_visible, true);
boolean driverShow = array.getBoolean(R.styleable.CommonValueView_divider_visibility, true);
int color = array.getColor(R.styleable.CommonValueView_divider_line, ContextCompat.getColor(context, R.color.colorPrimary));
int leftImg = array.getResourceId(R.styleable.CommonValueView_left_img, R.mipmap.ic_launcher);
int rightImg = array.getResourceId(R.styleable.CommonValueView_right_img, R.mipmap.ic_launcher);

然後再根據自己的需求，實現自己想要的結果

5、完整CustomLayout

public class CustomLayout extends RelativeLayout {

    private ImageView left_img;
    private TextView title;
    private ImageView right_img;
    private View driver;
    private TextView msg;

    public CustomLayout(Context context) {
        super(context);
        initView(context);
    }

    public CustomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CommonValueView);
        String title = array.getString(R.styleable.CommonValueView_title);
        boolean leftShow = array.getBoolean(R.styleable.CommonValueView_left_img_visible, true);
        boolean rightShow = array.getBoolean(R.styleable.CommonValueView_right_img_visible, true);
        boolean driverShow = array.getBoolean(R.styleable.CommonValueView_divider_visibility, true);
        int color = array.getColor(R.styleable.CommonValueView_divider_line, ContextCompat.getColor(context, R.color.colorPrimary));
        int leftImg = array.getResourceId(R.styleable.CommonValueView_left_img, R.mipmap.ic_launcher);
        int rightImg = array.getResourceId(R.styleable.CommonValueView_right_img, R.mipmap.ic_launcher);

        if (leftShow) {
            left_img.setVisibility(VISIBLE);
        } else {
            left_img.setVisibility(GONE);
        }

        if (rightShow) {
            right_img.setVisibility(VISIBLE);
        } else {
            right_img.setVisibility(GONE);
        }

        if (driverShow) {
            driver.setVisibility(View.VISIBLE);
        } else {
            driver.setVisibility(View.GONE);
        }
        this.title.setText(title);
        this.left_img.setImageResource(leftImg);
        this.right_img.setImageResource(rightImg);
        this.driver.setBackgroundColor(color);


    }

    public CustomLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context) {
        View.inflate(context, R.layout.layout_custom, this);
        left_img = this.findViewById(R.id.iv_icon);
        right_img = this.findViewById(R.id.iv_arrow);
        title = this.findViewById(R.id.tv_title);
        driver = this.findViewById(R.id.v_driver);
        msg = this.findViewById(R.id.tv_msg);
    }
}

6、使用

<com.zy.view.CustomLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:divider_line="@color/colorPrimaryDark"
        app:layout_constraintTop_toBottomOf="@+id/tv_start"
        app:left_img_visible="false" />