接着上篇:我是傳送門
#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)