Android Studio中的Apple Music“My library"/"Apple Music”滑块切换按钮

Question

我正在尝试实现一个Apple Music like滑块按钮：

​

​

我有选中按钮和未选中按钮的样式：

 <style name="Theme.My.Buttons.Outlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">11dp</item>
        <item name="android:textAppearance">@style/Widget.AppCompat.Button.Small</item>

    </style>

    <style name="Theme.My.Buttons.Active" parent="Widget.MaterialComponents.Button">
        <item name="android:textColor">@color/white</item>
        <item name="android:backgroundTint">@android:color/darker_gray</item>
        <item name="android:textSize">11dp</item>
        <item name="android:textAppearance">@style/Widget.AppCompat.Button.Small</item>
    </style>

这是我的带有按钮的xml文件，目前我手动使用了样式：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".fragments.SearchFragment">
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <Button
            android:id="@+id/button"
            style="@style/Theme.My.Buttons.Outlined"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            style="@style/Theme.My.Buttons.Active"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_weight="1"
            android:text="Button"
            />

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

按钮选中时如何设置勾选样式，取消勾选时如何设置未勾选样式？另外，我可以做一个像动画一样的幻灯片吗？

我尝试使用可绘制文件将样式设置为选中时和取消选中时，但在字段样式中无法放置可绘制资源文件

Answer 1

我知道怎么做了！

当按钮被选中或未被选中时，您必须创建一个带有颜色的xml文件。我在这里使用了4个文件作为背景，因为我想让外角变圆，但里面不是，所以我必须为每一面创建两个背景，一个用于选中时，另一个用于未选中时。如果我使用相同的背景文件，那么单边圆角就会出现问题，因为在左边，外角是左边，在右边是右边

以下是f文件：

这些用于定义选中和未选中时的背景:选中右侧：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners
       android:bottomLeftRadius="0dp"
       android:topLeftRadius="0dp"
       android:bottomRightRadius="@dimen/slider_button_corner_size"
       android:topRightRadius="@dimen/slider_button_corner_size"
       />

   <solid android:color="@color/android_darker_gray" />

</shape>

常规右侧：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners

       android:bottomLeftRadius="0dp"
       android:topLeftRadius="0dp"
       android:bottomRightRadius="@dimen/slider_button_corner_size"
       android:topRightRadius="@dimen/slider_button_corner_size"
       />
   <solid android:color="@color/white" />

   <stroke
       android:width="0.5dp"
       android:color="@color/slider_button_outline_color_unchecked" />
</shape>

常规左侧：

<?xml version="1.0" encoding="utf-8"?>

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <corners

           android:bottomLeftRadius="@dimen/slider_button_corner_size"
           android:topLeftRadius="@dimen/slider_button_corner_size"
           android:bottomRightRadius="0dp"
           android:topRightRadius="0dp"
           />
       <solid android:color="@color/white" />

       <stroke
           android:width="0.5dp"
           android:color="@color/slider_button_outline_color_unchecked" />
   </shape>

选择左侧：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners
       android:bottomLeftRadius="@dimen/slider_button_corner_size"
       android:topLeftRadius="@dimen/slider_button_corner_size"
       android:bottomRightRadius="0dp"
       android:topRightRadius="0dp"
       />
   <solid android:color="@color/android_darker_gray" />

</shape>

这些用于定义在选中和不选中时将使用什么背景：

定义者右侧：

定义器左侧：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/radio_background_selected_left" android:state_checked="true" />
   <item android:drawable="@drawable/radio_background_regular_left" />
</selector>

然后在想要使用它的布局上放入：

<RadioGroup
   android:id="@+id/radioGroupSliderSearch"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginBottom="10dp"
   android:checkedButton="@id/radioButtonMyMaterialsSearch"
   android:gravity="center_horizontal"
   android:orientation="horizontal"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent">


   <RadioButton
       android:id="@+id/radioButtonMyMaterialsSearch"
       android:layout_width="match_parent"
       android:layout_height="20dp"
       android:layout_weight="1"
       android:background="@drawable/radio_button_background_definer_left"
       android:button="@android:color/transparent"
       android:checked="true"
       android:clickable="true"
       android:gravity="center"
       android:text="Meus Materiais"
       android:textColor="@color/radio_button_text_definer"
       android:textSize="10sp" />

   <RadioButton
       android:id="@+id/radioButtonEdugatherSearch"
       android:layout_width="match_parent"
       android:layout_height="20dp"
       android:layout_weight="1"
       android:background="@drawable/radio_button_background_definer_right"
       android:button="@android:color/transparent"
       android:checked="false"
       android:clickable="true"
       android:gravity="center"
       android:text="EduGather"
       android:textColor="@color/radio_button_text_definer"
       android:textSize="10sp" />

</RadioGroup>

就是这样！