开关按钮大拇指被扭曲？ [英] Switch-Button thumb gets skewed?
本文介绍了开关按钮大拇指被扭曲？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的开关按钮大拇指似乎变得歪斜（关于＆安培;关闭状态）。有在github上类似的问题，但这些都是为人们制作库，以支持API 4.0切换按钮 -
主要包含开关按钮，有施加到其拇指和轨道可绘制
这是正在发生的事情：
这是它如何猜想loook：
switch_track_on.png
的main.xml
＆LT;的RelativeLayout的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =match_parent
机器人：layout_height =match_parent＆GT;＆LT;开关
机器人：ID =@ + ID /交换机1
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_alignParentTop =真
机器人：layout_centerHorizontal =真
机器人：layout_marginTop =112dp
机器人：拇指=@绘制/ switch_thumb_selector
机器人：轨道=@绘制/ switch_track_selector
机器人：纹元=
机器人：textOff =/＆GT;＆LT; / RelativeLayout的＆GT;
switch_thumb_selector.xml
＆LT;选择＆GT;
＆LT;项目机器人：可绘制=@绘制/ switch_thumb＆GT;
＆LT; /项目＆GT;
＆LT; /选择＆GT;
switch_track_selector.xml
＆LT;选择＆GT;
＆LT;项目机器人：可绘制=@绘制/ switch_track_on机器人：state_checked =真/＆GT;
＆LT;项目机器人：可绘制=@绘制/ switch_track_off机器人：state_checked =FALSE/＆GT;
＆LT; /选择＆GT;
解决方案
我有同样的要求。我检查Android code和发现，
- 开关忽略应用到拇指形状可拉伸（因此拇指总是触摸的轨道的顶部和底部） 任何垂直边距/填充
- 大拇指的宽度，采取水平补白+的开启和关闭文本的最大宽度计算。
这让真的很难作出一个圆的拇指。
但如果指定拇指绘制一个图层绘制的唯一理由能够为绘的单层指定填充，就可以得到预期的效果。
拇指选择：
＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;选择的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
＆LT;项目＆GT;
＆LT;！ -
注意
我们希望与周围填充在赛道里面了大拇指。
可悲的是，交换机绘制它的轨道，用大拇指同样的高度忽视
提拉的任何填充，所以使用形状与填充不起作用。
为了克服，我们采用了一招。我们创建图层列表，因为
LayerListDrawable绘制本身走的是顶部，左侧，右侧和底部
值考虑在内。
- ＆GT;
＆LT;层列表＆gt;
＆LT;项目
机器人：顶部=@扪/ switch_thumb_padding
机器人：左=@扪/ switch_thumb_padding
机器人：右=@扪/ switch_thumb_padding
机器人：底部=@扪/ switch_thumb_padding＆GT;
＆LT;！ -
注意
无需指定大小，因为：
- 拇指填补了高度的轨道。
- 拇指宽度从拇指的最大决定（开，关）文本+
文字填充+绘制填充。
- ＆GT;
＆LT;形状机器人：形状=椭圆形＆GT;
[固体机器人：色=@色/ switch_thumb/＆GT;
＆LT;！ - 注意没有工作，只好交换机的thumbTextPadding设置半径 - ＆GT;
＆LT;！ -
＆LT;填充机器人：右=@扪/ switch_thumb_radius
机器人：左=@扪/ switch_thumb_radius/＆GT;
- ＆GT;
＆LT; /形状＆GT;
＆LT; /项目＆GT;
＆LT; /层列表＆gt;
＆LT; /项目＆GT;
＆LT; /选择＆GT;
我设置了打开和关闭的文本空（实际上为，以prevent警告有关空资源）。
曲目：
＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;选择的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
＆LT;项目的android：state_enabled =假＆GT;
＆LT;形状机器人：形状=矩形＆GT;
＆LT;大小机器人：身高=@扪/ switch_track_height/＆GT;
＆LT;角落的android：半径=@扪/ switch_thumb_radius/＆GT;
[固体机器人：色=@色/ switch_track_off/＆GT;
＆LT; /形状＆GT;
＆LT; /项目＆GT;
＆LT;项目的android：state_checked =真正的＆GT;
＆LT;形状机器人：形状=矩形＆GT;
＆LT;大小机器人：身高=@扪/ switch_track_height/＆GT;
＆LT;角落的android：半径=@扪/ switch_thumb_radius/＆GT;
[固体机器人：色=@色/ switch_track_on/＆GT;
＆LT; /形状＆GT;
＆LT; /项目＆GT;
＆LT; /选择＆GT;
切换方式：
＆LT;样式名称=CustomSwitch＆GT;
＆LT;！ - 请注意，此方式需要最低限度的开关会随着宽度 - ＆GT;
＆LT;项目名称=机器人：switchMinWidth＆GT; 0dp＆LT; /项目＆GT;
＆LT;项目名称=机器人：跟踪＆GT; @绘制/ switch_track＆LT; /项目＆GT;
＆LT;项目名称=机器人：拇指＆GT; @绘制/ switch_thumb＆LT; /项目＆GT;
＆LT;项目名称=机器人：textOff＆GT; @字符串/ switch_thumb_off＆LT; /项目＆GT;
＆LT;项目名称=机器人：纹元＆GT; @字符串/ switch_thumb_on＆LT; /项目＆GT;
＆LT;！ - 请注意，如果设置为0dp，拇指是不可见的，即使填充
拇指绘制设置为 - ＆GT;
＆LT;项目名称=机器人：thumbTextPadding＆GT; @扪/ switch_thumb_radius＆LT; /项目＆GT; - ＆GT;
！＆LT; - ＆LT;项目名称=机器人：thumbTextPadding＆GT; 0dp＆LT; /项目＆GT; - ＆GT;
＆LT; /风格＆GT;
最后，梦诗：
＆LT;扪NAME =switch_track_height＆GT; 30dp＆LT; /扪＆GT;
＆LT;扪NAME =switch_thumb_radius＆GT; 15dp＆LT; /扪＆GT;
＆LT;扪NAME =switch_thumb_padding＆GT; 2DP＆LT; /扪＆GT;
所以，唯一的'棘手'的事情是保持高度=半径* 2。
The thumb for my Switch-button seems to get skewed(for on&off state). There were similar problems on github, but those were for people making libraries to support Switch button in API 4.0-
main contains the switch-button, and there is a thumb and track drawable applied to it
This is what is happening:
This is how its suppose to loook:
switch_track_on.png
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Switch
android:id="@+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="112dp"
android:thumb="@drawable/switch_thumb_selector"
android:track="@drawable/switch_track_selector"
android:textOn=""
android:textOff=""/>
</RelativeLayout>
switch_thumb_selector.xml
<selector>
<item android:drawable="@drawable/switch_thumb">
</item>
</selector>
switch_track_selector.xml
<selector>
<item android:drawable="@drawable/switch_track_on" android:state_checked="true"/>
<item android:drawable="@drawable/switch_track_off" android:state_checked="false"/>
</selector>
解决方案
I had the same requirement. I checked Android code and found that
- switch ignores any vertical margin/padding applied to a thumb shape drawable (thus thumb always touch the top and bottom of the track)
- the width of the thumb is calculated by taking the horizontal paddings + the max width of the on and off texts.
This makes really hard to make a circle thumb.
But if you specify the thumb drawable as a layer drawable for the sole reason to be able to specify padding for the single layer of the drawable, you can get the desired effect.
Thumb selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--
NOTE
We want a thumb with padding around it inside the track.
Sadly, a switch draws its track and thumb with the same height ignoring
any padding of the drawable, so using a shape with padding does not work.
To overcome, we apply a trick. We create layer list because the
LayerListDrawable draws itself with taking the top, left, right, bottom
values into account.
-->
<layer-list>
<item
android:top="@dimen/switch_thumb_padding"
android:left="@dimen/switch_thumb_padding"
android:right="@dimen/switch_thumb_padding"
android:bottom="@dimen/switch_thumb_padding">
<!--
NOTE
No need to specify size because:
- The thumb fills the track in height.
- The thumb width is determined from thumb max(on, off) text +
text padding + drawable padding.
-->
<shape android:shape="oval">
<solid android:color="@color/switch_thumb"/>
<!-- NOTE did not work, had to set Switch's thumbTextPadding to the radius -->
<!--
<padding android:right="@dimen/switch_thumb_radius"
android:left="@dimen/switch_thumb_radius"/>
-->
</shape>
</item>
</layer-list>
</item>
</selector>
I set the on and off text of switch to empty (actually to "" to prevent warning about empty resource).
track:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<size android:height="@dimen/switch_track_height"/>
<corners android:radius="@dimen/switch_thumb_radius"/>
<solid android:color="@color/switch_track_off"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<size android:height="@dimen/switch_track_height"/>
<corners android:radius="@dimen/switch_thumb_radius"/>
<solid android:color="@color/switch_track_on"/>
</shape>
</item>
</selector>
Switch style:
<style name="CustomSwitch">
<!-- NOTE this way the switch will be as width as required minimally -->
<item name="android:switchMinWidth">0dp</item>
<item name="android:track">@drawable/switch_track</item>
<item name="android:thumb">@drawable/switch_thumb</item>
<item name="android:textOff">@string/switch_thumb_off</item>
<item name="android:textOn">@string/switch_thumb_on</item>
<!-- NOTE if set to 0dp, the thumb was not visible even with padding
of the thumb drawable set to -->
<item name="android:thumbTextPadding">@dimen/switch_thumb_radius</item>-->
<!--<item name="android:thumbTextPadding">0dp</item>-->
</style>
And finally, the dimens:
<dimen name="switch_track_height">30dp</dimen>
<dimen name="switch_thumb_radius">15dp</dimen>
<dimen name="switch_thumb_padding">2dp</dimen>
So the only 'tricky' thing is to keep height = radius * 2.
这篇关于开关按钮大拇指被扭曲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
