Android自定义View之组合控件实现类似电商app顶部栏

为了讲解这个主题，我将会按照以下步骤来进行：

1. 什么是组合控件
2. 组合控件的优势
3. 实现步骤
4. 示例1：组合自定义View实现顶部栏
5. 示例2：组合自定义View实现搜索栏

什么是组合控件

组合控件是将多个View组合在一起形成一个新的View的过程，新的View可以保留多个子View的特点，同时还能自己定义一些新的属性和方法。

组合控件的优势

使用组合控件来实现自定义View的时候，可以将View的逻辑和布局分开处理，提高代码的可维护性、可复用性。

实现步骤

1. 创建新的类继承自ViewGroup或者其子类
2. 在构造方法中获取子View的引用，设置子View的属性和添加到布局中
3. 自定义一些新的属性和方法

示例1：组合自定义View实现顶部栏

下面，我们将要用到的是LinearLayout和TextView这两个组件来组成顶部栏，它具有以下属性：
1. 背景颜色
2. 标题文字
3. 返回按钮

先看一下XML布局代码：

<com.example.myview.TopBar
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#f8f8f8">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:text="标题"
            android:textSize="18sp"/>

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_back"/>

</com.example.myview.TopBar>

接着看TopBar.java代码：

public class TopBar extends LinearLayout {

    private TextView mTvTitle;
    private ImageView mIvBack;

    public TopBar(Context context) {
        super(context);
        init();
    }

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

    private void init() {
        View.inflate(getContext(), R.layout.layout_top_bar, this);

        mTvTitle = findViewById(R.id.tv_title);
        mIvBack = findViewById(R.id.iv_back);

        mIvBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (getContext() instanceof Activity) {
                    ((Activity) getContext()).finish();
                }
            }
        });
    }

    public void setTitle(String title) {
        mTvTitle.setText(title);
    }
}

这里的TopBar就是我们自定义的组合控件了。其中，init()方法中调用View.inflate()方法会将XML布局文件中的子View实例化并添加到当前布局中。

我们可以在使用TopBar时调用setTitle()方法来设置顶部栏的标题。当返回键点击时，TopBar通过findViewById()方法获取到ImageView的引用，并设置了点击事件，执行Activity的finish()方法来关闭当前Activity。

示例2：组合自定义View实现搜索栏

接下来，我们再来看一下如何用EditText和Button来组合实现一个支持搜索的输入框。

XML布局代码：

<com.example.myview.SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:hint="搜索美食"
        app:button_text="搜索"/>

SearchView.java代码：

public class SearchView extends RelativeLayout {

    private EditText mEtSearch;
    private Button mBtnSearch;

    public SearchView(Context context) {
        super(context);
        init();
    }

    public SearchView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SearchView);
        String hint = typedArray.getString(R.styleable.SearchView_hint);
        String buttonText = typedArray.getString(R.styleable.SearchView_button_text);
        typedArray.recycle();
        mEtSearch.setHint(hint);
        mBtnSearch.setText(buttonText);
    }

    private void init() {
        View.inflate(getContext(), R.layout.layout_search_view, this);
        mEtSearch = findViewById(R.id.et_search);
        mBtnSearch = findViewById(R.id.btn_search);
        mBtnSearch.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: search
            }
        });
    }

    public String getSearchText() {
        return mEtSearch.getText().toString();
    }
}

通过XML的app:hint和app:button_text属性来进一步定制当前控件的样式。

创建自定义View的关键是，我们继承了现有的组件（RelativeLayout），并将需要的组件(EditText和Button)组合在一起。

以上就是实现组合控件的两个示例，希望能够帮助到大家的自定义View开发，如果有任何问题，可以在评论区留言向我提问。