Material Design系列-Toggle Button（MaterialButtonToggleGroup/ShapeAppearance）

接着上篇：我是傳送門

#1. Text button
#2. Outlined button
#3. Contained button
#4. Toggle button
#5. Floating action button
           

我們前三種也都看到效果了，這篇示例Toggle button；

#先附上效果：

 ##  Toggle button：切換按鈕（上圖的第一行按鈕）

切換按鈕可用于對相關選項進行分組。為了強調相關的切換按鈕組，一組應共享一個公共容器。如果設定了singleSelection=true：一組切換按鈕中隻能選擇一個選項，并且一次隻能激活。選擇一個選項會取消選擇其他任何選項。（可以簡單了解為：類似文章的對齊方式，可以選但隻能選一個，或者都不選）

 #  xml布局：

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/button_toggle_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:checkedButton="@+id/btn_left"
        app:singleSelection="true">

        <Button
            android:id="@+id/btn_left"
            style="@style/OutlinedButton.GraphikBold.Green.ToggleGroup"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="left"
            android:textAllCaps="true" />

        <Button
            android:id="@+id/btn_middle"
            style="@style/OutlinedButton.GraphikBold.Green.ToggleGroup"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="middle"
            android:textAllCaps="true" />

        <Button
            android:id="@+id/btn_right"
            style="@style/OutlinedButton.GraphikBold.Green.ToggleGroup"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="right"
            android:textAllCaps="true" />
    </com.google.android.material.button.MaterialButtonToggleGroup>
           

cc: style="@style/OutlinedButton.GraphikBold.Green.ToggleGroup"這個是自己定義的style,具體下面有示例或者見上篇文章。

 #  Activity/Fragment：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        btn_left.isEnabled = false //設定開始時對應的選中狀态不能點選的
        buttonToggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
            //以下代碼是為來選中一項後，不讓他繼續點選來取消選中（單選且必須選中）
            when(checkedId){
                R.id.btn_left ->{
                    btn_left.isEnabled = !isChecked
                }
                R.id.btn_middle ->{
                    btn_middle.isEnabled = !isChecked
                }
                R.id.btn_right ->{
                    btn_right.isEnabled = !isChecked
                }
            }
        }
    }
           

到這Toggle button 完了，那效果圖上那種帶切角的是怎麼弄的？那繼續往下看👇

##  ShapeAppearance屬性

#  xml布局：

<Button
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginVertical="10dp"
        android:text="ShapeSmallCut"
        app:shapeAppearance="@style/ShapeSmallCut" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginVertical="10dp"
        android:text="ShapeMediumCut"
        app:shapeAppearance="@style/ShapeMediumCut" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginVertical="10dp"
        android:paddingHorizontal="30dp"
        android:text="ShapeLargeCut"
        app:shapeAppearance="@style/ShapeLargeCut" />

    <Button
        style="@style/Button.GraphikSemiBold.Purple.CutTopRight"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginVertical="10dp"
        android:text="CutTopRight" />
           

#  styles_button_shape.xml

<resources>
    <style name="ShapeSmallCut" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

    <style name="ShapeMediumCut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">15dp</item>
    </style>

    <style name="ShapeLargeCut" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">25dp</item>
    </style>

    <style name="ShapeSmallCut.TopRight">
        <item name="cornerSize">0dp</item>
        <item name="cornerFamily">cut</item>
        <item name="cornerSizeTopRight">10dp</item>
    </style>

</resources>
           

 #  styles_button.xml設定添加進去就ok了

<style name="Button" parent="Widget.MaterialComponents.Button">
        <item name="android:textColor">@color/colorWhite</item>
        <item name="android:textSize">14sp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:gravity">center</item>
        <item name="backgroundTintMode">src_atop</item>
        <item name="backgroundTint">@color/colorPrimary</item>
        <item name="elevation">10dp</item>
        <item name="rippleColor">@color/colorWhite</item>
        <item name="iconTintMode">src_atop</item>
        <item name="iconTint">@color/colorWhite</item>
        <item name="iconGravity">textStart</item>
        <item name="iconPadding">0dp</item>
        <item name="iconSize">20dp</item>
    </style>

    <style name="Button.GraphikSemiBold">
        <item name="android:fontFamily">@font/graphik_semi_bold</item>
    </style>

    <style name="Button.GraphikSemiBold.Purple">
        <item name="backgroundTint">@color/colorPrimary</item>
    </style>

    <style name="Button.GraphikSemiBold.Purple.CutTopRight">
        <item name="shapeAppearance">@style/ShapeSmallCut.TopRight</item>
    </style>
           

Material Design 還有很多的效果，這裡就簡單的示例，自己可以去發現！

########  Material Design系列 - Button   ########

# Material Design系列-MaterialButton（Icon）

# Material Design系列-Toggle Button（MaterialButtonToggleGroup/ShapeAppearance）

# Material Design系列-FloatingActionButton（FAB）