Android：创建一个带有图片且没有文字的切换按钮

Question

是否可以在Android中创建一个具有图片但没有文字的切换按钮？ 理想的情况是这样的：

我见过类似的帖子，答案是改变背景，但我想保留Holo Light布局，只是将文本与图像交换。

我需要能够以编程方式更改图像源，

任何想法，我将如何做到这一点？

如果无法完成此操作，是否有办法使正常按钮打开和关闭？

Answer 1

1. 我可以用图像替换切换文本吗

   不，我们不能，尽管我们可以通过覆盖切换按钮的默认样式来隐藏文本，但是由于我们无法用图像替换文本，因此仍然无法提供所需的切换按钮。

2. 如何制作普通的切换按钮

   在res/drawable文件夹中创建文件ic_toggle

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

   现在添加到您的自定义主题，（如果您没有，请在res/values/文件夹中创建一个styles.xml文件）

    <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相比，结果看起来像

秒选项是使用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);

此处的结果位于中间-图标，因为它代替了文本，因此位置稍低。

Answer 3

在res / drawable中创建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

我知道这有点晚了，但是对于任何有兴趣的人，我创建了一个自定义组件，该组件基本上是一个切换图像按钮，drawable可以具有状态以及背景

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