在Android中的切换按钮中的轨道上写文本

时间:2016-03-07 15:58:23

标签: android button android-switch

我正在尝试在Android中自定义“切换”按钮。我有一个问题,我想在轨道上显示ON-OFF文本,而不是在Android上显示为默认值。我们可以自定义吗。

2 个答案:

答案 0 :(得分:2)

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

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

enter image description hereenter image description here

答案 1 :(得分:1)

你试过Toggle Button吗?你可以像开关按钮一样自定义。我这样使用。 1-在可绘制文件夹中打开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>

布局中togglebutton的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();
        }
    });