安卓自定义开关

Question

我正在尝试像这样进行自定义开关：

具有这些特性：

1. 始终显示两侧的文字。
2. 开启和关闭的不同颜色。

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

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

谢谢。

Answer 1

经过研究，我找到了一种可以满足我需要的方法，这就是我得到的：

如果有人想办法做到这一点，方法如下：

基于这篇文章 answer ，这对我很有用。

这就是我所做的，我创建了两个可绘制对象，一个用于 On，另一个用于 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

<?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

<?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：

<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>

注意每个drawable在正确位置的用法：

android:background="@drawable/outline" 用于 RadioGroup android:background="@drawable/switch_off" 用于第一个 RadioButton android:background="@drawable/switch_on" 用于第二个 RadioButton android:textColor="@drawable/switch_text" 两个单选按钮

仅此而已。

Answer 2

我认为this library可以帮助你

implementation 'com.github.angads25:toggle:1.0.0'

用法

1. 首先在您的 xml 布局中添加一个 Switch（例如 LabeledSwitch）：

   <com.github.angads25.toggle.LabeledSwitch
       android:id="@+id/switch4"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:textSize="14sp"
       app:on="false"
       app:textOn="ON"
       app:textOff="OFF"
       app:colorOn="#00c4a6"
       app:colorBorder="#00c4a6"/>
   

2. 在您的 Activity/Fragment 类中对 Switch 的引用设置一个 Toggle 事件处理程序，如下所示：

   LabeledSwitch labeledSwitch = findViewById(R.id.switch);
   labeledSwitch.setOnToggledListener(new OnToggledListener() {
       @Override
       public void onSwitched(LabeledSwitch labeledSwitch, boolean isOn) {
       // Implement your switching logic here
       }
   });
   

就是这样。您所有的切换回调都将在 onSwitched 方法中处理，参数 isOn 将提供开关的当前状态。

可用的开关

Answer 3

使用切换按钮（根据图像比例更改高度/宽度）和选择器，这是代码

<ToggleButton
      android:id="@+id/toggle_"
      android:layout_width="60dp"
      android:layout_height="30dp"
      android:layout_alignParentStart="true"
      android:background="@drawable/on_off"
      android:textOff=""
      android:textOn=""/>

<selector
   xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_checked="true"
   android:drawable="@drawable/ic_on"  />
   <item android:state_checked="false"
   android:drawable="@drawable/ic_off"  />
</selector>

Answer 4

要为开关创建 ON 和 OFF 标签，您可以将属性 android:textOn 和 android:textOff 与开关声明一起使用。 为确保始终显示文本 lebals，特别是对于 API 级别更大的 API21，也使用此属性：android:showText="true"。 那么你的开关应该是这样的：

<Switch
    android:id="@+id/switcher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="OFF"
    android:textOn="ON"
    android:showText="true"
/>

为了更改默认颜色，您必须像这样为其指定单独的设计：

1. 在文件values\styles.xml 中定义这样的样式：

<style name="CustomSwitchTheme" parent="Theme.AppCompat.Light">
    <item name="android:colorControlActivated">#FF0000</item>
</style>

重要的是，您还要引用正确的父主题。

2.定义新的开关样式后，您可以将自定义样式链接到具有属性的开关

android:theme="@style/CustomSwitchTheme"

最后你的 Switch 应该是这样的：

<Switch
    android:id="@+id/switcher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="OFF"
    android:textOn="ON"
    android:showText="true"
    android:theme="@style/CustomSwitchTheme"
/>