如何设计 Android 开关？

小开

最佳答案

You can define the drawables that are used for the background, and the switcher part like this:

<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="@drawable/switch_thumb"
android:track="@drawable/switch_bg" />

现在您需要创建一个选择器，用于定义切换器绘制的不同状态。下面是 Android 资源的拷贝:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
<item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
<item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
<item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

这定义了拇指可绘制的图像，即在背景上移动的图像。有四个九连环图像用于滑块:

停用版本(Android 正在使用的 xhdpi 版本) The deactivated version
按下的滑块: 已激活的滑块(处于状态) : < img src = “ https://i.stack.imgur.com/b3DEa.png”alt = “已激活的滑块”> < br > 默认版本(关闭状态) : < img src = “ https://i.stack.imgur.com/2qZ9X.png”alt = “ enter image description here”>

背景还有三种不同的状态，它们在下面的选择器中定义:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" />
<item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_dark" />
<item                               android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

停用版本: The deactivated version
焦点版本: < img src = “ https://i.stack.imgur.com/JvQwe.png”alt = “焦点版本”> < br > 默认版本: < img src = “ https://i.stack.imgur.com/zW5YX.png”alt = “ the default version”>

要有一个样式开关只需创建这两个选择器，将它们设置为您的开关视图，然后将七个图像更改为您想要的样式。

小开

这是一个令人敬畏的详细答复 Janusz。但是为了那些来这个页面寻找答案的人们，最简单的方法是从安卓资产工作室链接到 http://android-holo-colors.com/(死链接)

A good description of all the tools are at Androidonrocks.com (site offline now)

However, I highly recommend everybody to read the reply from Janusz as it will make understanding clearer. Use the tool to do stuffs real quick

小开

另一种更简单的方法是使用形状而不是9块补丁。这里已经解释过了: Https://stackoverflow.com/a/24725831/512011

小开

可以通过设置不同的颜色属性来自定义材质样式。例如 自定义应用程序主题

<style name="CustomAppTheme" parent="Theme.AppCompat">
<item name="android:textColorPrimaryDisableOnly">#00838f</item>
<item name="colorAccent">#e91e63</item>
</style>

自定义切换主题

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
<item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
<item name="android:colorControlActivated">#1b5e20</item>
<item name="android:colorForeground">#f57f17</item>
<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

您可以通过定义 xml 绘图工具来定义如下图所示的 定制开关轨道和开关拇指