Android: создайте кнопку переключения с изображением и без текста.

Можно ли создать кнопку переключения на Android, у которой есть изображение, но нет текста? В идеале это выглядело бы так:

Toggle Button With Image

Я видел похожие записи, в которых ответ должен был изменить фон, но я хочу сохранить макет Holo Light и просто поменять текст изображением.

Мне нужно иметь возможность программно изменить источник изображения,

Любые идеи, как я это сделаю?

Если это невозможно сделать, есть ли способ, которым можно включить и выключить обычную кнопку?

Ответ 1

  • Можно ли заменить текст переключения на изображение

    Нет, мы не можем, хотя мы можем скрыть текст, переопределив стиль по умолчанию кнопки переключения, но все же это не даст нам кнопку переключения, которую вы хотите, поскольку мы не можем заменить текст изображением.

  • Как сделать обычную кнопку переключения

    Создайте файл ic_toggle в папке res/drawable

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

    Здесь @drawable/ic_slide_switch_on и @drawable/ic_slide_switch_off создаются изображения.

    Затем создайте другой файл в той же папке, назовите его ic_toggle_bg

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:id="@+android:id/background"  
              android:drawable="@android:color/transparent" />
    
        <item android:id="@+android:id/toggle"
              android:drawable="@drawable/ic_toggle" />
    
    </layer-list>
    

    Теперь добавьте в свою собственную тему (если у вас нет одного файла styles.xml в папке res/values/)

    <style name="Widget.Button.Toggle" parent="android:Widget">
       <item name="android:background">@drawable/ic_toggle_bg</item>
       <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
    </style>
    
    <style name="toggleButton"  parent="@android:Theme.Black">
       <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
       <item name="android:textOn"></item>
       <item name="android:textOff"></item>
    </style>
    

    Это создает для вас пользовательскую кнопку переключения.

  • Как использовать его

    Используйте свой стиль и фон в своем представлении.

      <ToggleButton
            android:id="@+id/toggleButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            style="@style/toggleButton"
            android:background="@drawable/ic_toggle_bg"/>
    

Ответ 2

ToggleButton наследует от TextView, чтобы вы могли отображать чертежи на четырех границах текста. Вы можете использовать это, чтобы отобразить значок, который вы хотите, поверх текста и скрыть фактический текст

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@android:drawable/ic_menu_info_details"
    android:gravity="center"
    android:textOff=""
    android:textOn=""
    android:textSize="0dp" />

Результат по сравнению с обычным ToggleButton выглядит как

enter image description here

Параметр "секунды" должен использовать ImageSpan, чтобы фактически заменить текст изображением. Выглядит немного лучше, так как значок находится в правильном положении, но не может быть сделано с макетом xml напрямую.

Вы создаете простой ToggleButton

<ToggleButton
    android:id="@+id/toggleButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false" />

Затем установите "текст" программно

ToggleButton button = (ToggleButton) findViewById(R.id.toggleButton3);
ImageSpan imageSpan = new ImageSpan(this, android.R.drawable.ic_menu_info_details);
SpannableString content = new SpannableString("X");
content.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(content);
button.setTextOn(content);
button.setTextOff(content);

Результат здесь в середине - значок располагается немного ниже, так как он заменяет текст.

enter image description here

Ответ 3

создать toggle_selector.xml в res/drawable

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

примените селектор к кнопке переключения

<ToggleButton
            android:id="@+id/chkState"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

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

textOff=""
textOn=""

Ответ 4

Я знаю, что это немного поздно, однако для всех, кого это интересует, я создал пользовательский компонент, который в основном представляет собой кнопку переключателя изображений, доступные для рисования состояния, а также фон

https://gist.github.com/akshaydashrath/9662072