RelativeLayout 中的意外边距仅显示在设备上

Question

我面临一个非常不寻常的情况。我已经定义了一个布局文件，其中一些图标排列在 RelativeLayout 中并垂直对齐。问题是我没有在它们之间设置任何边距，在预览屏幕和模拟器上它们按预期显示，但在设备上它们总是以一致的边距分隔。

我的问题是：为什么会出现这些边距？我怎样才能删除它们？

在这里您可以看到 emulator (API 26) and physical device (API 19).

上的结果之间的差异

说到代码，下面是我的布局 XML 文件。

<com.example.rusia.madcall.design.CustomSlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.rusia.madcall.MapsActivity"
android:id="@+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- PLEASE DO NOT CHANGE CHILDREN ORDER -->

<!-- CONTENT 1 (on the left): The Master Pane -->
<FrameLayout
    android:id="@+id/master_pane"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- CONTENT 2 (on the right): The main view -->
<com.flipboard.bottomsheet.BottomSheetLayout
    android:id="@+id/bottomsheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Map -->
        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Icons on the left-top -->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <!-- Menu Icon -->
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start|top"
                android:layout_margin="5dp"
                android:src="@drawable/ic_menu_white_24dp"
                android:visibility="visible"
                app:backgroundTint="@color/colorPrimary" />

            <!-- Icons & Descriptions -->
            <RelativeLayout
                android:id="@+id/left_icons"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_below="@id/fab_menu"
                android:visibility="visible"
                android:layout_marginLeft="5dp">

                <!-- 1st icon: NEAR ME -->
                <RelativeLayout
                    android:id="@+id/near_me_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_near_me_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="21dp"
                        android:layout_marginStart="21dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal"
                        android:text="@string/near_me"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_near_me"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_near_me_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

                <!-- 2nd icon: ADVANCED SEARCH -->
                <RelativeLayout
                    android:id="@+id/advanced_search_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/near_me_box"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_search_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="22dp"
                        android:layout_marginStart="22dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal|center"
                        android:text="@string/advanced_search"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_search"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_search_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

                <!-- 3rd icon: SETTINGS -->
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/advanced_search_box"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_settings_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="22dp"
                        android:layout_marginStart="22dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal|center"
                        android:text="@string/settings"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_settings"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_settings_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

            </RelativeLayout>

        </RelativeLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|top"
            android:layout_margin="5dp"
            android:src="@drawable/ic_my_location_white_24dp"
            android:visibility="visible"
            app:backgroundTint="@color/colorPrimary" />

    </FrameLayout>

</com.flipboard.bottomsheet.BottomSheetLayout>

Answer 1

您需要针对不同的屏幕尺寸开发不同的XML。

要检查您的设备 dpi，您可以下载 this 应用程序。

要创建不同的布局，请在资源中创建一个文件夹并将其命名为 layout-sw320dp

根据您的屏幕dpi，将sw320dp改为sw600dp、sw700dp。

不同设备会根据设备dpi自动进行精确布局XML。

参考检查this

希望这些信息对您有用。

Answer 2

感谢@azizbekian 的建议，我找到了真正的问题并解决了它。我正在分享我的发现和解决方案。

首先，我在布局检查器中注意到 FloatingActionButton(s) 的 mPaddingTop、mPaddingBottom 等都设置为 42dp。我调查了有关 FloatingActionButton(s) 填充的问题，实际上我发现了一个众所周知的问题（已在 Whosebug 中讨论）。 此问题与 FloatingActionButton 有关，与 RelativeLayout 无关。更具体地说，在旧版本的 Android 上，这些按钮带有默认的全方位填充。

通过结合答案，我通过将以下属性添加到我的所有 FloatingButton(s) 解决了这个问题：

app:useCompatPadding="true"
app:elevation="0dp"
app:pressedTranslationZ="0dp"

这具有去除内置填充并获得简单图标的效果。然后，您可以使用通用属性 android:layout_margin 或 android:padding.

添加自定义填充或边距

Here 按钮之间填充 10dp 的最终结果示例。

希望对您有所帮助！

RelativeLayout 中的意外边距仅显示在设备上

Unexpected margins in RelativeLayout showing up only on device

android

margin

android-relativelayout

floating-action-button