Android MaterialButtonToggleGroup-IGI

时间：2020-02-23 14:29:04 　来源:igfitidea点击:

在本教程中，我们将重点介绍Android Material Components新引入的MaterialButtonToggleGroup。

Android MaterialButtonToggleGroup

也称为ToggleButton，它用于托管具有可检查行为的按钮。
它类似于iOS中的SegmentedControl。
用户可以从组中选择一个或者多个选项。

为了使用Material Components，我们需要导入以下内容：

implementation 'com.google.android.material:material:1.0.0'

不要忘记在"活动"中设置" MaterialComponent"主题。

这是我们以XML定义MaterialButtonToggleGroup的方法：

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

</com.google.android.material.button.MaterialButtonToggleGroup>

app：singleSelection属性非常类似于RadioGroup。

通过Material Components，我们可以在UI上设置以下样式：

色彩
形状
版式

在下一节中，我们将使用各种形状，颜色和字体自定义MaterialButtonToggleGroup！让我们开始一个全新的Android Studio项目。

项目结构

Android Material Button切换小组项目

在下一节中，我们将介绍MaterialButtonToggleGroups的不同样式。

基本用法

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

      <Button
          android:id="@+id/btnAndroid"
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Android" 

      <Button
          android:id="@+id/btniOS"
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="iOS" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle基本

MaterialButton中Button的推荐样式是Widget.MaterialComponents.Button.OutlinedButton。

带图标和文字

要在按钮中使用图标，我们将使用MaterialButton：

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

      <com.google.android.material.button.MaterialButton
          android:id="@+id/btnA"
          style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Android"
          app:icon="@drawable/ic_android" 

      <com.google.android.material.button.MaterialButton
          android:id="@+id/btnS"
          style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Sunny"
          app:icon="@drawable/ic_wb_sunny" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle图标文字

仅带有图标

如果只需要使用图标而不使用文本，则需要设置自定义样式。
否则，将会有另外的文本填充。

在styles.xml中添加以下内容：

<style name="IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
      <item name="iconPadding">0dp</item>
      <item name="iconGravity">textStart</item>
  </style>

"材质按钮切换组"图标的代码仅是：

<com.google.android.material.button.MaterialButtonToggleGroup
      android:id="@+id/toggleGroup3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:singleSelection="false">

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_signal_wifi_off"
          app:iconTint="@android:color/holo_red_light" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"

          app:icon="@drawable/ic_signal_wifi_3_bar_lock" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_wifi" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

仅适用于Android Material Toggle图标

在上面的代码中，我们还添加了" iconTint"和多项选择。

设定形状

要设置自定义形状，我们需要以自定义样式设置cornerFamily属性，如下所示：

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

然后在MaterialButton的shapeAppearance属性中设置以上样式：

<com.google.android.material.button.MaterialButtonToggleGroup
      android:id="@+id/toggleGroup4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:singleSelection="false">

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_signal_wifi_off"
          app:strokeWidth="2dp"
          app:shapeAppearance="@style/Cut" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:strokeWidth="2dp"
          app:icon="@drawable/ic_signal_wifi_3_bar_lock" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_wifi"
          app:strokeWidth="2dp"
          app:shapeAppearance="@style/Cut" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

在上面的代码中，我们还在轮廓按钮上设置了" strokeWidth"。

Android材质切换按钮形状切割

圆角形状

我们可以设置自定义的圆角形状，其圆角半径如下所示：

<style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
      <item name="cornerFamily">rounded</item>
      <item name="cornerSize">16dp</item>
  </style>

<com.google.android.material.button.MaterialButtonToggleGroup
      android:id="@+id/toggleGroup5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:singleSelection="false">

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_signal_wifi_off"
          app:shapeAppearance="@style/Rounded"
          app:strokeColor="@android:color/black"
          app:strokeWidth="4dp" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_signal_wifi_3_bar_lock"
          app:strokeColor="@android:color/black"
          app:strokeWidth="4dp" 

      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:icon="@drawable/ic_wifi"
          app:shapeAppearance="@style/Rounded"
          app:strokeColor="@android:color/black"
          app:strokeWidth="4dp" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

Android材质切换按钮形状四舍五入

与版式

以下样式在MaterialButtons的文本上添加了字体系列：

<style name="CustomFont" parent="TextAppearance.MaterialComponents.Headline4">
  <item name="fontFamily">@font/amatic</item>
  <item name="android:textAllCaps">false</item>
  </style>

<com.google.android.material.button.MaterialButtonToggleGroup
      android:id="@+id/toggleGroup6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:singleSelection="false">

      <com.google.android.material.button.MaterialButton
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Java"
          android:textAppearance="@style/CustomFont"
          app:strokeColor="@android:color/black" 

      <com.google.android.material.button.MaterialButton
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Python"
          android:textAppearance="@style/CustomFont"
          app:strokeColor="@android:color/black" 

      <com.google.android.material.button.MaterialButton
          style="@style/Widget.MaterialComponents.Button.OutlinedButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="C++"
          android:textAppearance="@style/CustomFont"
          app:strokeColor="@android:color/black" 

  </com.google.android.material.button.MaterialButtonToggleGroup>

我们已经在res下的font文件夹中添加了自定义字体文件。

MaterialButtonToggleGroup具有一个addOnButtonCheckedListener回调，该回调在选中按钮时触发。

Android MaterialButtonToggleGroup