Android：创建一个带有图像但没有文本的切换按钮

Question

在Android中，是否可能创建一个带有图像但没有文本的切换按钮？ 理想情况下，它应该是这个样子:

我看过类似的帖子，答案是更改背景，但我想保留Holo Light布局，并仅用图像替换文本。

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

有任何想法怎么做吗？

如果无法实现此操作，是否有一种方法可以使普通按钮在打开和关闭之间切换？

- Eduardo

---

据我所知，除了用所需的图像交换整个双状态背景图像之外，没有简单的方法来将文本替换为图像。您可以尝试使用ImageSpan将文本设置为图像，例如在http://stackoverflow.com/questions/7616437/imagespan-in-a-widget中所述。 - zapl

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>

这将为您创建一个自定义切换按钮。

如何使用

在您的视图中使用自定义样式和背景。

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

- Rachit Mishra

---

这太棒了，谢谢。我能在哪里找到用于Holo Light切换按钮的@drawable/ic_slide_switch_on和off图像？ - Eduardo

它们位于sdk\platforms\android-17\data\res\drawable-hdpi的btn_toggle文件中，您也可以在android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html上查看。 - Rachit Mishra

非常感谢！如果我可以给你投多次票，我一定会的 :) - Eduardo

这只设置了“background”，似乎更简单。 - yurenchen

我不得不用这个替换@+android:id/toggle才能使它正常工作。否则，它是我使用的完全相同的解决方案。 - isakbob

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

然后以编程方式设置 "text"。

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

由于图标占用了文本的位置，因此在中间的结果-图标会稍微放低。

- zapl

---

好主意，我从未在ToggleButton上看到过drawable选项。 - Eduardo

如果你有一个 TextView 和一个 ImageView，你经常会遇到这个问题：https://dev59.com/yWsy5IYBdhLWcg3wyw-i - 这就是我想出这个主意的原因 :) - zapl

ImageSpan 对我来说非常好用。实际上，我想要一个看起来像普通按钮（没有蓝色条）的 ToggleButton，并且具有不同的开/关图片，因此我在按钮点击时使用基于 isChecked() 的新图像刷新 ImageSpan。 - Josh

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

- Melbourne Lopes

---

我猜那是容易的事情。它起作用了，谢谢！ - Daniel

简洁明了！这个回答应该有更多的赞！ - Swayam

有人知道如何调整它的垂直位置，而不使用 margin/padding 上的负数吗？ - Ken Ratanachai S.

我按照这个答案的原样操作，但是出现了这个错误：链接。原始的切换按钮仍然显示在背景上方。 - Birrel

确实是最干净、最易于理解和重复使用的。 - Ajit

我之前在使用ImageView小部件时，无法显示图像。花了一些时间才意识到ToggleButton的drawable属性是“android:Background”，而不是“android:SRC”。 - Yahel

Answer 4

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

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

- akshaydashrath