CoordinatorLayout错误地查看了视图

时间:2018-03-05 08:19:29

标签: android android-toolbar android-coordinatorlayout bottomnavigationview android-framelayout

我使用下面的布局来显示工具栏(顶部),FrameLayout(中间),BottomNavigationView(底部)。

  

但它只会造成混乱。工具栏& BottomNavigationView重叠   彼此和FrameLayout成为全屏。

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
        android:id="@+id/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"
            app:title="@string/app_name"
            app:titleTextColor="@color/white"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <com.appeaser.sublimepickerlibrary.SublimePicker
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBarLayout"
        android:layout_above="@+id/bottom_navigation" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

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

参考快照

enter image description here

1 个答案:

答案 0 :(得分:0)

当使用协调器布局时,元素的定位应该使用锚点完成,而不是使用layout_below和layout_above,并给你的底部导航底部的layout_gravity,所以试试这样的东西

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@android:style/ThemeOverlay.Material.ActionBar">

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

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

 <com.appeaser.sublimepickerlibrary.SublimePicker
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black_overlay"
    app:layout_anchor="@+id/appBarLayout"
    app:layout_anchorGravity="bottom"
    android:layout_gravity="bottom"/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:elevation="10dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main" />

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

希望这会有所帮助