Android 如何更改 Switch Widget 的大小

How to change the size of a Switch Widget

提问by Janusz

In Ice Cream Sandwich a SwitchWidget was introduced that displays an On Off Slider.

在 Ice Cream Sandwich 中，引入了一个SwitchWidget，可以显示一个 On Off Slider。

I added the Switch like this:

我像这样添加了 Switch：

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

The track and thumb drawables are nine patch images that should scale to all possible sizes. I hoped that the Switch would scale to the maximum size inside the given bounds, but it seems as if the drawables are just centered inside the supplied space.

轨道和拇指可绘制对象是九个补丁图像，应缩放到所有可能的大小。我希望 Switch 能够在给定范围内缩放到最大尺寸，但似乎可绘制对象只是在提供的空间内居中。

Is it possible to increase the size of the Switch to make it appear bigger?

是否可以增加 Switch 的大小以使其看起来更大？

回答by Quantium

I think I finally figured this out:

我想我终于明白了这一点：

1. Switch caption size is controlled by <switch android:textSize=""... />
2. Switch thumb text size is controlled by <switch android:switchTextAppearance="".../>. Cook up a style of your own. This style is important because it controls the overall width of the thumb (more on this later).
3. Overall switch height is controlled by <switch android:track="@drawable/shape_mythumb".../>. You used a nine patch, which I suspect is why you are having a problem. I used a <shape android:shape="rectangle"...></shape>and was successful.
4. The height of the thumb drawable <switch android:thumb="".../>is adjusted to match the height of the track. The height of the thumb's drawable is only important to the shape of the thumb. It does not effect the height of the switch.

1. 切换字幕大小由控制 <switch android:textSize=""... />
2. 切换拇指文字大小由 控制<switch android:switchTextAppearance="".../>。打造属于自己的风格。这种样式很重要，因为它控制拇指的整体宽度（稍后会详细介绍）。
3. 总开关高度由 控制。您使用了九个补丁，我怀疑这就是您遇到问题的原因。我用了一个，成功了。<switch android:track="@drawable/shape_mythumb".../><shape android:shape="rectangle"...></shape>
4. <switch android:thumb="".../>调整拇指可绘制的高度以匹配轨道的高度。拇指可绘制对象的高度仅对拇指的形状很重要。它不会影响开关的高度。

So here's what I found:

所以这是我发现的：

1. Use <shape>...</shape>drawables for both the switch thumb and switch track.
2. The width of both drawables is irrelavant. I set mine to "0dp"
3. The track's height determines the switch's overall height.
4. The longest string of android:textOffor android:textOnwill determine the width of the thumb. This determines the width of the entire switch. Switch width is always twice the width of the thumb.
5. If the thumb text width is less that the height of the track, the thumb shape will be scaled down. This can distort the shape of the thumb. If this happens, add spaces to increase the width of your "off" or "on" text until it is at least as wide as your track is tall.

1. <shape>...</shape>对开关拇指和开关轨道使用可绘制对象。
2. 两个可绘制对象的宽度无关紧要。我将我的设置为“0dp”
3. 轨道的高度决定了开关的整体高度。
4. 最长的字符串android:textOfforandroid:textOn将决定拇指的宽度。这决定了整个开关的宽度。开关宽度始终是拇指宽度的两倍。
5. 如果拇指文本宽度小于轨道的高度，拇指形状将被缩小。这会扭曲拇指的形状。如果发生这种情况，请添加空格以增加“关闭”或“开启”文本的宽度，直到它至少与您的轨道高度一样宽。

This is enough information to at least start designing switches to the size and shape that you want them. Let me know if you figure out anything else.

这是足够的信息，至少可以开始设计您想要的大小和形状的开关。如果你想出其他任何事情，请告诉我。

回答by Gaurav

Using scale property to change size worked for me.

使用 scale 属性更改大小对我有用。

Add these lines to your <switch/>tag in xml file.

将这些行添加到<switch/>xml 文件中的标记中。

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

You can change scale value as per your need. Here value 2 makes it double in size, similarly value 0.5 makes it half in size.

您可以根据需要更改比例值。这里的值 2 使它的大小加倍，类似的值 0.5 使它的大小减半。

Example:

例子：

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

回答by Asthme

The above Answer is right. here is a small example how to change your switch width using shape drawable I hope it will help some one..

上面的答案是正确的。这是一个如何使用 shape drawable 更改开关宽度的小示例，希望它对某些人有所帮助。

1) Use ur color for thumb (color_thumb.xml)

1) 使用您的拇指颜色 (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 color for track (gray_track.xml)

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) Selector for thumb (thumb.xml)

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) Selector for track (track.xml)

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>

and finally in switch

最后在开关

use

用

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

回答by Thomas Keller

I dealt with a similar issue today and I found out that starting from Jelly Bean you can use setSwitchMinWidth(width);to set the minimum width of the complete switch. I also figured however that if your texts are too big, the widget is just cut off on the left part. Changing the default text padding on the thumb might come in handy here, with setThumbTextPadding(num);you can modify that.

我今天处理了一个类似的问题，我发现从 Jelly Bean 开始，你可以setSwitchMinWidth(width);用来设置完整开关的最小宽度。但是，我还认为，如果您的文本太大，则小部件会在左侧部分被切断。更改拇指上的默认文本填充在这里可能会派上用场， setThumbTextPadding(num);您可以修改它。

The only problem - and this is a blocker actually - I've stumbled so far is that one should of course expand the switch according to the size of the parent container. For that I wrapped the switch in a custom linear layout (which also provides a fallback for API <= 15) and tried this:

唯一的问题 - 这实际上是一个阻止程序 - 到目前为止我偶然发现的是，当然应该根据父容器的大小扩展开关。为此，我将开关包装在自定义线性布局中（它还为 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);
}

Unfortunately - for whatever stupid reason - the switch widget doesn't react on that. I tried to do that in an OnLayoutChangeListenerwithout having success either. Ideally, the current size of the switch should also be known at that state and I wanted to "distribute" the free space to the padding like this:

不幸的是 - 无论出于何种愚蠢的原因 - 开关小部件都没有对此做出反应。我试图做到这一点，OnLayoutChangeListener但也没有成功。理想情况下，在该状态下也应该知道开关的当前大小，我想像这样将可用空间“分配”到填充：

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

but sw.getWidth()still returns 0 in onSizeChanged(), probably because it is still not layed out properly. Yeah, we're almost there... if you stumble across something, let me know :)

但sw.getWidth()仍然返回 0 in onSizeChanged()，可能是因为它仍然没有正确布局。是的，我们快到了……如果你偶然发现了什么，请告诉我 :)

回答by stevenp

The track's height doesn't have to visually determine the thumb/switch overall height. I added a transparent stroke to my track drawable shape which results in a padding around the track:

轨道的高度不必在视觉上确定拇指/开关的整体高度。我为我的轨道可绘制形状添加了一个透明的笔触，这会导致轨道周围的填充：

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