Question

我正在尝试在我的主活动中添加一个自定义标题，该标题已包含一个底部导航器和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>

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合作。顺便说一下，LinearLayout只有一个TextView是多余的。您可以使用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>

Answer 3

解决了我自己的问题，虽然可能还有其他干净的解决方案，如果可行，我们会接受答案。

我刚刚添加了android:layout_marginTop="50dp"，它与ID为{ - 1}}

的元素的高度相同

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

Answer 4

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

android:layout_centerInParent="true"

还要添加填充或边距，以便有任何少量重叠

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

4 个答案: