为什么切换按钮周围有奇怪的填充/边距？答案

【问题标题】：Why is there is strange padding/margin around toggle button?为什么切换按钮周围有奇怪的填充/边距？
【发布时间】：2019-01-16 01:12:23
【问题描述】：

这是一个奇怪的切换按钮。正如您在图片中看到的那样，我没有设置任何边距/填充，但它只是在切换按钮周围有一个小的 2dp 边距/填充。我想把它与上面的按钮组对齐，我该怎么做？

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            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_width="150dp"
                android:layout_height="30dp"
                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_width="75dp"
                    android:layout_height="30dp"
                    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_width="75dp"
                    android:layout_height="30dp"
                    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_width="wrap_content"
                android:layout_height="wrap_content"
                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 边界

标签： android layout togglebutton android-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_width="wrap_content"
    android:layout_height="wrap_content"
    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_width="150dp"
        android:layout_height="30dp"
        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_width="75dp"
            android:layout_height="30dp"
            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_width="75dp"
            android:layout_height="30dp"
            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_width="150dp"
        android:layout_height="wrap_content"
        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 版本中也存在类似的问题。