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


73

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

切换图像按钮

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

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

任何想法,我将如何做到这一点?

如果无法完成此操作,是否有办法让我打开和关闭普通按钮?


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

Answers:


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

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

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

    在文件夹中创建文件ic_toggleres/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>
    

    现在添加到您的自定义主题,(如果您没有,请在您的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"/>
    

1
非常感谢。我在哪里可以找到用于Holo灯光切换按钮的@ drawable / ic_slide_switch_on和off图像?
Eduardo

2
它们在sdk\platforms\android-17\data\res\drawable-hdpibtn_toggle文件中,您也可以看到此android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Rachit Mishra

1
非常感谢!如果我可以一次以上投票给你,我就会:)
Eduardo

3
stackoverflow.com/a/11499595/4896468 这个唯一的设置background,看起来更简单
yurenchen

我不得不更换@+android:id/toggle有它正常工作。否则,它与我使用的完全相同。
isakbob

64

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

这里的结果在中间-图标放置在稍下方,因为它代替了文本。

在此处输入图片说明


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

1
@clairharrison如果你有一个TextView和一个,ImageView你经常会得到这个:stackoverflow.com/questions/8318765/…-这就是我提出这个想法的方法:)
zapl 2013年

ImageSpan对我来说很棒。我实际上想要一个ToggleButton看起来像普通的Button(没有蓝色条)且带有不同的开/关图像的按钮,因此我在单击按钮时刷新了ImageSpan并使用了基于的新图像isChecked()
2014年

58

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

1
我猜这很容易做到。工作正常,谢谢!
丹尼尔(Daniel)

4
干净简单!这个答案应该有更多的支持!
Swayam

有谁知道如何在不使用边距/边距负数的情况下调整其垂直位置?
Ken Ratanachai S.

我使用了与给出的答案完全相同的答案,并得到错误。原始切换仍显示在背景顶部。
Birrel

确实最干净,最容易理解和重用。
Ajit

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.