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

Question

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

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

мне нужно, чтобы иметь возможность programaticallly изменить источник изображения,

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

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

Answer 1

1. Могу ли я заменить текст тумблер с изображением

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

2. Как я могу сделать нормальную кнопку переключения между

   Создайте файл 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> 
   

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

3. Как пользоваться

   Используйте свой стиль и фон, на ваш взгляд.

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

Answer 2

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

<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 выглядит как

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

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

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

Затем установите «текст» programmatially

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

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

Answer 3

создать toggle_selector.xml в разрешении/вытяжке

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

Answer 4

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

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