190319 更新 : 實(shí)現(xiàn) ChipGroup 中永遠(yuǎn)有一個(gè)選中的效果

文中完整代碼下載地址：https://github.com/CnPeng/CnPengAndroid2.git
文中內(nèi)容對(duì)應(yīng)上述地址中的 a01_chips 目錄

此外，文中DEMO是基于 AndroidStudio 3.2 Beta 5 版本構(gòu)建的。gradle 中 compileSdkVersion 28 ， targetSdkVersion 28

一、Chip相關(guān)組件的作用及如何導(dǎo)包

1、Chip相關(guān)組件的作用

如上圖，這種界面我們通常稱之為 流式布局標(biāo)簽。

最早實(shí)現(xiàn)這種界面的時(shí)候，基本都是自定義一個(gè)繼承自ViewGroup的控件，然后在Java代碼中動(dòng)態(tài)的add 一個(gè)個(gè)的TextView；

后來(lái)有了 RecyclerView , 我們實(shí)現(xiàn)這種界面就比較方便了；

現(xiàn)在谷歌為我們提供了 Chip、ChipGroup、ChipDrawable ，有了這三者， 我們實(shí)現(xiàn)這種界面就更加方便了！

2、引入material兼容包

使用Chip時(shí)需要先引入兼容包，可分為兩種情況， 一種是新建項(xiàng)目；一種是在現(xiàn)有的項(xiàng)目中引入 Chip.

（1）、新建的項(xiàng)目

• 引入兼容包

implementation 'com.google.android.material:material:1.0.0-rc01'

• 應(yīng)用 MaterialComponents 主題
  為 activity 或者 APP 應(yīng)用 MaterialComponents 主題（也可以是該主題的子主題）。如：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="chipIconTint">@color/chipIconTint</item>
</style>

（2）、現(xiàn)有的項(xiàng)目

• 先移除 module 的 build.gradle 中的
  implementation 'com.android.support:xxx' ,
• 在module 的 build.gradle 中增加 implementation 'com.google.android.material:material:1.0.0-rc01',
• 修改module的build.gradle中的 compileSdkVersion為 28 ， targetSdkVersion為 28
• 從 AndroidManifest.xml 中修改 application 的 theme 為Theme.MaterialComponents或該 主題的子主題（此處沒(méi)想明白，為啥單純?yōu)閏hip所在activity應(yīng)用該主題不行；新建的項(xiàng)目中，可以單純的給activity設(shè)置主題）
• 修改 project 的 build.gralde 中的 gradle版本為不低于3.2.0 的版本 ，如

buildscript {
    ......
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.0-beta05'
        ......
    }
}

• 然后在 AndroidStuido 菜單欄中依次點(diǎn)擊：Refactor > MigrateToAndroidX（上一步修改gradle版本就是為了這個(gè)轉(zhuǎn)換，）
• 最后，手動(dòng)修改 上一步中轉(zhuǎn)換失敗的文件(這個(gè)可能會(huì)比較費(fèi)時(shí)間)

補(bǔ)充

• 為什么棄用support而啟用androidX——https://android-developers.googleblog.com/2018/05/hello-world-androidx.html
• support-library和 androix-library的對(duì)應(yīng)關(guān)系——https://developer.android.com/topic/libraries/support-library/refactor

二、Chip的分類及其特性

1、Chip的分類

注意：以下類別中，特點(diǎn)描述都是基于只設(shè)置 text 和 style 不設(shè)置其他屬性時(shí)總結(jié)的

根據(jù)Chip使用的 style ，可以將其分為以下四類：

（1）、Action chip

• 使用 style="@style/Widget.MaterialComponents.Chip.Action"
• 不設(shè)置style時(shí)，默認(rèn)使用上述style
• 默認(rèn)前后圖標(biāo)都不展示，點(diǎn)擊后沒(méi)有選中狀態(tài)

    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="ActionChip" />

    <!--展示效果同上面的一致-->
    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是一個(gè)單一的chip" />

（2）、Filter Chip

• 使用 style="@style/Widget.MaterialComponents.Chip.Filter"
• 初始狀態(tài)下， 不展示前后圖標(biāo)
• 點(diǎn)擊之后會(huì)展示前面的選中圖標(biāo)，并且具有選中狀態(tài)
• 通常應(yīng)用在 ChipGroup 中

<com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FilterChip01" />

(3)、Entry Chip

• 使用style="@style/Widget.MaterialComponents.Chip.Entry"
• 默認(rèn)在末尾展示刪除按鈕；點(diǎn)擊后前面展示選中圖標(biāo)，有選中狀態(tài)
• 通常可以作為 chipDrawable 使用，比如在填選郵件收件人時(shí)可以使用

    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="EntryChip " />

(4)、Choice Chip

• 默認(rèn)不展示前后的圖標(biāo)，但點(diǎn)擊后有選中狀態(tài)
• 通常用在 ChipGroup 中 , 通過(guò) ChipGroup 的 singleSelection=true/false 屬性可以實(shí)現(xiàn)單選或多選

    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="ChoiceChip" />

2、各種Chip的默認(rèn)效果圖

三、Chip的屬性

1、Chip 的屬性

2、Chip 屬性間的關(guān)系圖

四、Chip的監(jiān)聽(tīng)

（1）、setOnClickListener

點(diǎn)擊事件的監(jiān)聽(tīng)。

• Kotlin版示例代碼：

//使用了 kotlinx , 所以不需要 fingViewById。
chip_normal1.setOnClickListener {
      Toast.makeText(mActivity, "Chip被點(diǎn)擊了", Toast.LENGTH_SHORT).show()
}

• java版代碼

Chip chip_normal=findViewById(R.id.chip_normal1);
chip_normal.setOnClickListener(new OnClickListener(){
      @Override
      public void onClick(View view){
              Toast.makeText(mActivity, "Chip被點(diǎn)擊了", Toast.LENGTH_SHORT).show()
      }
});

（2）、setOnCheckedChangeListener

選中狀態(tài)的監(jiān)聽(tīng)。

注意：

• 只有 checkable 屬性為true 時(shí)該監(jiān)聽(tīng)才會(huì)生效
• 未設(shè)置 checkable 屬性時(shí)，如果應(yīng)用了 filter/entry/choice 的style , 該監(jiān)聽(tīng)可生效，因?yàn)檫@三種style 中 checkable 的值為true。而 ation 的 style 中 checkable 是默認(rèn)關(guān)閉的

• Kotlin版代碼

chip_filter.setOnCheckedChangeListener { buttonView, isChecked ->
    var hintStr = ""
    if (isChecked) {
            hintStr = "被選中了"
    } else {
            hintStr = "取消選中了"
    }
    Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
 }

• java版代碼

Chip chip = (Chip) findViewById(R.id.chip_filter);

chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton view, boolean isChecked) {
        String hintStr = ""
        if (isChecked) {
                hintStr = "被選中了"
        } else {
                hintStr = "取消選中了"
        }
        Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
    }
});

（3）、setOnCloseIconClickListener

關(guān)閉按鈕被點(diǎn)擊的監(jiān)聽(tīng)

1)、示例代碼

• Kotlin版代碼

//關(guān)閉按鈕的點(diǎn)擊監(jiān)聽(tīng)——closeIcon 沒(méi)有id，所以必須需要構(gòu)造匿名監(jiān)聽(tīng)
chip_entry.setOnCloseIconClickListener {
    Toast.makeText(mActivity, "ClostIcon被點(diǎn)擊了", Toast.LENGTH_SHORT).show()
}

• java 版代碼

Chip chip = (Chip) findViewById(R.id.chip_entry);

chip.setOnCloseIconClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(mActivity, "ClostIcon被點(diǎn)擊了", Toast.LENGTH_SHORT).show()
    }
});

2）、注意事項(xiàng)

假設(shè)我們讓Chip所在的界面 實(shí)現(xiàn)了 onClickListener ，那么，為chip 設(shè)置點(diǎn)擊監(jiān)聽(tīng)時(shí)就可以直接調(diào)用 chip.setOnClickListener(this)。但是，如果此時(shí)也需要監(jiān)聽(tīng) CloseIcon 的點(diǎn)擊事件，我們必須單獨(dú)為 CloseIcon 構(gòu)造一個(gè)匿名監(jiān)聽(tīng)——因?yàn)椋?/p>

CloseIcon 是直接通過(guò)畫(huà)筆畫(huà)出來(lái)的，沒(méi)有id。在處理點(diǎn)擊事件時(shí)，Chip的源碼中實(shí)際是監(jiān)聽(tīng)了觸摸事件，根據(jù)觸摸的位置判斷 CloseIcon是否被點(diǎn)擊了。相關(guān)源碼如下：

• setCloseIcon 的源碼

 public void setCloseIcon(@Nullable Drawable closeIcon) {
        Drawable oldCloseIcon = this.getCloseIcon();
        if (oldCloseIcon != closeIcon) {
            float oldCloseIconWidth = this.calculateCloseIconWidth();
            this.closeIcon = closeIcon != null ? DrawableCompat.wrap(closeIcon).mutate() : null;
            float newCloseIconWidth = this.calculateCloseIconWidth();
            this.unapplyChildDrawable(oldCloseIcon);
            if (this.showsCloseIcon()) {
                this.applyChildDrawable(this.closeIcon);
            }

            this.invalidateSelf();
            if (oldCloseIconWidth != newCloseIconWidth) {
                this.onSizeChange();
            }
        }
    }

• Chip 中 CloseIcon 點(diǎn)擊事件的源碼

    public boolean onTouchEvent(MotionEvent event) {
        boolean handled = false;
        int action = event.getActionMasked();
        boolean eventInCloseIcon = this.getCloseIconTouchBounds().contains(event.getX(), event.getY());
        switch(action) {
        case 0:
            if (eventInCloseIcon) {
                this.setCloseIconPressed(true);
                handled = true;
            }
            break;
        case 1:
            if (this.closeIconPressed) {
                this.performCloseIconClick();
                handled = true;
            }
        case 3:
            this.setCloseIconPressed(false);
            break;
        case 2:
            if (this.closeIconPressed) {
                if (!eventInCloseIcon) {
                    this.setCloseIconPressed(false);
                }

                handled = true;
            }
        }

        return handled || super.onTouchEvent(event);
    }

五、ChipGroup

與 RadioGroup 類似，ChipGroup 是用來(lái)管理多個(gè)Chip的 ，可以控制多個(gè) chip 的布局方式以及事件。

1、ChipGroup的特點(diǎn)

使用 ChipGroup 可以方便的實(shí)現(xiàn) 流式布局效果。其特點(diǎn)如下：

• 默認(rèn)情況下， ChipGroup 中的 chip 會(huì)橫向排列，當(dāng)超過(guò)一行時(shí)會(huì)執(zhí)行換行操作。
• 如果我們不想讓 Chip 換行，那么為 ChipGroup 設(shè)置 app:singleLine=true，如果 Chip 會(huì)超過(guò)一行，則在外層包裹 HorizontalScrollView
• 只有當(dāng)其中包裹的 Chip 是 checkable=true 時(shí)，才具有選中效果

2、ChipGroup的屬性

注意：

• 如果 singLine=false, app:chipSpacing 會(huì)同時(shí)控制Chips間的水平和垂直的間距
• 如果 singLine=true, app:chipSpacing 控制的是Chips之間的水平間距
• 如果設(shè)置了 chipSpacing ，也設(shè)置了 chipSpacingHorizontal / chipSpacingVertical 則 chipSpacing 的值會(huì)被覆蓋

3、ChipGroup的基本使用示例

(1)、效果圖

（2）、示例代碼

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="3、ChipGroup的使用——多行，多選" />

    <!--ChipGroup 默認(rèn)狀態(tài)，會(huì)換行，可多選-->
    <com.google.android.material.chip.ChipGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:chipSpacing="25dp"
        app:chipSpacingHorizontal="35dp"
        app:chipSpacingVertical="10dp">

        <com.google.android.material.chip.Chip
            android:id="@+id/chipInGroup1"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chipInGroup1"
            android:textAppearance="?android:textAppearanceMedium" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chipInGroup2"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chipInGroup2"
            android:textAppearance="?android:textAppearanceMedium" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chipInGroup3"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chipInGroup3"
            android:textAppearance="?android:textAppearanceMedium" />

    </com.google.android.material.chip.ChipGroup>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="4、ChipGroup的使用——單行、單選" />

    <!--ChipGroup 不換行，單選-->
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <com.google.android.material.chip.ChipGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:checkedChip="@id/chipInGroup2_1"
            app:chipSpacing="25dp"
            app:singleLine="true"
            app:singleSelection="true">

            <com.google.android.material.chip.Chip
                android:id="@+id/chipInGroup2_1"
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="chipInGroup2——1"
                android:textAppearance="?android:textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipInGroup2_2"
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="chipInGroup2——2"
                android:textAppearance="?android:textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipInGroup2_3"
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="chipInGroup2——3"
                android:textAppearance="?android:textAppearanceMedium" />

        </com.google.android.material.chip.ChipGroup>
    </HorizontalScrollView>

4、事件監(jiān)聽(tīng)

(1)、setOnCheckedChangeListener

選中監(jiān)聽(tīng)。
注意：只有 singleSelction=true 時(shí)，該監(jiān)聽(tīng)才有效。

• Kotlin版代碼

 //ChipGroup中設(shè)置選中監(jiān)聽(tīng)-- 只有單選的chipGroup才可以使用
        chipGroup2.setOnCheckedChangeListener { chipGroup, selectedId ->
            var hintStr = ""
            when (selectedId) {
                R.id.chipInGroup2_1 -> hintStr = "被選中的是 chipInGroup2_1 "
                R.id.chipInGroup2_2 -> hintStr = "被選中的是 chipInGroup2_2 "
                R.id.chipInGroup2_3 -> hintStr = "被選中的是 chipInGroup2_3 "
                else -> hintStr = "沒(méi)有選中任何chip"
            }
            Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
        }

• java 版代碼

ChipGroup chipGroup = (ChipGroup) findViewById(R.id.chipGroup2);

chipGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(ChipGroup group, @IdRes int checkedId) {
         String hintStr=" ";
         switch(checkedId){
                case R.id.chipInGroup2_1:
                      hintStr = "被選中的是 chipInGroup2_1 ";
                      break;
                case R.id.chipInGroup2_2 :
                      hintStr = "被選中的是 chipInGroup2_2 ";
                      break;
                case R.id.chipInGroup2_3:
                      hintStr = "被選中的是 chipInGroup2_3 ";
                      break;
                default:
                      hintStr = "沒(méi)有選中任何chip";
                      break;
        }
        Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
    }
});

(2)、getCheckedChipId( )

獲取被選中的 ChipId
注意：只有 singleSelction=true 時(shí)，該方法才有效。

示例代碼省略。

(3)、實(shí)現(xiàn)永遠(yuǎn)都有一個(gè)被選中的效果

為 ChipGroup 設(shè)置 singleSelection = true 之后，如果我們每次點(diǎn)擊的 chip 不是同一個(gè) chip , 那么可以實(shí)現(xiàn)類似 RadioGroup 的效果，但是，當(dāng)我們?cè)俅吸c(diǎn)擊一個(gè)被選中的 chip 之后，就會(huì)取消其選中狀態(tài)——此時(shí)，ChipGroup 中就沒(méi)有被選中的條目了。

ChipGroup 的源碼中是這么處理單選事件的：

private class CheckedStateTracker implements android.widget.CompoundButton.OnCheckedChangeListener {
        private CheckedStateTracker() {
        }

        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (!ChipGroup.this.protectFromCheckedChange) {
                int id = buttonView.getId();
                if (isChecked) {
                    if (ChipGroup.this.checkedId != -1 && ChipGroup.this.checkedId != id && ChipGroup.this.singleSelection) {
                        ChipGroup.this.setCheckedStateForView(ChipGroup.this.checkedId, false);
                    }
                    ChipGroup.this.setCheckedId(id);
                } else if (ChipGroup.this.checkedId == id) {
                    // CnPeng 如果點(diǎn)擊了被選中的 chip , 則取消選中
                    ChipGroup.this.setCheckedId(-1);
                }
            }
        }
    }

如果確實(shí)需要實(shí)現(xiàn)這種永遠(yuǎn)有一個(gè)被選中的效果，可以在 onCheckedChangeListener 中做處理，思路是: 當(dāng) checkedId ==-1 時(shí)，配置一個(gè)默認(rèn)選中項(xiàng)。示例如下：

private fun initChipGroupCheckedListener() {
        //ChipGroup中設(shè)置選中監(jiān)聽(tīng)-- 只有單選的chipGroup才可以使用
        chipGroup2.setOnCheckedChangeListener { chipGroup, selectedId ->
            var hintStr = ""
            when (selectedId) {
                R.id.chipInGroup2_1 -> hintStr = "被選中的是 chipInGroup2_1 "
                R.id.chipInGroup2_2 -> hintStr = "被選中的是 chipInGroup2_2 "
                R.id.chipInGroup2_3 -> hintStr = "被選中的是 chipInGroup2_3 "
                else -> {
                    hintStr = "沒(méi)有選中任何chip__手動(dòng)設(shè)置一個(gè)作為默認(rèn)選中"
                    chipInGroup2_1.isChecked = true
                }
            }
            Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
        }
    }

六、ChipDrawable

繼承自 Drawable。

1、xml 中定義ChipDrawable

注意事項(xiàng)：

• 必須在 res 目錄下新建 xml 文件夾，在 xml 文件夾下創(chuàng)建 .xml 文件，其他文件夾下創(chuàng)建會(huì)報(bào)錯(cuò)
• xml 中以 <chip> 開(kāi)頭
• chip 節(jié)點(diǎn)中可以使用 Chip 的全部屬性。
• xml 中定義的<chip> 默認(rèn)是 Entry 樣式的，我們也可以根據(jù)需要更換成 filter/Action/Choice

• res/xml/standalone_chip.xml

<chip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:chipIcon="@drawable/ic_avatar_circle_24"
    android:text="@string/hello_world"/>

• ChipActivity.kt 中應(yīng)用

//直接以 Span的形式將 chipDrawable 加入到 EditText中，這樣看著很好，但是，ChipDrawable 中clos額Icon的點(diǎn)擊事件沒(méi)法實(shí)現(xiàn)啊
bt_applyChip.setOnClickListener { view ->
    val chipDrawable = ChipDrawable.createFromResource(mActivity, R.xml.chip_drawable_1)
    val text = editText.text
    val newInputText = text.substring(mPreSelectionEnd, text.length)
    chipDrawable.setText(newInputText)
    chipDrawable.setBounds(0, 0, chipDrawable.intrinsicWidth, chipDrawable.intrinsicHeight)
    val span = ImageSpan(chipDrawable)
    text.setSpan(span, mPreSelectionEnd, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    editText.setOnKeyListener(this)
    mPreSelectionEnd = text.length
}

七、補(bǔ)充：

1、關(guān)于 textApperence

android:textAppearance 設(shè)置文字外觀。如“ ?android:attr/textAppearanceLargeInverse
”這里引用的是系統(tǒng)自帶的一個(gè)外觀，？表示系統(tǒng)是否有這種外觀，否，則使用默認(rèn)的外觀。可設(shè)置的值如下：

• textAppearanceButton
• textAppearanceInverse
• textAppearanceLarge
• textAppearanceLargeInverse
• textAppearanceMedium
• textAppearanceMediumInverse
• textAppearanceSmall
• textAppearanceSmallInverse

2、MotionSpec

https://developer.android.com/reference/com/google/android/material/animation/MotionSpec?hl=zh-cn

八、 參考：

官方：
https://developer.android.com/reference/com/google/android/material/chip/Chip?hl=zh-cn

https://developer.android.com/reference/com/google/android/material/chip/ChipGroup#addview

含示例代碼
https://material.io/develop/android/components/chip/

https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f

其他Chip的實(shí)現(xiàn)
https://stackoverflow.com/questions/36563739/chips-component-in-android-support-library

引入支持庫(kù)的參考：
https://stackoverflow.com/questions/50289355/google-material-design-library-error-program-type-already-present-android-suppo