Android 自定義組合控件

前言

我們會用到一些小的自定義控件，例如一個圖標和一個字符的組合。雖然我們可以使用drawableLeft屬性能實現這一功能，但在實際中往往不能滿足需要，例如我們希望圖標和字符能實現不一樣的點擊事件。

1. 兩種常用的方式

• 佈局文件view_group_one.xml，一個線性佈局，包含ImageView和TextView。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal" >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ok" />
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp" />
    </LinearLayout>
  

  自定義控件GroupOneView繼承LinearLayout，在構造函數中導入view_group_one.xml，通過findViewById(int)方法查找控件，並修改字符。

    public class GroupOneView extends LinearLayout {
  
        public GroupOneView(Context context) {
            super(context);
        }
  
        public GroupOneView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
  
            View.inflate(context, R.layout.view_group_one, this);
  
            TextView tv =  findViewById(R.id.text_view);
            tv.setText("This is group one.");
        }
  
    }
  

• 自定義控件GroupTwoView繼承LinearLayout，在方法onFinishInflate()中通過findViewById(int)方法查找控件，並修改字符。

    public class GroupTwoView extends LinearLayout {
  
        public GroupTwoView(Context context) {
            super(context);
        }
  
        public GroupTwoView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }
  
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
  
            TextView tv = findViewById(R.id.text_view);
            tv.setText("This is group two.");
        }
  
    }
  

  佈局文件view_group_two.xml

    <?xml version="1.0" encoding="utf-8"?>
    <com.blog.demo.custom.widget.GroupTwoView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:orientation="horizontal" >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ok" />
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp" />
    </com.blog.demo.custom.widget.GroupTwoView>
  

2. 引用控件

GroupOneView可直接使用，GroupTwoView使用include引用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.blog.demo.custom.widget.GroupOneView
        android:layout_width="match_parent"
        android:layout_height="40dp" />
    <include
        layout="@layout/view_group_two"/>
</LinearLayout>

效果如下