Android自定义组合View

原创已于 2022-08-13 23:08:43 修改 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #java #开发语言

于 2022-08-13 23:05:45 首次发布

本文介绍如何通过自定义组合View简化布局复用过程。通过创建包含特定组件的自定义View，开发者可以轻松地在不同场景中重复利用这些布局。文章详细展示了从编写Layout文件到创建Java类的过程，并介绍了如何在XML中设置自定义属性。

将多个View组合成一个新的View，方便多次复用同一类型的布局。例如下面的MySwitchButtonBar，构造了一个左边是标题文本，右边是开关的条框，使用时只用传入文本和开关状态就可以了。

下面就一个例子来说明自定义组合控件的用法。

一、编写 Layout 文件

<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
        android:background="@drawable/while_bg">
	android:clickable="true">

	<TextView
		android:id="@+id/title"
		android:layout_width="wrap_content"
		android:layout_height="20dp"
		android:textSize="17dp"
		android:layout_gravity="left|center"/>

	<ImageView
		android:id="@+id/right_image"
		android:layout_width="16dp"
		android:layout_height="16dp"
		android:layout_gravity="right|center"
		android:layout_marginRight="36dp"
		android:background="@drawable/icon"/>

</FrameLayout>

这是一个简单的Layout，左边是文字title，右边是switchButton

2. 创建 java 类，实现构造方法，初始化UI，提供对外的方法

public class MySwitchButtonBar extends FrameLayout {
    private ButtonState mButtonState;
    private TextView mTitleTv;
    private SwitchButton mRightBtn;

	// 两种构造方法
    public MySwitchButtonBar(Context context) {
        super(context);
        init(context);
    }

    public MySwitchButtonBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

	// 初始化UI
	private void init(Context context) {
        View view = View.inflate(context, R.layout.switch_button_bar, this);
        mTitleTv = view.findViewById(R.id.title);
        mRightBtn = view.findViewById(R.id.right_btn);
    }

	// 对外暴露的方法
	public void setTitle(String text) {
        mTitleTv.setText(text);
    }

    public void setRightButtonListener(SwitchButton.OnCheckedChangeListener l) {
        if (mButtonState == ButtonState.NORMAL) {
            mRightBtn.setOnCheckedChangeListener(l);
        }
    }

3. 接下来就可以在其他的布局中使用这个控件了。方法是在布局文件里引用上述定义的 java 类

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.demo.widget.MySwitchButtonBar
      android:layout_width="match_parent"
      android:layout_height="56dp"/>

</LinearLayout>

上面就是自定义View最基本的操作，但是目前我们如果想要定义View的title，必须要调用setTitle()方法，很不方便。

下面讲述如何在布局文件时设置自定义View的属性。

1. 打开values目录下的attrs.xml文件（没有则创建），插入内容

    <declare-styleable name="MySwitchButtonBar">
        <attr name="title" format="string" />
        <attr name="summary" format="string" />
        <attr name="buttonState" format="enum" >
            <enum name="normal" value="0"/>
            <enum name="checkedIcon" value="1"/>
        </attr>
        <attr name="checked" format="boolean" />
    </declare-styleable>

定义完这几个属性，我们就可以在XML中设置这些属性，并在java代码中获取设置的属性值了。

<com.example.demo.widget.MySwitchButtonBar
      android:layout_width="match_parent"
      android:layout_height="56dp"
      app:title="打开预览"
      app:checked="false"/>

private void resolveAttrs(Context context, AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MySwitchButtonBar);
    String title = typedArray.getString(R.styleable.MySwitchButtonBar_title)；
    boolean isChecked = typedArray.getBoolean(R.styleable.MySwitchButtonBar_checked, false);
    typedArray.recycle();

    setTitle(title);
    setChecked(isChecked);
}