片段容器布局与主要 activity 内容重叠

Question

我正在尝试在我的主 activity 中添加一个自定义 header，它已经包含一个底部导航器和一个用作 fragments 容器的 framelayout我想展示。

下面给出的代码包含一个 Linearlayout["@+id/application_header]，它应该充当应用程序 header，但是 header 是由 fragment container[@+id/main_container] 显示的重叠 header.

尝试了 android:layout_below 和 android:layout_above 属性，但它仍然重叠。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:design="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.amplitude.tron.volksradio.MainActivity">

<LinearLayout
        android:id="@+id/application_header"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RADIO"
            android:layout_gravity="center"/>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/application_header"
        android:layout_above="@+id/bottomNavigationBar"
        android:layout_alignParentTop="true">
    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        design:menu="@menu/bottom_menu_navigation"
        android:background="#50b1b5b9">

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

</RelativeLayout>

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
     <LinearLayout
          android:id="@+id/application_header"
          android:layout_width="match_parent"
          android:layout_height="50dp"
          android:orientation="horizontal"
          android:gravity="center_horizontal">

     <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="RADIO"
          android:layout_gravity="center"/>
     </LinearLayout>

     <FrameLayout
          android:id="@+id/main_container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_below="@+id/application_header"
          android:layout_above="@+id/bottomNavigationBar"
          android:layout_alignParentTop="true">
     </FrameLayout>

     <android.support.design.widget.BottomNavigationView
          android:id="@+id/bottomNavigationBar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          design:menu="@menu/bottom_menu_navigation"
          android:background="#50b1b5b9">
    </android.support.design.widget.BottomNavigationView>
</LinearLayout>

Answer 2

android:layout_below 和 android:layout_above 与 RelativeLayout 一起工作。顺便说一句，只有一个 TextView 的 LinearLayout 是多余的。您可以只使用 TextView。以下是有关如何完成此操作的一些选项。

使用 RelativeLayout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:design="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/application_header"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="RADIO"/>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNavigationBar"
        android:layout_alignParentTop="true"
        android:layout_below="@id/application_header">
    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#50b1b5b9"
        design:menu="@menu/bottom_menu_navigation">

    </android.support.design.widget.BottomNavigationView>
</RelativeLayout>

使用 LinearLayout:

 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:design="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/application_header"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="RADIO"/>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#50b1b5b9"
        design:menu="@menu/bottom_menu_navigation">

    </android.support.design.widget.BottomNavigationView>
</LinearLayout>

另一个（更好的）选择是使用 CoordinatorLayout with Toolbar：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:design="http://schemas.android.com/tools">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/application_header"
        android:layout_above="@+id/bottomNavigationBar"
        android:layout_alignParentTop="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        design:menu="@menu/bottom_menu_navigation"
        android:background="#50b1b5b9"/>

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

Answer 3

我自己解决了，尽管可能还有其他干净的解决方案，如果发现可行，将被接受为答案。

我刚刚添加了 android:layout_marginTop="50dp" 这与具有 id 的元素的高度相同 - @+id/application_header

PS- 我不知道这是否会影响不同尺寸的屏幕，我的测试设备只有 5.5 英寸，解决方案可以完美运行。

Answer 4

您还可以通过添加以下内容使布局对齐屏幕中心：

android:layout_centerInParent="true"

还添加填充或边距，以防出现任何少量重叠

片段容器布局与主要 activity 内容重叠

Fragment container layout overlapping main activity contents

layout

android

android-layout

android-fragments

android-framelayout