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>

效果如下