Android Studio 中的 Apple Music "My library"/"Apple Music" 滑块切换按钮
Apple Music "My library"/"Apple Music" slider toggle button in Android Studio
我正在尝试实现类似 Apple Music 的滑块按钮：
我有选中按钮和未选中按钮的样式：
<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>
如何设置按钮选中时的选中样式和未选中时的未选中样式？另外，我可以做一个类似动画的幻灯片吗？
我尝试使用可绘制文件将样式设置为选中时和未选中时，但在字段样式中我无法放置可绘制资源文件
我知道怎么做了！
您必须创建一个 xml 文件，其中包含按钮是否选中时的颜色。我在这里使用了 4 个文件作为背景，因为我想让外角变圆但里面没有，所以我必须为每一侧创建 2 个背景，一个用于选中时，一个用于未选中时。
如果我使用相同的背景文件，单边圆角会出现问题，因为在左侧，外角是左侧，右侧是右侧
这些是 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>
就是这样！
我正在尝试实现类似 Apple Music 的滑块按钮：
我有选中按钮和未选中按钮的样式：
<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>
如何设置按钮选中时的选中样式和未选中时的未选中样式？另外，我可以做一个类似动画的幻灯片吗？
我尝试使用可绘制文件将样式设置为选中时和未选中时，但在字段样式中我无法放置可绘制资源文件
我知道怎么做了！
您必须创建一个 xml 文件，其中包含按钮是否选中时的颜色。我在这里使用了 4 个文件作为背景，因为我想让外角变圆但里面没有，所以我必须为每一侧创建 2 个背景，一个用于选中时，一个用于未选中时。 如果我使用相同的背景文件，单边圆角会出现问题，因为在左侧，外角是左侧，右侧是右侧
这些是 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>
就是这样！