片段容器布局与主要活动内容重叠答案

【问题标题】：Fragment container layout overlapping main activity contents片段容器布局与主要活动内容重叠
【发布时间】：2017-05-30 07:25:33
【问题描述】：

我正在尝试在我的主要活动中添加一个自定义标题，该标题已经包含一个底部导航器和一个framelayout，它充当我要显示的fragments 的容器。

下面给出的代码包含一个Linearlayout["@+id/application_header]，它应该作为应用程序的标头，但是标头由fragment 显示，container[@+id/main_container] 与标头重叠。

尝试了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>

【问题讨论】：

标签： android android-layout android-fragments layout android-framelayout

【解决方案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>

【讨论】：

【解决方案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 和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>

【讨论】：

感谢您的努力，代码中已经有一个相关的布局，但我很抱歉，尝试了您的第二个解决方案，它只是将导航菜单推到了屏幕之外。最后一个解决方案不是我想要的，因为我的标题是定制的
对于Toolbar 解决方案，您仍然可以使用自定义视图。来自references：“工具栏可能包含以下可选元素的组合：一个或多个自定义视图。应用程序可以将任意子视图添加到工具栏。它们将出现在布局中的这个位置。如果子视图的Toolbar.LayoutParams 指示 CENTER_HORIZONTAL 的重力值，在测量完所有其他元素后，视图将尝试在工具栏中剩余的可用空间内居中。"

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

android:layout_centerInParent="true"

如果有少量重叠，还可以添加填充或边距

【讨论】：