android - 在 Android 的 Switch Button 中的轨道上写入文本

Question

我正在尝试在 Android 中自定义 Switch 按钮。我有一个问题，我想在 Track 上显示 ON-OFF 文本，而不是在 Thumb 上显示为 Android 的默认值。我们可以定制这个吗？

Answer 1

自定义开关/修改开关/在轨道上写入/拇指在两种情况下都相同

    <RelativeLayout
        android:layout_width="118dp"
        android:layout_height="45dp"
        android:orientation="horizontal">
        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/switch_room_availability"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:checked="true"
            android:textOff="Taken"
            android:textOn="Available"
            android:thumb="@drawable/thumb_selector"
            app:switchMinWidth="118dp"
            app:track="@drawable/track_selector" />

        <TextView
            android:id="@+id/tv_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/circular_std_medium"
            android:gravity="center|left"
            android:paddingStart="12dp"
            android:text="@string/available"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/tv_text_taken"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/circular_std_medium"
            android:gravity="center|right"
            android:paddingEnd="23dp"
            android:text="Taken"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="gone" />

    </RelativeLayout>

    thumb_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
    <shape
        android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true">
        <solid android:color="#ffffff" />
        <corners android:radius="100dp" />
        <padding android:top="4dp" android:bottom="4dp"/>
        <size android:width="45dp" android:height="25dp" />
        <stroke android:width="15dp" android:color="#0000ffff" />
    </shape>
   </item>
   </selector>

  track_selector.xml
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checked="true">
    <shape android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true">
        <solid android:color="@color/green_toggle" />
        <corners android:radius="50dp" />
        <size android:width="200dp" android:height="40dp" />
    </shape>
 </item>
 <item android:state_checked="false">
    <shape android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true" >

        <corners android:radius="50dp" />

        <size android:width="200dp" android:height="40dp" />
        <solid android:color="@color/red_toggle" />

    </shape>
  </item>
  </selector>

Answer 2

你试过切换按钮吗？您可以像开关按钮一样进行自定义。我是这样使用的。1-在drawable文件夹中打开xml

你的 Drawable xml @switch_thumb

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

2 设置背景来切换布局中的按钮

你的布局 xml

<ToggleButton
     android:layout_width="60dp"
     android:layout_height="30dp"
     android:textOn=""
     android:textOff=""
     android:background="@drawable/switch_thumb"
     android:id="@+id/toggle"
     />

3-主要活动关闭检查以及是否要设置检查

mToggle.setChecked(true);//mToggle.setChecked(prefs.getBoolean("toggle", false)

mToggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //put in SharedPreferences 
            editor.putBoolean("toggle", mToggle.isChecked());
            editor.apply();
        }
    });