【问题标题】:customize toggle button on Android在 Android 上自定义切换按钮
【发布时间】:2012-10-04 11:29:41
【问题描述】:

我使用选择器定义的可绘制对象自定义了切换按钮。我使用这个可绘制对象作为切换按钮的背景。

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

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

我需要的是一个可以拉伸的背景,并且在按钮的中心有一个不能拉伸的图标。

有可能吗?

【问题讨论】:

  • 显示ToggleButton的截图和相关代码
  • 你必须使用九个补丁(.9补丁)图像。
  • 9 个补丁不可用,因为我需要非拉伸图标位于中心
  • 移除 android:layout_weight="1"
  • 我需要定义权重,因为我需要拉伸背景

标签: android togglebutton


【解决方案1】:

这是我的最终解决方案。

在布局中:

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

【讨论】:

  • toggle_drawable_bkg 是什么?什么时候来?
  • 您的解决方案有效。但是我发现如果使用android:background="@null"android:button="@drawable/toggle_drawable_left"可以跳过第三个xml文件toggle_drawable_layers.xml的使用。图片不会被拉伸。
【解决方案2】:

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

        <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 是不会被小部件拉伸的图标

【讨论】:

  • 答案中隐含地给出了解决方案。获得非拉伸图像的方法是使用位图而不是可绘制对象。我不得不修改提议的解决方案,以允许为不同的状态使用两个不同的图像:我在图层列表中使用了一个可绘制对象,然后我使用一个选择器定义了可绘制对象,每个状态都使用一个位图
  • 这是不正确的 - 如果您希望 ToggleButton 以标准状态运行。假设您的 waiting_status_btn 是 XML drawable:您不能将 XML drawable 作为位图的 src。如此处所述:stackoverflow.com/questions/9788726/using-drawable-resources
【解决方案3】:

像这样在选择器中使用位图而不是可绘制对象(无需使用图层):

<?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>

另外,别忘了声明 机器人:文本关闭=“” 安卓:textOn="" 在您的 ToggleButton 声明中

【讨论】:

    【解决方案4】:

    Thisthis 一定会帮到你

    【讨论】:

    • 它不起作用。即使我分别定义了背景和切换图像,它们也会被拉伸。
    • 减轻重量,mi8 有帮助
    • 我需要背景的重量
    • 将按钮放入线性布局中,为布局赋予权重,而不是按钮;
    • 我给你一个 +1 是因为我在建议的链接中使用了一些东西,但请阅读我在 Dimanoid 回答中的评论
    【解决方案5】:

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

    只需将图像转换为Nine-Patch image,其中可拉伸区域正好位于图像的所有侧面。

    那么Android会只在不可见区域拉伸图片,保持可见图片不变。

    【讨论】:

      猜你喜欢
      • 2013-08-22
      • 1970-01-01
      • 2014-06-03
      • 1970-01-01
      • 1970-01-01
      • 2014-06-15
      • 2018-08-05
      • 2011-03-31
      • 2015-03-31
      相关资源
      最近更新 更多