为啥切换按钮周围有奇怪的填充/边距?
Posted
技术标签:
【中文标题】为啥切换按钮周围有奇怪的填充/边距?【英文标题】:Why is there is strange padding/margin around toggle button?为什么切换按钮周围有奇怪的填充/边距? 【发布时间】:2019-01-16 01:12:23 【问题描述】:这是一个奇怪的切换按钮。正如您在图片中看到的那样,我没有设置任何边距/填充,但它只是在切换按钮周围有一个小的 2dp 边距/填充。我想把它与上面的按钮组对齐,我该怎么做?
<LinearLayout
android:layout_
android:layout_
android:layout_gravity="top|end"
android:layout_margin="20dp"
android:clipToPadding="false"
android:orientation="vertical">
<co.ceryle.segmentedbutton.SegmentedButtonGroup
android:id="@+id/dynamic_drawable_group"
android:layout_
android:layout_
android:elevation="2dp"
app:sbg_animateSelector="fastOutSlowIn"
app:sbg_animateSelectorDuration="400"
app:sbg_backgroundColor="@color/white"
app:sbg_position="0"
app:sbg_radius="2dp"
app:sbg_rippleColor="#42bfcc"
app:sbg_selectorColor="#42bfcc">
<co.ceryle.segmentedbutton.SegmentedButton
android:id="@+id/left_button"
android:layout_
android:layout_
android:layout_weight="1"
app:sb_drawableGravity="right"
app:sb_drawablePadding="0dp"
app:sb_drawableTint="@color/white"
app:sb_drawableTint_onSelection="@color/black"
app:sb_text="Normal"
app:sb_textColor="#42bfcc"
app:sb_textColor_onSelection="@color/white"
app:sb_textGravity="center"
app:sb_textSize="17sp" />
<co.ceryle.segmentedbutton.SegmentedButton
android:id="@+id/right_button"
android:layout_
android:layout_
android:layout_weight="1"
app:sb_drawableGravity="right"
app:sb_drawableTint="@color/white"
app:sb_drawableTint_onSelection="@color/black"
app:sb_text="Satellite"
app:sb_textColor="#42bfcc"
app:sb_textColor_onSelection="@color/white"
app:sb_textSize="17sp" />
</co.ceryle.segmentedbutton.SegmentedButtonGroup>
<ToggleButton
android:id="@+id/btn_streetview"
android:layout_
android:layout_
android:layout_gravity="center"
android:minEms="0"
android:minHeight="0dp"
android:minLines="0"
android:minWidth="0dp"
android:textOff="StreetView Off"
android:textOn="StreetView On"
android:textSize="17sp"
android:theme="@style/toggle"
android:visibility="visible" />
</LinearLayout>
在代码中我没有添加任何边距或填充。不知道为什么会这样。
【问题讨论】:
上传您的 XML 代码 @grrigore 是的,我现在附上了我的代码。 @pskink 使用背景可绘制对象会完全改变切换按钮的外观,我想保留切换按钮的外观。 好的,您为什么要更改设备设计师设置的“自然”填充?在这种情况下,与其他应用相比,您的应用看起来会很奇怪 @MarkLiang 这是因为背景图像具有“填充”(内容周围的空白区域) - 如果您进行测试添加android:background="#f00"
,您将看到真正的ToggleButton
边界
【参考方案1】:
这是 ToggleButton 的默认填充。但是,我设法通过添加android:background="@null"
或android:background="@android:color/transparent"
来获得此布局。
这是代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:layout_gravity="top|end"
android:layout_margin="20dp"
android:clipToPadding="false"
android:orientation="vertical">
<co.ceryle.segmentedbutton.SegmentedButtonGroup
android:id="@+id/dynamic_drawable_group"
android:layout_
android:layout_
android:elevation="2dp"
app:sbg_animateSelector="fastOutSlowIn"
app:sbg_animateSelectorDuration="400"
app:sbg_backgroundColor="@color/white"
app:sbg_position="0"
app:sbg_radius="2dp"
app:sbg_rippleColor="#42bfcc"
app:sbg_selectorColor="#42bfcc">
<co.ceryle.segmentedbutton.SegmentedButton
android:id="@+id/left_button"
android:layout_
android:layout_
android:layout_weight="1"
app:sb_drawableGravity="right"
app:sb_drawablePadding="0dp"
app:sb_drawableTint="@color/white"
app:sb_drawableTint_onSelection="@color/black"
app:sb_text="Normal"
app:sb_textColor="#42bfcc"
app:sb_textColor_onSelection="@color/white"
app:sb_textGravity="center"
app:sb_textSize="17sp" />
<co.ceryle.segmentedbutton.SegmentedButton
android:id="@+id/right_button"
android:layout_
android:layout_
android:layout_weight="1"
app:sb_drawableGravity="right"
app:sb_drawableTint="@color/white"
app:sb_drawableTint_onSelection="@color/black"
app:sb_text="Satellite"
app:sb_textColor="#42bfcc"
app:sb_textColor_onSelection="@color/white"
app:sb_textSize="17sp" />
</co.ceryle.segmentedbutton.SegmentedButtonGroup>
<ToggleButton
android:id="@+id/btn_streetview"
android:layout_
android:layout_
android:layout_gravity="center"
android:background="@null"
android:textOff="StreetView Off"
android:textOn="StreetView On"
android:textSize="17sp"
android:theme="@style/toggle"
android:visibility="visible" />
</LinearLayout>
我认为对代码的这些更改可能会改变您的 ToggleButton 的行为。更多信息请查看this 答案。
LE:按照本教程here 创建自定义切换按钮。
【讨论】:
是的,但是将背景设置为 null 会消除切换按钮的原始外观(底部带有细指示器的按钮)。不过谢谢,我将切换按钮设置为更长的硬编码宽度,以使其看起来对齐... @MarkLiang 看看答案中的教程。我想你也可以自定义。 正是我想要的!谢谢!【参考方案2】:这很奇怪,但是如果您在各种设备和 android api 中看到这一点,那么唯一的解决方案(尽管是最后一个解决方案)是设置负边距:
android:layout_marginStart="-2dp"
android:layout_marginEnd="-2dp"
android:layout_marginTop="-2dp"
android:layout_marginBottom="-2dp"
【讨论】:
但我不确定所有设备的偏移量是否为 2dp...如果某些设备的偏移量为 4dp 怎么办? [更新:] 我尝试设置负边距,奇怪的边距/填充仍然存在 这就是为什么您必须在许多设备和 api 中测试它的原因。这种行为并不少见。该晶圆厂在较旧的 android 版本中也存在类似的问题。以上是关于为啥切换按钮周围有奇怪的填充/边距?的主要内容,如果未能解决你的问题,请参考以下文章