Android自定义开关 [英] Android Custom Switch

问题描述

我正在尝试像这样进行自定义切换：

I'm trying to make a custom switch like this:

：

1. 总是显示两边的文本。


2. 不同

这是我面临的两个问题，因为开关只在所选边显示文本，似乎找不到可以指定两种不同颜色的地方？

and these are two problems I faced since the switch only shows the text on the chosen side , and I can't seem to find a place where I can specify two different colors?

我可以使用android studio中的常规开关来实现此功能，还是必须使用一些库？

can I achieve this using the regular switch in android studio or must I use some library?

谢谢。

推荐答案

研究后，我发现了一种方法给我的正是我所需要的，这就是我得到的：

After researching I found a way that gives me exactly what I needed, this is what I got:

如果有人正在寻找一种方法来做到这一点，这是怎么做的：

in case of anyone looking for a way to do it, this is how:

基于此帖子答案，这对我非常有用。

based on this post answer , which worked great for me.

这就是我所做的，我创建了两个可绘制对象，一个用于On，另一个用于关闭：

this is what I did, I created two drawables one for On and another for Off :

switch_on.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@color/colorGray"/>
    <item android:drawable="@color/colorPrimary" android:state_checked="true" />
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true" />
    <item android:drawable="@color/transparent" />

</selector>

switch_off.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@color/colorGray"/>
    <item android:drawable="@color/gray_light" android:state_checked="true" />
    <item android:drawable="@color/black_overlay" android:state_pressed="true" />
    <item android:drawable="@color/transparent" />
</selector>

下一步，为开关的轮廓创建了一个可绘制的对象。
outline.xml

Next , created a drawable for the outline of the switch. outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="#80ffffff" />
    <stroke
        android:width="1dp"
        android:color="@color/gray_light" />
</shape>

我添加的一件事是可绘制的文本颜色，因为文本的颜色根据关于是否检查，是这样的：
switch_text.xml

one thing that I added is a drawable for the text color, because the color of the text changes depending on whether it's checked or not, this is it : switch_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector        xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/colorWhite"/>
    <item android:state_checked="true" android:color="@color/colorWhite"/>
    <item android:color="@color/gray_light"/>
</selector>

最后，在我的布局中创建了 RadioGroup 这样：

and finally, created RadioGroup in my layout this way:

<RadioGroup
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="@drawable/outline"
        android:checkedButton="@+id/off"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/off"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginBottom="1dp"
            android:layout_marginStart="1dp"
            android:layout_marginTop="1dp"
            android:layout_weight="1"
            android:background="@drawable/switch_off"
            android:button="@null"
            android:gravity="center"
            android:padding="@dimen/fab_margin"
            android:text="@string/off"
            android:textColor="@drawable/switch_text" />

        <RadioButton
            android:id="@+id/on"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginBottom="1dp"
            android:layout_marginEnd="1dp"
            android:layout_marginTop="1dp"
            android:layout_weight="1"
            android:background="@drawable/switch_on"
            android:button="@null"
            android:gravity="center"
            android:padding="@dimen/fab_margin"
            android:text="@string/on"
            android:textColor="@drawable/switch_text" />
    </RadioGroup>

注意在正确位置使用每个可绘制对象：

Notice the usage of each drawable in the right place:

android：background = @ drawable / outline for RadioGroup
android：background = @ drawable / switch_off对于第一个RadioButton
<$ c，第一个RadioButton
android：background = @ drawable / switch_on $ c> android：textColor = @ drawable / switch_text 两个单选按钮

android:background="@drawable/outline" for the RadioGroup android:background="@drawable/switch_off" for the first RadioButton android:background="@drawable/switch_on" for the second RadioButton android:textColor="@drawable/switch_text" for both Radio Buttons

仅此而已。

这篇关于Android自定义开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！