在Android上自定义切换按钮

时间:2012-10-04 11:29:41

标签: android togglebutton

我使用使用选择器定义的drawable自定义了Toggle按钮。我使用这个drawable作为Toggle按钮的背景。

<ToggleButton
    android:id="@+id/mailbox:toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_weight="1"
    android:background="@drawable/toggle_background"
    android:gravity="center_horizontal|center_vertical" />

这里定义了toggle_background:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/img1"
            android:state_checked="true" />
        <item
            android:drawable="@drawable/img2"
            android:state_checked="false" />    
    </selector>

问题是图像总是被拉伸。有没有办法为两个未拉伸的状态定义图像?

我需要的是一个将被拉伸的背景,并且在按钮的中央是一个不能拉伸的图标。

有可能吗?

5 个答案:

答案 0 :(得分:13)

这是我的最终解决方案。

在布局中:

<ToggleButton
    android:id="@+id/mailbox:toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"     
    android:background="@drawable/toggle_drawable_layers"/>
在toggle_drawable_layers.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/toggle_drawable_bkg"></item>
    <item android:left="10dp" android:drawable="@drawable/toggle_drawable_left"
          android:gravity="center_vertical|center_horizontal" />
</layer-list>
在toggle_drawable_left.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <bitmap android:src="@drawable/bitmap_checked"
          android:gravity="center_vertical|center_horizontal" />
    </item>
    <item android:state_checked="false">
        <bitmap android:src="@drawable/bitmap_unchecked"
          android:gravity="center_vertical|center_horizontal" />
    </item>        
</selector>

答案 1 :(得分:5)

我用这种方式完成了同样的任务,按钮:

        <ToggleButton  android:id="@+id/mlAbout"
            android:textOn="@string/about"
            android:textOff="@string/about"
            android:background="@drawable/ml_about" />

@ drawable / ml_about:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/list_bg_top"></item>
    <item android:left="10dp">
        <bitmap android:src="@drawable/waiting_status_btn"
          android:gravity="center_vertical|left" />
    </item>
</layer-list>

@ drawable / list_bg_top将被拉伸的背景图片和@ drawable / waiting_status_btn是不会被小部件拉伸的图标

答案 2 :(得分:2)

只需在选择器中使用位图而不是drawable,就像这样(不需要使用图层):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/img1"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/img2"
        android:state_checked="false" />    
</selector>

另外,别忘了申报         机器人:textOff = “”         机器人:纹元=“” 在你的ToggleButton声明中

答案 3 :(得分:1)

Thisthis肯定会帮助您

答案 4 :(得分:0)

还有另一种方法可以解决拉伸问题:

只需将图像转换为Nine-Patch image,其中可伸展区域位于图像的所有边上。

然后Android将仅在不可见区域拉伸图像,并保持可见图像不变。