相关文章推荐
安静的黄豆  ·  pymol 翻转180 - CSDN文库·  1 月前    · 
大方的金针菇  ·  java 我现在有个list ...·  3 月前    · 
怕考试的西瓜  ·  Java ...·  1 年前    · 

主要功能在幫助輸入信息、進行選擇、過濾內容或觸發操作,Chipa和Button有相似之處在於它們都提供視覺提示用戶採取行動和做出選擇。

但是有一些重要的區別,Chipa呈現畫面上的補充選項同時應該根據其支持的內容的性質提供不同的操作,而Button應該是layout的持久固定和靜態的、預先確定的選項。

從用戶流程的角度來看,Chipa代表體驗中的分叉路徑,而Button代表流程中的線性步驟。

Material 2 更新 Material 3

  • 顏色:新的顏色映射和與動態顏色的兼容性
  • 形狀:圓角矩形
  • 類型:Material 2 Action Chips 在Material 3被分為Assist Chips、Suggestion Chips。
    Material 2 Choice Chips 在Material 3時是在Filter Chips的子級。
  • Chips 四種類型

  • Assist chip 輔助
  • Filter chip 過濾
  • Input chip 輸入
  • Suggestion chip 建議
  • 從實作角度探討

    API and source code:

    Chip: Class definition、 Class source

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"/>
    

    ChipGroup:Class definition、Class source

    ChipGroup 包含 Chips 並透過 attribute 管理
    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
      <!-- Chips can be declared here, or added dynamically. -->
    </com.google.android.material.chip.ChipGroup>
    

    ChipDrawable:Class definition、Class source

    Assist chip

    可以顯示諸如日曆事件之類的補充信息

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_1"
        style="@style/Widget.Material3.Chip.Assist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="日曆"
        app:chipIcon="@drawable/ic_calendar_month_24"
        app:ensureMinTouchTargetSize="true"/>
    
    chip.setOnClickListener {
       // Responds to chip click
    chip.setOnCloseIconClickListener {
        // Responds to chip's close icon click if one is present
    chip.setOnCheckedChangeListener { chip, isChecked ->
        // Responds to chip checked/unchecked
    

    Filter chip

    ChipGroup 寬度設定wrap_content 設定會根據手機裝置寬度換行。

    Chip 屬性設定 android:checked="true"

    Chip之間上下左右間距,預設上下左右間距皆8dp,調整可以透過app:chipSpacingHorizontal設定左右,app:chipSpacingVertical設定上下。

    ChipGroup 設定呈現Chip 單行app:singleLine="true",需要在外層包HorizontalScrollView

    <com.google.android.material.chip.ChipGroup
                android:id="@+id/chipGroupFilter"
                style="@style/Widget.Material3.ChipGroup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                app:chipSpacingHorizontal="15dp">
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_1"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="Filter 1"/>
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_2"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 2"/>
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_3"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="Filter 3"/>
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_4"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 4"/>
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_5"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 5"/>
                <com.google.android.material.chip.Chip
                    android:id="@+id/filter_chip_6"
                    style="@style/Widget.Material3.Chip.Filter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Filter 6"/>
    </com.google.android.material.chip.ChipGroup>
    

    Input chip

    ChipGroup 寬度設定wrap_content 設定會根據手機裝置寬度換行。

    Chip之間上下左右間距,預設上下左右間距皆8dp,調整可以透過app:chipSpacingHorizontal設定左右,app:chipSpacingVertical設定上下。

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroupInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:chipSpacingHorizontal="15dp">
        <com.google.android.material.chip.Chip
            android:id="@+id/input_chip_1"
            style="@style/Widget.Material3.Chip.Input"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Input 1"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/input_chip_2"
            style="@style/Widget.Material3.Chip.Input"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Input 2"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/input_chip_3"
            style="@style/Widget.Material3.Chip.Input"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Input 3"/>
    </com.google.android.material.chip.ChipGroup>
    

    Suggestion chip

    @style/Widget.Material3.Chip.Suggestion 預設chipIconVisible 顯示 false,所以要設定chipIcon時需要app:chipIconVisible="true"即可顯示

    <com.google.android.material.chip.ChipGroup
                android:id="@+id/chipGroupSuggestion"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                app:singleLine="true"
                app:chipSpacingHorizontal="15dp">
    						<!--設定chipIcon-->
                <com.google.android.material.chip.Chip
                    android:id="@+id/suggestion_chip_1"
                    style="@style/Widget.Material3.Chip.Suggestion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
    								app:chipIcon="@drawable/ic_car_24"
                    app:chipIconVisible="true"
                    android:text="Suggestion 1"/>
    						<!--預設-->
                <com.google.android.material.chip.Chip
                    android:id="@+id/suggestion_chip_2"
                    style="@style/Widget.Material3.Chip.Suggestion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Suggestion 2"/>
    </com.google.android.material.chip.ChipGroup>
    

    Anatomy and key properties

  • Container
  • Remove icon (optional)
  • Thumbnail (optional)
  • Styles

    Element Style

    Widget.Material3.Chip.Assist 預設

    <style name="Widget.Material3.Chip.Assist" parent="Base.Widget.Material3.Chip">
        <item name="android:checkable">false</item>
        <item name="chipIconVisible">true</item>
        <item name="checkedIconVisible">false</item>
        <item name="closeIconVisible">false</item>
        <item name="android:textColor">@color/m3_chip_assist_text_color</item>
        <item name="chipMinHeight">32dp</item>
        <item name="chipStartPadding">8dp</item>
        <item name="iconStartPadding">0dp</item>
        <item name="iconEndPadding">0dp</item>
        <item name="textStartPadding">8dp</item>
        <item name="textEndPadding">8dp</item>
        <item name="closeIconStartPadding">0dp</item>
        <item name="closeIconEndPadding">0dp</item>
        <item name="chipEndPadding">8dp</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Chip.Assist</item>
      </style>
    

    Widget.Material3.Chip.Input 預設

    <style name="Widget.Material3.Chip.Input" parent="Base.Widget.Material3.Chip">
        <item name="android:checkable">true</item>
        <item name="chipMinHeight">32dp</item>
        <item name="chipIconSize">24dp</item>
        <item name="chipStartPadding">4dp</item>
        <item name="iconStartPadding">0dp</item>
        <item name="iconEndPadding">0dp</item>
        <item name="textStartPadding">8dp</item>
        <item name="textEndPadding">8dp</item>
        <item name="closeIconStartPadding">0dp</item>
        <item name="closeIconEndPadding">4dp</item>
        <item name="chipEndPadding">4dp</item>
      </style>
    

    Widget.Material3.Chip.Suggestion 預設

    <style name="Widget.Material3.Chip.Suggestion" parent="Base.Widget.Material3.Chip">
        <item name="android:checkable">true</item>
        <item name="chipIconVisible">false</item>
        <item name="checkedIconVisible">false</item>
        <item name="closeIconVisible">false</item>
        <item name="chipMinHeight">32dp</item>
        <item name="chipStartPadding">8dp</item>
        <item name="iconStartPadding">0dp</item>
        <item name="iconEndPadding">-2dp</item>
        <item name="textStartPadding">8dp</item>
        <item name="textEndPadding">6dp</item>
        <item name="closeIconStartPadding">-2dp</item>
        <item name="closeIconEndPadding">0dp</item>
        <item name="chipEndPadding">10dp</item>
      </style>
    

    Widget.Material3.Chip.Filter 預設

    <style name="Widget.Material3.Chip.Filter" parent="Base.Widget.Material3.Chip">
        <item name="android:checkable">true</item>
        <item name="chipIconVisible">false</item>
        <item name="closeIconVisible">false</item>
        <item name="checkedIcon">@drawable/ic_m3_chip_check</item>
        <item name="chipMinHeight">32dp</item>
        <item name="chipStartPadding">8dp</item>
        <item name="iconStartPadding">0dp</item>
        <item name="iconEndPadding">-2dp</item>
        <item name="textStartPadding">8dp</item>
        <item name="textEndPadding">6dp</item>
        <item name="closeIconStartPadding">-2dp</item>
        <item name="closeIconEndPadding">0dp</item>
        <item name="chipEndPadding">10dp</item>
      </style>
    

    Widget.Material3.ChipGroup 預設

    <style name="Widget.MaterialComponents.ChipGroup" parent="android:Widget">
        <item name="chipSpacingHorizontal">8dp</item>
        <item name="singleLine">false</item>
        <item name="singleSelection">false</item>
     </style>
    

    Assist chip layout

    Filter chip layout

    Input chip layout

    Suggestion chip layout

    參考資料:Material Design Component Chips