Android:Chip、ChipGroups、ChipDrawable

190319 更新 : 實現 ChipGroup 中永遠有一個選中的效果

文中完整代碼下載地址：https://github.com/CnPeng/CnPengAndroid2.git
文中內容對應上述地址中的 a01_chips 目錄

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

一、Chip相關組件的作用及如何導包

1、Chip相關組件的作用

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

最早實現這種界面的時候，基本都是自定義一個繼承自ViewGroup的控件，然后在Java代碼中動態的add 一個個的TextView；

后來有了 RecyclerView , 我們實現這種界面就比較方便了；

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

2、引入material兼容包

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

（1）、新建的項目

  • 引入兼容包
implementation 'com.google.android.material:material:1.0.0-rc01'
  • 應用 MaterialComponents 主題
    為 activity 或者 APP 應用 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）、現有的項目

  • 先移除 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或該 主題的子主題（此處沒想明白，為啥單純為chip所在activity應用該主題不行；新建的項目中，可以單純的給activity設置主題）
  • 修改 project 的 build.gralde 中的 gradle版本為不低于3.2.0 的版本 ，如
buildscript {
    ......
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.0-beta05'
        ......
    }
}
  • 然后在 AndroidStuido 菜單欄中依次點擊：Refactor > MigrateToAndroidX（上一步修改gradle版本就是為了這個轉換，）
  • 最后，手動修改 上一步中轉換失敗的文件(這個可能會比較費時間)

補充

二、Chip的分類及其特性

1、Chip的分類

注意：以下類別中，特點描述都是基于只設置 text 和 style 不設置其他屬性時總結的

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

（1）、Action chip

  • 使用 style="@style/Widget.MaterialComponents.Chip.Action"
  • 不設置style時，默認使用上述style
  • 默認前后圖標都不展示，點擊后沒有選中狀態
    <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="這是一個單一的chip" />

（2）、Filter Chip

  • 使用 style="@style/Widget.MaterialComponents.Chip.Filter"
  • 初始狀態下， 不展示前后圖標
  • 點擊之后會展示前面的選中圖標，并且具有選中狀態
  • 通常應用在 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"
  • 默認在末尾展示刪除按鈕；點擊后前面展示選中圖標，有選中狀態
  • 通常可以作為 chipDrawable 使用，比如在填選郵件收件人時可以使用
    <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

  • 默認不展示前后的圖標，但點擊后有選中狀態
  • 通常用在 ChipGroup 中 , 通過 ChipGroup 的 singleSelection=true/false 屬性可以實現單選或多選
    <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的默認效果圖

三、Chip的屬性

1、Chip 的屬性

類別 屬性名稱 具體作用
Shape app:chipCornerRadius 圓角半徑
Size app:chipMinHeight 最小高度
Background app:chipBackgroundColor 背景顏色
Border app:chipStrokeColor 邊線顏色
Border app:chipStrokeWidth 邊線寬度
Ripple app:rippleColor 水波紋效果的顏色
Label android:text 文本內容
Label android:textColor 修改文本顏色
Label android:textAppearance 字體樣式
Chip Icon app:chipIconVisible 前面的圖標是否展示
Chip Icon app:chipIcon chip中文字前面的圖標
Chip Icon app:chipIconTint 文字前面的圖標著色
Chip Icon app:chipIconSize chip中文字前面的圖標
Close Icon app:closeIconVisible chip中文字后面的關閉按鈕是否可見
Close Icon app:closeIcon chip中文字后面的關閉圖標
Close Icon app:closeIconSize 文字后面的關閉圖標的大小
Close Icon app:closeIconTint 文字后面的著色
Checkable app:checkable 是否可以被選中
Checked Icon app:checkedIconVisible 選中狀態的圖標是否可見
Checked Icon app:checkedIcon 選中狀態的圖標
Motion app:showMotionSpec 動效？
Motion app:hideMotionSpec 動效？
Paddings app:chipStartPadding chip左邊距
Paddings app:chipEndPadding chip右邊距
Paddings app:iconStartPadding chipIcon的左邊距
Paddings app:iconEndPadding chipIcon的右邊距
Paddings app:textStartPadding 文本左邊距
Paddings app:textEndPadding 文本右邊距
Paddings app:closeIconStartPadding 關閉按鈕的做左邊距
Paddings app:closeIconEndPadding 關閉按鈕的右邊距

2、Chip 屬性間的關系圖


上圖來自于：ChipDrawable文檔 https://developer.android.com/reference/com/google/android/material/chip/ChipDrawable?hl=zh-cn

四、Chip的監聽

（1）、setOnClickListener

點擊事件的監聽。

  • Kotlin版示例代碼：
//使用了 kotlinx , 所以不需要 fingViewById。
chip_normal1.setOnClickListener {
      Toast.makeText(mActivity, "Chip被點擊了", 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被點擊了", Toast.LENGTH_SHORT).show()
      }
});

（2）、setOnCheckedChangeListener

選中狀態的監聽。

注意：

  • 只有 checkable 屬性為true 時該監聽才會生效
  • 未設置 checkable 屬性時，如果應用了 filter/entry/choice 的style , 該監聽可生效，因為這三種style 中 checkable 的值為true。而 ation 的 style 中 checkable 是默認關閉的
  • 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

關閉按鈕被點擊的監聽

1)、示例代碼

  • Kotlin版代碼
//關閉按鈕的點擊監聽——closeIcon 沒有id，所以必須需要構造匿名監聽
chip_entry.setOnCloseIconClickListener {
    Toast.makeText(mActivity, "ClostIcon被點擊了", 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被點擊了", Toast.LENGTH_SHORT).show()
    }
});

2）、注意事項

假設我們讓Chip所在的界面 實現了 onClickListener ，那么，為chip 設置點擊監聽時就可以直接調用 chip.setOnClickListener(this)。但是，如果此時也需要監聽 CloseIcon 的點擊事件，我們必須單獨為 CloseIcon 構造一個匿名監聽——因為：

CloseIcon 是直接通過畫筆畫出來的，沒有id。在處理點擊事件時，Chip的源碼中實際是監聽了觸摸事件，根據觸摸的位置判斷 CloseIcon是否被點擊了。相關源碼如下：

  • 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 點擊事件的源碼
    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 是用來管理多個Chip的 ，可以控制多個 chip 的布局方式以及事件。

1、ChipGroup的特點

使用 ChipGroup 可以方便的實現 流式布局效果。其特點如下：

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

2、ChipGroup的屬性

屬性名稱 作用 示例
app:checkedChip 初始選中的chip app:checkedChip="@id/chipInGroup2_1"
app:chipSpacing Chip間的間距 app:chipSpacing="25dp"
app:chipSpacingHorizontal Chip間的水平間距 app:chipSpacingHorizontal="35dp"
app:chipSpacingVertical Chip間的垂直間距 app:chipSpacingVertical="10dp"
app:singleLine 是否開啟單行模式 app:singleLine="true"
app:singleSelection 是否開啟單選模式 app:singleSelection="true"

注意：

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

3、ChipGroup的基本使用示例

(1)、效果圖

（2）、示例代碼

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

    <!--ChipGroup 默認狀態，會換行，可多選-->
    <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、事件監聽

(1)、setOnCheckedChangeListener

選中監聽。
注意：只有 singleSelction=true 時，該監聽才有效。

  • Kotlin版代碼
 //ChipGroup中設置選中監聽-- 只有單選的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 = "沒有選中任何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 = "沒有選中任何chip";
                      break;
        }
        Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
    }
});

(2)、getCheckedChipId( )

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

示例代碼省略。

(3)、實現永遠都有一個被選中的效果

為 ChipGroup 設置 singleSelection = true 之后，如果我們每次點擊的 chip 不是同一個 chip , 那么可以實現類似 RadioGroup 的效果，但是，當我們再次點擊一個被選中的 chip 之后，就會取消其選中狀態——此時，ChipGroup 中就沒有被選中的條目了。

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 如果點擊了被選中的 chip , 則取消選中
                    ChipGroup.this.setCheckedId(-1);
                }
            }
        }
    }

如果確實需要實現這種永遠有一個被選中的效果，可以在 onCheckedChangeListener 中做處理，思路是: 當 checkedId ==-1 時，配置一個默認選中項。示例如下：

private fun initChipGroupCheckedListener() {
        //ChipGroup中設置選中監聽-- 只有單選的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 = "沒有選中任何chip__手動設置一個作為默認選中"
                    chipInGroup2_1.isChecked = true
                }
            }
            Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
        }
    }

六、ChipDrawable

繼承自 Drawable。

1、xml 中定義ChipDrawable

注意事項：

  • 必須在 res 目錄下新建 xml 文件夾，在 xml 文件夾下創建 .xml 文件，其他文件夾下創建會報錯
  • xml 中以 <chip> 開頭
  • chip 節點中可以使用 Chip 的全部屬性。
  • xml 中定義的<chip> 默認是 Entry 樣式的，我們也可以根據需要更換成 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 中應用
//直接以 Span的形式將 chipDrawable 加入到 EditText中，這樣看著很好，但是，ChipDrawable 中clos額Icon的點擊事件沒法實現啊
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
}

七、補充：

1、關于 textApperence

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

  • 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的實現
https://stackoverflow.com/questions/36563739/chips-component-in-android-support-library

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容