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

时间:2013-09-03 17:34:47

标签: android customization togglebutton

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

Toggle Button With Image

我看过类似的帖子,答案是改变背景,但我想保留Holo Light布局,只需用文字交换文字。

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

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

如果不能这样做,有没有办法可以打开和关闭普通按钮?

4 个答案:

答案 0 :(得分:103)

  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&amp; @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 :(得分:61)

ToggleButton继承自TextView,因此您可以将drawable设置为在文本的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相比的结果类似于

enter image description here

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

中间图标的结果略低,因为它取代了文本。

enter image description here

答案 2 :(得分:50)

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

答案 3 :(得分:11)

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

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