天天看點
傳回

Android:Chip、ChipGroups、ChipDrawable

文中完整代碼下載下傳位址：​https://github.com/CnPeng/CnPengAndroid2.git">​​https://github.com/CnPeng/CnPengAndroid2.git​​​

文中内容對應上述位址中的 a01_chips 目錄

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

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

1、Chip相關元件的作用

Android:Chip、ChipGroups、ChipDrawable

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

最早實作這種界面的時候，基本都是自定義一個繼承自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版本就是為了這個轉換，）
  • 最後，手動修改 上一步中轉換失敗的檔案(這個可能會比較費時間)

補充

* ​https://android-developers.googleblog.com/2018/05/hello-world-androidx.html">​為什麼棄用support而啟用androidX——https://android-developers.googleblog.com/2018/05/hello-world-androidx.html​​

* ​​support-library和 androix-library的對應關系——https://developer.android.com/topic/libraries/support-library/refactor​​

二、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的預設效果圖

Android:Chip、ChipGroups、ChipDrawable

三、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 屬性間的關系圖

Android:Chip、ChipGroups、ChipDrawable

​

四、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)、效果圖

Android:Chip、ChipGroups、ChipDrawable

（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 時，該方法才有效。

示例代碼省略。

六、ChipDrawable

繼承自 Drawable。

1、xml 中定義ChipDrawable

注意事項：

* 必須在 res 目錄下建立 xml 檔案夾，在 xml 檔案夾下建立 .xml 檔案，其他檔案夾下建立會報錯

* xml 中以 開頭

* chip 節點中可以使用 Chip 的全部屬性。

* xml 中定義的 預設是 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/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/Chip?hl=zh-cn​​​

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

含示例代碼

​https://material.io/develop/android/components/chip/">​​https://material.io/develop/android/components/chip/​​​

​https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f">​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/36563739/chips-component-in-android-support-library​​​

引入支援庫的參考：

​https://stackoverflow.com/questions/50289355/google-material-design-library-error-program-type-already-present-android-suppo">​​https://stackoverflow.com/questions/50289355/google-material-design-library-error-program-type-already-present-android-suppo​​​

同步更新到下列網站：

* ​​我的簡書​​

* 我的公衆号CnPeng，掃描下方二維碼可快速添加關注！

chip 流式标簽 流式布局 ChipGroup ChipDrawable
上一篇: Android:8.0中未知來源安裝權限變更
下一篇: 爬蟲入門經典(十) | 一文帶你快速爬取網易雲音樂

繼續閱讀