无法对齐 Android 中的 Material 切换按钮

Question

我正在尝试从 4 个选项（例如工具 1、工具 2、工具 3、工具 4）中获取单个用户输入。早些时候我使用了 radio-group 后来我遇到了一个很棒的 UI 设计。所以我尝试使用 Material 切换按钮来添加元素。 https://material.io/components/buttons/android#toggle-button

所以我想我会把它们放在：

             Tool 1        Tool 2
             Tool 3        Tool 4

但是正如我提到的，我有 4 个按钮，它们被放置在一行（水平）并且不显示全文。例如：

Tool 1 Tool 2 Tool 3 To...

我尝试添加约束布局/table 布局，但它们不起作用，我认为不支持。例如：

<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
      <Constraint-layout
        ....>
             <Button ...../>
             <Button ...../>
             <Button ...../>
             <Button ...../>
      </Constraint-layout>
</com.google.android.material.button.MaterialButtonToggleGroup>

Answer 1

根据 MaterialButtonToggleGroup documentation 它是这样说的：

A common container for a set of related, toggleable MaterialButtons. The MaterialButtons in this group will be shown on a single line.

还有这个：

MaterialButtonToggleGroup is a LinearLayout. Using android:layout_width="MATCH_PARENT" and removing android:insetBottom android:insetTop on the children is recommended if using VERTICAL.

也就是说，您无法使用任何 MaterialButtonToggleGroup 属性来根据需要更改方向。有一个解决方法，但我不确定这样做有多大好处。

您可以在 XML 代码中执行此操作：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:orientation="horizontal">    

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            style="?attr/materialButtonOutlinedStyle"
            />

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

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"
            style="?attr/materialButtonOutlinedStyle"
            />

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

</LinearLayout>

然后你得到这个：

您需要解决的下一个问题是处理每个切换组上的点击事件。因为当你点击一组时，另一组也需要响应。这需要与听众一起完成。这里有文档：https://developer.android.com/reference/com/google/android/material/button/MaterialButtonToggleGroup#addonbuttoncheckedlistener

Answer 2

MaterialToggleGroup和MaterialButton做不到，多列多行不规则排列建议使用TableLayout，选择器Drawable反映选择了哪个项目，

无法对齐 Android 中的 Material 切换按钮

Not able to Align Material Toggle Button in Android

android

material-design

material-components-android