为什么我的视图在 Android Studio 布局编辑器中与状态栏重叠答案

【问题标题】：Why my views are overlapping status bar in Android Studio Layout Editor为什么我的视图在 Android Studio 布局编辑器中与状态栏重叠
【发布时间】：2018-01-16 21:36:47
【问题描述】：

一段时间以来，我在布局编辑器中制作的所有布局都是这样的。我不记得以前这是否正常，但这有点烦人。

如您所见，ImageView 和 TextView 位于状态栏上方。更糟糕的是 ListView 在两者之上，即使我已经设置了：

android:layout_below="@id/txt_title"

最终的view结果如我所料：

[Imageview][TextView]
[ List View         ]

但是编辑器中的这个错误（？）让我很烦。

这是布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/primary"
                android:fitsSystemWindows="true"
    >


    <ImageView
        android:id="@+id/img_logo"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/white"
        app:ico_color="@color/iconColor"
        app:ico_icon="cmd-download"
        app:ico_size="24dp"

        />


    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@id/img_logo"
        android:gravity="start|center_vertical"
        android:paddingEnd="8dp"
        android:paddingStart="8dp"
        android:text="@string/title_favorite_beers"
        android:textColor="@color/white"
        android:textSize="15sp"


        />

    <ListView
        android:id="@+id/widget_list_collection"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_below="@id/txt_title"
        android:background="@color/white"
        android:padding="8dp"

        />


</RelativeLayout>

-- 编辑-- 我已将布局更改为：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:background="@color/primary"
                android:fitsSystemWindows="true"
    >


    <ImageButton
        android:id="@+id/widget_image_logo"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/iconColor"
        android:foreground="?android:selectableItemBackground"
        android:foregroundGravity="center_vertical"
        android:src="@mipmap/ic_beer_launch"
        />


    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@id/widget_image_logo"
        android:gravity="start|center_vertical"
        android:paddingEnd="8dp"
        android:paddingStart="8dp"
        android:text="@string/title_favorite_beers"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        tools:text="Favorite Beers"


        />

    <ListView
        android:id="@+id/widget_list_collection"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_below="@id/txt_title"
        android:background="@color/white"
        android:padding="8dp"

        />


</RelativeLayout>

结果是：

我的样式.xml：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/window_background</item>
        <item name="android:dialogTheme">@style/TitledDialog</item>
    </style>

    <style name="TitledDialog" parent="@style/Theme.AppCompat.Light.Dialog">
        <item name="android:windowNoTitle">false</item>
    </style>

    <style name="AppTheme.PrimaryButton" parent="Base.Widget.AppCompat.Button">
        <item name="android:layout_height">@dimen/button_height</item>
        <item name="android:padding">@dimen/button_padding</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:background">?attr/colorAccent</item>
        <item name="android:foreground">?attr/selectableItemBackground</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

    <style name="AppTheme.Toolbar" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
        <item name="actionMenuTextColor">@android:color/white</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

    <style name="CollapsedToolbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textStyle">normal</item>
    </style>

    <style name="ExpandedToolbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textColor">@android:color/transparent</item>
    </style>

    <string name="movie_details">Movie Details</string>
</resources>

-- 编辑--

编辑器与此项目的所有视图中的状态栏重叠。正如您在此活动中看到的那样，它在 root 中使用 CoordinatorLayout：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_search"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.github.alexpfx.udacity.beercollection.search.SearchActivity"
    >

    <include layout="@layout/layout_toolbar"/>

    <include layout="@layout/content_search_activity"/>


</android.support.design.widget.CoordinatorLayout>

【问题讨论】：

你为什么还要看布局工具？它是一块垃圾。用 xml 编写布局，学习如何将其可视化，然后通过在实际设备上运行进行测试。所有的视觉布局工具都会让你慢下来，让事情变得混乱。
我不知道...我一直这样做。它可以很好地快速查看某些内容，而无需运行整个程序。对于 ConstraintLayouts，它甚至会有所帮助。但是那这个bug正常吗？
你能发布你的完整 xml 布局吗？
@Naveed 是的，抱歉，我忘了。
@GabeSechan “你为什么还要看布局工具” -> 布局工具不是最好的，可能不如 Xcode 中的 Interface Builder 响应迅速，但它仍然是一个非常有效的工具，并且它经常起作用。有时它需要关闭/重新打开，或者某些布局存在问题，但在大多数情况下，这是一种非常快速的方法，可以确定您在 XML 中手动编写的内容是否有意义。特别是在使用 ConstraintLayouts 时，引擎必须根据算法计算小部件位置。

标签： android android-layout android-studio-3.0

【解决方案1】：

我发现您的布局存在一些问题

ImageView 类没有以下属性：

更新：根据评论，以下属性很好，因为操作使用Android-Iconics

app:ico_color="@color/iconColor" app:ico_icon="cmd-download" app:ico_size="24dp"
您将列表视图限制在您的文本视图下，但根据您发布的图像，您的文本视图似乎没有内容，因此它与您的图像视图重叠。您可以通过将其限制在具有更大高度的视图下来解决此问题，例如在您发布的示例中，您的图像视图具有较大的高度。

您似乎想要以下内容：

[图像视图][文本视图]

[列表视图]

我已将您的代码修改为以下内容，应该可以提供所需的结果。

注意：我已经更改了一些值（例如颜色、背景、文本等），您需要相应地添加它们。

最后，确保您的主题不会导致布局与状态栏重叠。布局编辑器也比 android studio 版本有所改进。确保您拥有最新版本的 android studio。下图来自 Android Studio 3.0.1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/red"
                android:fitsSystemWindows="true"
>


    <ImageView
            android:id="@+id/img_logo"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@color/red"
            android:src="@android:drawable/stat_sys_download"
    />


    <TextView
            android:id="@+id/txt_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@id/img_logo"
            android:gravity="start|center_vertical"
            android:paddingEnd="8dp"
            android:paddingStart="8dp"
            android:text="test"
            android:textColor="@color/white"
            android:textSize="15sp"


    />

    <ListView
            android:id="@+id/widget_list_collection"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_below="@id/img_logo"
            android:background="@color/white"
            android:padding="8dp"

    />


</RelativeLayout>

【讨论】：

您好，感谢您的帮助。这些属性来自 Android-Iconics，但我将其删除，因为默认情况下它在小部件的布局中不起作用。我将 ImageView 替换为 ImageButton。文本视图有内容：“最喜欢的啤酒”，我把它放在 tools:text 中以在编辑器中显示它。我的 Android Studio 也是 3.0.1。正如你所说，我几乎可以肯定主题有问题。我用您建议的修改和我所做的其他修改来编辑我的第一个问题。在应用程序中它完全按照我的意愿显示布局，但在编辑器中它仍然很奇怪。