Android Fragment与工具栏布局重叠

时间：2017-07-02 06:05:49

标签： android android-layout android-fragments android-toolbar android-bottomnav

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

您可以在此处查看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);
    }

如何解决？

提前致谢。

4 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

向您LinearLayout提供类似android:id="@+id/ToolBar"的内容，并在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>

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

                <li><a href="#"><span class="mdi mdi-bell"> </span> Notifications</a></li>
                <li class="seperator"></li>
                <li><a href="#"><span class="mdi mdi-settings"> </span> Settings</a></li>

                <li><a href="#"><span class="mdi mdi-help-circle"> </span> Help</a></li>

            </ul>
        <div class="col-md-6">

        <div class="post-box">
            <form id="post-activity">
                <textarea name="content" class="post-input" placeholder="What's new, $session['user']['name']?"></textarea>
                <button id="post-button" class="btn btn-info btn-raised waves-effect" type="submit"><span class="mdi mdi-send"></span> Post</button>
            </form>
        </div>

            <div class="post-card">
                <div class="header">
                    <div class="avatar"></div>
                    <a href="/profile">Adrian Bernat</a>
                </div>
                <div class="content">
                    Test Content
                </div>
                <div class="footer">

                    <button class="btn btn-round waves-effect btn-default btn-raised btn-like"><span class="mdi mdi-thumb-up-outline"></span> Like</button>
                    <button class="btn btn-round waves-effect btn-default btn-raised btn-comment"><span class="mdi mdi-comment-text-outline"></span> Comment</button>

                </div>

            </div>
        </div>
    </div>`

如果这还没有解决，我将不得不给你一个完全不同的方法..让我知道。

答案 3 :(得分：0)

这种方法可能会有所帮助（我遇到了类似的问题并且这项技术有效，但我想添加一些视图，而不是一个完整的片段。） 定义新的xml布局并设置您想要的任何内容。 （如果您使用标准导航抽屉活动，则可能已自动为您创建名称为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>
相关问题
最新问题