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

Posted 2023-02-16

【中文标题】Android：创建一个带有图像且没有文本的切换按钮

【英文标题】：Android: Create a toggle button with image and no text

【发布时间】：2013-09-07 00:58:28

【问题描述】：

是否可以在 android 中创建一个有图像但没有文本的切换按钮？ 理想情况下应该是这样的：

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

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

任何想法我会怎么做？

如果无法做到这一点，有没有办法让我可以打开和关闭普通按钮？

【问题讨论】：

除了将整个 2 状态背景图像替换为您想要的图像之外，AFAIK 没有简单的方法可以用图像替换文本。您可以尝试通过ImageSpan 将文本设置为图像，例如***.com/questions/7616437/imagespan-in-a-widget

【参考方案1】：

我可以用图片替换切换文本吗

不，我们不能，尽管我们可以通过覆盖切换按钮的默认样式来隐藏文本，但这仍然不会为我们提供您想要的切换按钮，因为我们无法用图像替换文本。

如何制作普通的切换按钮

在您的 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/folder 中创建一个 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_
        android:layout_
        android:layout_gravity="right"
        style="@style/toggleButton"
        android:background="@drawable/ic_toggle_bg"/>

【讨论】：

非常感谢。有没有什么地方可以找到用于 Holo Light Toggle Buttons 的 @drawable/ic_slide_switch_on 和 off 图像？

它们在sdk\platforms\android-17\data\res\drawable-hdpi btn_toggle 文件中，你也可以看到这个android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

非常感谢！如果我能多次投票给你，我会:)

***.com/a/11499595/4896468这个只设background，好像更简单

我必须将 @+android:id/toggle 替换为 this 才能使其正常工作。否则，它与我使用的解决方案完全相同。

【参考方案2】：

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

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

【参考方案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_
            android:layout_
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

注意：用于删除我在上面代码中使用的文本

textOff=""
textOn=""

【讨论】：

我想这很容易做到。成功了，谢谢！

干净简单！这个答案应该有更多的赞成票！

有谁知道如何在不使用负数的情况下调整其垂直位置？

我使用了这个答案，正如它所呈现的那样，并得到this 错误。原始切换仍然显示在背景之上。

确实是最干净、最容易理解和重用的。

【参考方案4】：

ToggleButton 继承自 TextView，因此您可以将可绘制对象设置为在文本的 4 个边框处显示。您可以使用它在文本顶部显示您想要的图标并隐藏实际文本

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_
    android:layout_
    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_
    android:layout_
    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);

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

【讨论】：

好主意，我从未在切换按钮上看到可绘制选项

@clairharrison 如果你有一个TextView 和一个ImageView，你经常会得到这个：***.com/questions/8318765/… - 这就是我想出这个想法的原因:)

ImageSpan 非常适合我。我实际上想要一个ToggleButton，它看起来像一个普通的Button（没有蓝色条），具有不同的开/关图像，所以我在按钮单击时刷新ImageSpan，并使用基于isChecked() 的新图像。