Android 片段与工具栏布局重叠

Question

[更新] 我在我的项目中使用了 Bottombar 库和默认的 android Navigation Drawer。现在简单 TextView Fragment 与顶部重叠 Toolbar。这是我的 activity 布局代码。

您可以在此处查看 Screenshot of Layout。

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

        <include
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            layout="@layout/list_view" />
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>
<!-- Start - Container to show Fragments -->
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/bottomBar" />
<!-- End - Container to show Fragments -->
<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />
</RelativeLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/main_color_500"
    app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
    app:theme="@style/AppTheme.Title" />

list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_view"
    style="@style/ListViewStyle" />

OnCreate MainActivity

的方法（抽屉导航代码）

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    //getSupportActionBar().setTitle("Sample Title");
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mTitle = mDrawerTitle = getTitle();
    mDrawerList = (ListView) findViewById(R.id.list_view);

    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
            GravityCompat.START);

    View headerView = getLayoutInflater().inflate(
            R.layout.header_navigation_drawer_social, mDrawerList, false);

    ImageView iv = (ImageView) headerView.findViewById(R.id.image);

    // init universal image loader library
    ImageUtil.initImageUtil(this);

    ImageUtil.displayRoundImage(iv, "http://www.sample.com/0.jpg", null);

    mDrawerList.addHeaderView(headerView);// Add header before adapter (for pre-KitKat)
    mDrawerList.setAdapter(new DrawerSocialAdapter(this));
    mDrawerList.setOnItemClickListener(new MainActivity.DrawerItemClickListener());
    int color = ContextCompat.getColor(getApplicationContext(),R.color.material_grey_100);
    color = Color.argb(0xCD, Color.red(color), Color.green(color),
            Color.blue(color));
    mDrawerList.setBackgroundColor(color);
    mDrawerList.getLayoutParams().width = (int) getResources()
            .getDimension(R.dimen.drawer_width_social);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
            R.string.drawer_open, R.string.drawer_close) {
        public void onDrawerClosed(View view) {
            getSupportActionBar().setTitle(mTitle);
            invalidateOptionsMenu();
        }

        public void onDrawerOpened(View drawerView) {
            getSupportActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu();
        }
    };
    mDrawerLayout.addDrawerListener(mDrawerToggle);

    if (savedInstanceState == null) {
        // open drawer oncreate
        //mDrawerLayout.openDrawer(mDrawerList);
    }

如何解决？

提前致谢。

Answer 1

您需要在 FrameLayout 上使用 android:layout_below 才能将其置于工具栏下。

<include
android:id="@+id/tool_bar"
layout="@layout/toolbar" />

并将 FrameLayout 代码更改为。

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar"
android:layout_below="@+id/tool_bar"
 />

Answer 2

给你 LinearLayout 一个类似 android:id="@+id/ToolBar" 的 id 并在你的 FrameLayout 下面设置 android:layout_below="@+id/ToolBar"

试试这个，我刚刚测试过并且有效：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/nav"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottomBar">

    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>

    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

        <include
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            layout="@layout/list_view" />
    </android.support.v4.widget.DrawerLayout>

    <!-- Start - Container to show Fragments -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"

        />
    <!-- End - Container to show Fragments -->

</RelativeLayout>


<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />

</RelativeLayout>

请查看以下是否解决了问题：

    <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"/>

    <include
        android:layout_width="@dimen/drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        layout="@layout/list_view" />
</android.support.v4.widget.DrawerLayout>

<RelativeLayout
    android:id="@+id/nav"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>


    <!-- Start - Container to show Fragments -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"

        />
    <!-- End - Container to show Fragments -->

</RelativeLayout>


<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />
</RelativeLayout>

如果这不能解决问题，我将不得不给你一个完全不同的方法。让我知道。

Answer 3

这种方法可能会有所帮助（我遇到了类似的问题并且这种技术有效，但我想添加几个视图而不是完整的片段。）定义一个新的 xml 布局并在其中设置您想要的任何内容。（如果您使用标准的导航抽屉 activity，那么可能会自动为您创建一个名为 content_test.xml 或类似名称的 xml 文件）。在您的 toolbar.xml 中添加

<include layout="content_test.xml">

例如

content_test.xml

<android.support.constraint.ConstraintLayout 
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.yourdomain.yourappname.YourActivity"
    tools:showIn="@layout/toolbar.xml">

    <!--Add your views/layouts here. Don't forget to set
     android:layout_below="@id/idOfToolbarDefinedInYourActivity-->

</android.support.constraint.ConstraintLayout>

继续示例

toolbar.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yourdomain.yourappname.YourActivity">

    <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>

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

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

Answer 4

即使问题已经得到解答，另一种厚颜无耻的方法是将其添加到您的框架布局中
android:layout_marginTop="?attr/actionBarSize

Android 片段与工具栏布局重叠

Android Fragment is overlapping Toolbar Layout

android

android-layout

android-fragments

android-toolbar

android-bottomnav