Android Custom Switch

Question

Я пытаюсь сделать пользовательский переключатель следующим образом:

с этими свойствами:

1. текстс обеих сторон всегда отображаются.
2. разные цвета для включения и выключения.

и с этими двумя проблемами я столкнулся, так как коммутатор показывает текст только на выбранной стороне, и я могуНе могу найти место, где я могу указать два разных цвета?

Могу ли я добиться этого с помощью обычного переключателя в Android Studio или я должен использовать какую-то библиотеку?

Спасибо.

Answer 1

После исследования я нашел способ, который дает мне именно то, что мне нужно, вот что я получил:

в случае, если кто-то ищетспособ сделать это, вот как:

на основе этого поста ответ , который отлично сработал для меня.

это то, что я сделал, я создал два рисованных объектаодин для включения и другой для выключения:

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>

Обратите внимание на использование каждого рисованного в нужном месте:

android:background="@drawable/outline" для RadioGroup android:background="@drawable/switch_off" для первой RadioButton android:background="@drawable/switch_on" для второй RadioButton android:textColor="@drawable/switch_text" для обеих кнопок Radio

И это все.

Answer 2

Для создания меток ON и OFF для коммутатора вы можете использовать атрибуты android:textOn и android:textOff с декларацией коммутатора.Чтобы гарантировать, что текстовые пометки всегда отображаются, особенно для 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
    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"
/>

Answer 3

Используйте ToggleButton (изменить высоту / ширину в соответствии с соотношением изображений) и селектор, вот код

<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

я думаю эта библиотека может помочь вам

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

Использование

1. Начните с добавления переключателя (например, LabeledSwitch) в макете xml:

   <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. Для ссылки на Switch в вашем классе Activity / Fragment установите для него обработчик события переключения, как показано ниже:

   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 предоставит текущее состояние переключателя.

Доступны переключатели