引言

Android自帶的許多控制元件已經十分強大，甚至很多功能都已經有現成的控制元件去使用了，不過介面效果是肯定會打折扣的，幸好android控制元件自身的擴充套件性十分優秀，很多時候我們只需要簡單繼承下現有控制元件擴充套件些許功能就能得到一個全新的控制元件，比如說前面Android進階——自定義View之繼承系統控制元件實現自帶刪除按鈕動畫效果和軟鍵盤自動懸浮於文字框下方 的核心思想就是如此。

一、自定義CheckableItemView概述

之前的專案中曾經使用過單選列表Android進階——RecycleView的使用之自定義單選列表（二） ，當時由於使用單選列表的業務不多，沒有使用自定義的View去實現，最近新專案中又使用了單選和多選列表，而且還比較頻繁，有必要封裝下，於是就自定義了一個選項Item，支援單選和多選。效果如圖：

二、Android繼承系統控制元件實現自定義View的通用步驟

• 繼承系統自帶控制元件並實現相應的構造方法

一般實現這三種即可

    public CheckedableItemView(Context context) {
        super(context);
        this.context=context;
    }

    public CheckedableItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        init(attrs);
    }

    public
 
 CheckedableItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        init(attrs);
    }

• 自定義屬性
• 在構造方法中完成額外的初始化工作，一般包括獲取自定義屬性的值並初始化到控制元件上（只有初始化到控制元件之後我們定義的屬性才真正的發揮作用）、設定一些常見的屬性等
• 完成功能邏輯的處理，比如說你要去實現勾選效果
• 覆寫自帶的互動方法
• 提供人機互動回撥介面

一句話概括其根本思想就是繼承系統控制元件的通用功能，通過去重寫構造方法或者其他方法去改變其邏輯，從而實現擴充套件功能

二、自定義CheckableItemView設計思想

1、繪製勾選框

TextView本身就自帶drawableLeft、drawableRight、drawableTop、drawableRight屬性可以在TextView的左右上下繪製對應的drawable，再設定下padding值即可，設定drawble之前一定要記得setBounds否則無法顯示。

    private void setRightIcon(){

        if(isChecked) {
            rightCheckedIcon.setBounds(0, 0, 68, 68);//一定要記得先設定setBounds，這裡我設定為68*68
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], rightCheckedIcon, getCompoundDrawables()[3]);
        }else {
            rightIcon.setBounds(0, 0, 68, 68);
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], rightIcon, getCompoundDrawables()[3]);
        }
    }

2、模擬勾選前和勾選後的效果

這裡我用的是兩套UI來簡單實現UI效果，但是我們TextView 本身並沒有提供類似Checked方法，這裡我是使用重寫onTouchEvent方法來實現的，但是重寫了onTouchEvent這個方法是針對整個TextView的，所以我這裡自己處理了下僅僅在Touch在勾選框區域才會去處理，此處需要注意OnTouch事件的傳遞機制，只有在 MotionEvent.ACTION_DOWN 返回為true時，才會繼續產生MotionEvent.ACTION_MOVE、UP事件

    /**
     * 模擬點選事件當我們按下的位置 在  TextView的寬度 - 圖示到控制元件右邊的間距 - 圖示的寬度  和
     * TextView的寬度 - 圖示到控制元件右邊的間距之間就相當於點選了右邊的Icon
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                return true;//只有在 MotionEvent.ACTION_DOWN 返回為true時，才會繼續產生MotionEvent.ACTION_MOVE/UP事件，
            case MotionEvent.ACTION_UP:
                if (getCompoundDrawables()[2] != null) {

                    boolean isRightClick = event.getX() > (getWidth() - getTotalPaddingRight())
                            && (event.getX() < ((getWidth() - getPaddingRight())));
                    if (isRightClick) {
                        if(isCheckedable) {
                            doChecked();
                        }
                    }
                }
            default:
                break;
        }

        return super.onTouchEvent(event);
    }

四、自定義CheckableItemView的實現

1、自定義屬性

 <declare-styleable name="checkedable_view">
 <!--format="reference" 即表示這個屬性對應的值是引用類似R.drawable.xx這樣的-->
        <attr name="rightIcon" format="reference"></attr>
        <attr name="rightCheckedIcon" format="reference"></attr>
        <attr name="isChecked" format="boolean"></attr>
        <attr name="modeType" format="integer"></attr>
    </declare-styleable>

2、CheckableItemView.java

package crazy.com.customview.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.TextView;

import crazy.com.customview.R;

/**
 * auther: Crazy.Mo
 * Date: 2017/3/30
 * Time:10:09
 * Des:
 */

public class CheckedableItemView extends TextView {

    private Context context;
    private int modeType;//預設單選0,多選 1
    private boolean isCheckedable=true;
    private boolean isChecked=false;
    private int rightIconId;
    private Drawable rightIcon;//未選中
    private Drawable rightCheckedIcon;//選中

    public CheckedableItemView(Context context) {
        super(context);
        this.context=context;
    }

    public CheckedableItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        init(attrs);
    }

    public CheckedableItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        init(attrs);
    }
    private void init(AttributeSet attrs){
        initAttrs(attrs);
        setRightIcon();
    }

    private void initAttrs(AttributeSet attrs){
        TypedArray types = context.obtainStyledAttributes(attrs,
                R.styleable.checkedable_view);
        try {
            modeType = types.getInt( R.styleable.checkedable_view_modeType,0 );
            isCheckedable = types.getBoolean( R.styleable.checkedable_view_isChecked,true );
            rightIcon=types.getDrawable(R.styleable.checkedable_view_rightIcon);
            rightCheckedIcon=types.getDrawable(R.styleable.checkedable_view_rightCheckedIcon);
        } finally {
            types.recycle(); // TypeArray用完需要recycle
        }
    }

    public boolean isCheckedable() {
        return isCheckedable;
    }

    public void setCheckedable(boolean checkedable) {
        isCheckedable = checkedable;
    }

    public boolean isChecked() {
        return isChecked;
    }

    public void setChecked(boolean checked) {
        isChecked = checked;
    }

    private void setRightIcon(){

        if(isChecked) {
            rightCheckedIcon.setBounds(0, 0, 68, 68);
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], rightCheckedIcon, getCompoundDrawables()[3]);
        }else {
            rightIcon.setBounds(0, 0, 68, 68);
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], rightIcon, getCompoundDrawables()[3]);
        }
    }

    /**
     * 模擬點選事件當我們按下的位置 在  TextView的寬度 - 圖示到控制元件右邊的間距 - 圖示的寬度  和
     * TextView的寬度 - 圖示到控制元件右邊的間距之間就相當於點選了右邊的Icon
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                return true;//只有在 MotionEvent.ACTION_DOWN 返回為true時，才會繼續產生MotionEvent.ACTION_MOVE/UP事件，
            case MotionEvent.ACTION_UP:
                if (getCompoundDrawables()[2] != null) {

                    boolean isRightClick = event.getX() > (getWidth() - getTotalPaddingRight())
                            && (event.getX() < ((getWidth() - getPaddingRight())));
                    if (isRightClick) {
                        if(isCheckedable) {
                            doChecked();
                        }
                    }
                }
            default:
                break;
        }

        return super.onTouchEvent(event);
    }

    private void doChecked(){
        if(isChecked){
            rightIcon.setBounds(0, 0, 68, 68);
            setCompoundDrawables(getCompoundDrawables()[0],getCompoundDrawables()[1], rightIcon, getCompoundDrawables()[3]);
            isChecked=false;
        }else {
            rightCheckedIcon.setBounds(0, 0, 68, 68);
            setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], rightCheckedIcon, getCompoundDrawables()[3]);
            isChecked=true;
        }
    }
}

3、使用

shape_edit_found.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

        <!-- 定義邊框線 -->
        <stroke android:width="0.3dp" android:color="#6bb9a9" />

        <!-- 定義圓角（圓角半徑是4.5dp） -->
        <corners android:radius="4.5dp" />

        <!-- 背景色 -->
        <solid android:color="#ffffff" />

</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:crazymo="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="crazy.com.customview.MainActivity">

    <crazy.com.customview.widget.CheckedableItemView
        android:id="@+id/single_checked"
        android:gravity="center|left"
        android:layout_marginTop="6dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@drawable/shape_edit_found"
        android:text="你的性別是？"
        android:textSize="26sp"
        crazymo:modeType="0"
        crazymo:rightIcon="@mipmap/single"
        crazymo:rightCheckedIcon="@mipmap/single_selected"/>

    <crazy.com.customview.widget.CheckedableItemView
        android:id="@+id/multi_checked"
        android:gravity="center|left"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@drawable/shape_edit_found"
        android:layout_below="@id/single_checked"
        android:text="你喜歡的運動？"
        android:textSize="26sp"
        crazymo:modeType="1"
        crazymo:rightIcon="@mipmap/multi"
        crazymo:rightCheckedIcon="@mipmap/multi_selected"/>
</RelativeLayout>

這個控制元件主要就是分享一種思想，靈活的借用系統自帶的功能去擴充套件自己的控制元件，靈活地封裝會減少很多不必要工作。原始碼直通車