自定义组合控件，事件传递响应规则

自定义组合控件

当系统提供的控件，不足以满足我们开发需求时，可以通过自定义控件来实现更好的效果。

组合控件的实现步骤

1.  先设定组合控件的布局

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <TextView
        android:id="@+id/tv_setting_update"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_setting_update_hint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_setting_update"
        android:layout_marginTop="3dp"
        android:textSize="18sp"
        android:textStyle="bold" />

    <CheckBox
        android:id="@+id/cb_setting_update"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <View
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_below="@+id/tv_setting_update_hint"
        android:layout_marginTop="3dp"
        android:background="#000" />

</RelativeLayout>


2.  为组合控件制定使用控件时的属性
res --> value --> 建立attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomSettingItemView">
        <attr name="clauseTitle" format="string" />
        <attr name="stateOff" format="string" />
        <attr name="stateOn" format="string" />
    </declare-styleable>
</resources>

3.  创建类集成RelativeLayout用来定义组合控件

public class CustomSettingItemView extends RelativeLayout {

    private TextView mTvSettingUpdateHint;
    private TextView mTvSettingUpdateTitle;
    private CheckBox cbSettingUpdate;

    private String mClauseTitle;
    private String mStateOff;
    private String mStateOn;

    //通过Java代码创建控件时调用
    public CustomSettingItemView(Context context) {
        this(context, null);
    }

    //添加到布局文件后，系统调用
    public CustomSettingItemView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //添加到布局文件后系统调用
    public CustomSettingItemView(Context context,
                                 AttributeSet attrs,
                                 int defStyleAttr) {

        super(context, attrs, defStyleAttr);


        //将布局添加进来,相当于
        //View view = View.inflate(context, R.layout.custom_item, null);
        //addView(view);
        LayoutInflater.from(context).inflate(R.layout.custom_item, this, true);
        initAttrs(context, attrs);
        initView();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        //读取attrs里面设置的属性，创建控件时传递的值
        TypedArray typedArray = context.obtainStyledAttributes(
                attrs,
                R.styleable.CusSettingItem);

        mClauseTitle = typedArray.getString(R.styleable.CusSettingItem_clauseTitle);
        mStateOff = typedArray.getString(R.styleable.CusSettingItem_stateOff);
        mStateOn = typedArray.getString(R.styleable.CusSettingItem_stateOn);
        typedArray.recycle();
    }

    private void initView() {
        mTvSettingUpdateHint = findViewById(R.id.tv_setting_update_hint);
        mTvSettingUpdateTitle = findViewById(R.id.tv_setting_update);
        cbSettingUpdate = findViewById(R.id.cb_setting_update);
        mTvSettingUpdateTitle.setText(mClauseTitle);
    }

    //返回当前check的选中状态
    public boolean isChecked() {
        return cbSettingUpdate.isChecked();
    }

    //给当前Check设置选中状态
    public void setChecked(boolean isChecked) {
        cbSettingUpdate.setChecked(isChecked);
        if (isChecked) {
            mTvSettingUpdateHint.setText(mStateOn);
        } else {
            mTvSettingUpdateHint.setText(mStateOff);
        }
    }
}

4.  使用

<LinearLayout 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="match_parent"
    android:orientation="vertical"
    tools:context=".ui.activity.MainActivity">

    <com.w.demo.ui.view.CustomSettingItemView
        android:id="@+id/cs_setting_item_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:clauseTitle="自动更新设置"
        app:stateOff="自动更新关闭"
        app:stateOn="自动更新开启" />

</LinearLayout>



public class MainActivity extends AppCompatActivity {

    private CustomSettingItemView mCustomSettingItemView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        mCustomSettingItemView = findViewById(R.id.cs_setting_item_view);
        mCustomSettingItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                boolean checked = mCustomSettingItemView.isChecked();
                mCustomSettingItemView.setChecked(!checked);
            }
        });
    }
}

事件传递响应规则

思考：
当你给你组合控件整体加一个点击事件后，会出现
当你点击这个控件整体时，CheckBox依旧能触发CheckBox的事件，并且这种触发会让代码逻辑发生错乱。

出现这种问题的原因就要探究一下事件传递和响应的规则了。

事件传递过程

当定义的组合控件的Activity的根布局，获取点击事件
事件传递给组合控件，出现两种情况

1.  点击非CheckBox区域，事件由组合控件本身响应。

2.  点击CheckBox区域，事件由组合控件传递给CheckBox，由CheckBox响应。
然后由于 CheckBox 响应了点击事件，组合控件将不再响应点击事件，不去调用onClick改变状态。

事件响应回传

事件从外到内传递
如果最内部的事件没有响应，则会沿传递顺序，逐层向外回传回去。

解决这中情况的办法
1.  拦截事件，让CheckBox不响应，通过回传，让组合控件响应事件。
添加属性
android:focusable="false"
android:clickable="false"
android:focusableInTouchMode="false"

 <CheckBox
        android:id="@+id/cb_setting_update"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:focusable="false"
        android:clickable="false"
        android:focusableInTouchMode="false"
        android:layout_centerVertical="true" />