如何更改Switch小部件的大小

73

在冰淇淋三明治版本中,引入了一个开关小部件,显示开关滑块。

我像这样添加了开关:

<Switch 
    android:layout_width="fill_parent"
    android:layout_height="48dp"
    android:textStyle="bold"
    android:thumb="@drawable/switch_thumb_selector"
    android:track="@drawable/switch_bg_selector" />

轨道和拇指的可绘制资源是点九图,应该可以缩放到所有可能的大小。

我希望开关能够在给定的边界内按最大尺寸缩放,但似乎可绘制资源只是居中于提供的空间内。

是否可以增加开关的大小以使其看起来更大?


2
我也遇到了同样的问题 :( - Rat-a-tat-a-tat Ratatouille
你可以在这里找到一个好的答案:https://dev59.com/-GQn5IYBdhLWcg3wvpQV?noredirect=1&lq=1 - billa-code
2
非常遗憾,这么小的改变需要如此多的努力... 截至2019年4月,以上方法都没有完全适用于我。希望我能为您节省一些时间... - Antonin GAVREL
无法正确设置小于2倍缩略图的宽度~ - Zhming
https://dev59.com/WWIi5IYBdhLWcg3w_AfV#54420782 - Zhming
显示剩余2条评论
7个回答

119

使用scale属性来改变大小对我起作用了。

将以下行添加到您的XML文件中的<switch/>标签中。

android:scaleX="2"
android:scaleY="2"

您可以根据需要更改比例值。其中,值为2表示将其大小加倍,同样地,值为0.5表示将其减半。

示例:

       <Switch
            android:id="@+id/switchOnOff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleX="2"
            android:scaleY="2"/>

14
注意,父布局可能无法正确地包裹内容,开关小部件可能会被父布局的边界截断。 - marcos E.
3
这个回答很有希望但不完整。正如@marcos E.所说,开关的布局没有正确更新。如果使用文本,它也会被缩放并被截断。 - AlanKley
3
这也使得开关变得模糊。 - oziomajnr

110

我终于想明白了:

  1. 切换按钮的文本大小由<switch android:textSize=""... />控制。
  2. 切换按钮的滑块文本大小由<switch android:switchTextAppearance="".../>控制。创建自己的风格很重要,因为它控制滑块的整体宽度(稍后会详细讲解)。
  3. 整个切换按钮的高度由<switch android:track="@drawable/shape_mythumb".../>控制。您使用的是NinePatch图像,这可能是导致问题的原因。我使用了<shape android:shape="rectangle"...></shape>并取得了成功。
  4. 拇指Drawable的高度<switch android:thumb="".../>被调整为与轨迹的高度相匹配。拇指的Drawable的高度仅对拇指的形状很重要。它不会影响切换按钮的高度。

所以这就是我找到的:

  1. 使用<shape>...</shape>来绘制切换按钮的拇指和轨迹。
  2. 两个Drawable的宽度都不重要。我将它们的宽度设置为“0dp”。
  3. 轨迹的高度决定了切换按钮的整体高度。
  4. android:textOffandroid:textOn中最长的字符串将决定拇指的宽度。这决定了整个切换按钮的宽度。切换按钮的宽度始终是拇指宽度的两倍。
  5. 如果拇指文本宽度小于轨迹的高度,则会缩小拇指形状。这可能会扭曲拇指的形状。如果发生这种情况,请添加空格以增加您的“关闭”或“打开”文本的宽度,直到其至少与您的轨迹高度相同。

这足以开始设计符合您要求的大小和形状的切换按钮。如果您找到其他信息,请告诉我。


2
值得点赞。轨道是决定开关大小的关键因素。而形状技巧则非常有效。我曾经通过为不同设备创建不同高度的九宫格图案来艰辛地试探,最终找到了这个解决方案。感谢您的帮助。 - Rat-a-tat-a-tat Ratatouille
@quantium,你有特别的例子吗?因为我也遇到了同样的问题,但是你的解决方案对我不起作用。我想我可能做错了什么。 - user2940365
1
当我使用这段代码并将xml应用于我的thumb和track属性时,开关消失了。有人可以帮忙吗? - Brandon
@David,这不仅仅是关于代码的问题,解释解决方案同样重要,有时候光靠代码是不够的。 - Eman
现在我该如何使用自定义图像来配置滑块和轨道,比如我正在创建一个真实的开关? - Maseed

52
上面的回答是正确的。以下是一个小例子,展示如何使用形状drawable来改变开关的宽度。 我希望能对某些人有所帮助。
1)使用你的颜色作为thumb(color_thumb.xml)。
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="40dp"  />
    <gradient android:height="40dp" android:startColor="#FF569BDA" android:endColor="#FF569BDA"/>
</shape>

2) 赛道的灰色颜色(gray_track.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="40dp"  />
    <gradient android:height="40dp" android:startColor="#dadadada" android:endColor="#dadadada"/>
</shape>

3) 拇指选择器(thumb.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/gray_track" />
    <item android:state_pressed="true"  android:drawable="@drawable/color_thumb" />
    <item android:state_checked="true"  android:drawable="@drawable/color_thumb" />
    <item                               android:drawable="@drawable/gray_track" />
</selector>

4) 轨迹选择器 (track.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:drawable="@drawable/color_thumb" />
     <item                               android:drawable="@drawable/gray_track" />
</selector>

最后在 switch 中

使用

android:switchMinWidth="56dp"
android:thumb="@drawable/thumb"
android:track="@drawable/track"

我想知道我们在哪里创建track.xml或thumb.xml文件。 - Kishan
15
当我使用这个代码时,开关消失了...有什么帮助吗? - Brandon
@Kishan,你可以将这些XML文件放置在res/drawable/目录下。 - Andrey Suvorov
@Brandon 当它消失时,你必须添加 android:switchMinWidth="56dp" 属性,在这样设置之后它就可以工作了。 - Hanuman
3
这种方法对我也不起作用,我一放进去开关就消失了。我甚至加了android:switchMinWidth - Jayce
1
如果您的开关消失了,请尝试在color_thumb和gray_track的size元素中添加android:width。 - Jeff Burka

11

我今天遇到了一个类似的问题,后来发现从Jelly Bean开始,您可以使用setSwitchMinWidth(width)来设置完整开关的最小宽度。但是,如果您的文本太大,小部件会被切掉左侧部分。在这种情况下,修改拇指的默认文本填充可能会有所帮助,使用setThumbTextPadding(num)可进行修改。

唯一的问题 - 实际上这是一个障碍 - 到目前为止我遇到的是,当然应该根据父容器的大小扩展开关。 为此,我将开关包装在一个自定义线性布局中(也为API <= 15提供回退),并尝试了以下内容:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    if (android.os.Build.VERSION.SDK_INT >= 16) {
        adaptSwitchWidth(w);
    }
}

@TargetApi(16)
private void adaptSwitchWidth(int containerWidth) {
    Switch sw = (Switch) compoundButton;
    sw.setSwitchMinWidth(containerWidth);
}

不幸的是,出于某种愚蠢的原因,切换小部件对此没有反应。我尝试在OnLayoutChangeListener中实现这一点,但也没有成功。理想情况下,在该状态下还应该知道开关的当前大小,并希望像这样将空闲空间分配给填充:

int textPadding = Math.max(0, (sw.getWidth() - containerWidth) / 4);
sw.setThumbTextPadding(textPadding);

但是在onSizeChanged()中,sw.getWidth()仍然返回0,可能是因为它还没有被正确地布局。是的,我们已经接近成功了......如果你遇到了什么问题,请告诉我 :)


2
"thumbTextPadding" 很有用。可以在 XML 中使用,例如:android:thumbTextPadding="3dp" - situee
属性android:thumbTextPadding在自定义Switch时对三星设备非常有用。 - Arun Badole

9
轨道的高度并不需要在视觉上决定拇指/开关的整体高度。我为我的轨道可绘制形状添加了一个透明描边,这样会在轨道周围产生一些内边距:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@color/track_color"/>
    <size android:height="@dimen/track_height"  />
    <size android:width="@dimen/track_width"  />

    <!-- results in the track looking smaller than the thumb -->
    <stroke
        android:width="6dp"
        android:color="#00ffffff"/>
</shape>

您可以为轨道可绘制对象添加填充,使其完全像iOS的切换按钮。 - Sourav Chandra

3

还可以使用app:switchMinWidth选项提供最小宽度:

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/nav_header_available_switch"
        style="@style/Widget.AppCompat.CompoundButton.Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:switchMinWidth="80dp"
        android:scaleY="1.3"
        tools:checked="true" />

1

使用SwitchCompat代替Switch并且scaleX、scaleY、padding效果更佳。

<androidx.appcompat.widget.SwitchCompat
                android:id="@+id/switch_transport"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:scaleX="1.5"
                android:scaleY="1.5"/>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接