2016-04-24 67 views
9

你好,我试图简单地把我的内容放在工具栏下面,但是当我运行我的应用程序时,一些内容隐藏在它后面,当它应该在它下面时。在工具栏下显示内容

我已经阅读了关于使用框架布局试图分开它,但我有一点卡住了。我目前正在使用该软件提供的基本android studio导航抽屉模板,并且想知道我必须做些什么改变。

我的协调布局

<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/fragment_container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/> 

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

我的抽屉布局

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<include 
    layout="@layout/app_bar_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:fitsSystemWindows="true" 
    app:headerLayout="@layout/nav_header_main" 
    app:menu="@menu/activity_main_drawer" /> 

    </android.support.v4.widget.DrawerLayout> 

我需要什么样的变化做什么呢?

回答

16

许多ViewGroups让自己的孩子重叠。这些包括FrameLayout,RelativeLayout,CoordinatorLayout和DrawerLayout。一个不允许其子女重叠的是LinearLayout。

您的问题的答案真的取决于最终结果应该是什么。如果你想只是一个工具栏,总是在屏幕上和它下面的一些内容,那么你并不需要一个CoordinatorLayout和AppBarLayout可言,你可以只使用一个垂直的LinearLayout有两个孩子:

<LinearLayout android:orientation="vertical" ...> 
    <android.support.v7.widget.Toolbar 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     ... /> 

    <FrameLayout 
     android:id="@+id/fragment_container" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     ... /> 
</LinearLayout> 

注意FrameLayout的布局属性。

如果你想做到哪里打开和关闭屏幕滚动内容的工具栏滚动,那么你就需要一个AppBarLayout花哨的东西,你需要给你的内容区域这样一个特殊的属性:

<android.support.design.widget.CoordinatorLayout> 
    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     ... > 

     <android.support.v7.widget.Toolbar 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_scrollFlags="scroll" 
      ... /> 
    </android.support.design.widget.AppBarLayout> 

    <FrameLayout 
     android:id="@+id/fragment_container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     ... /> 
</android.support.design.widget.CoordinatorLayout> 
+0

编辑添加布局属性以使事情更清晰。 – Karakuri

+0

非常感谢,排序问题没有意识到它有多简单:D – james

7
app:layout_behavior="@string/appbar_scrolling_view_behavior" 

将此代码添加到您的帧标签

+0

这不是那么简单。他没有说他希望工具栏滚动屏幕。 – Karakuri

+0

我只希望我的标准页面内容在工具栏下:D – james

+2

请尝试我的解决方案。 :D –

0

由于@布赖恩晃和@Karakuri使用layout_behaviour物业说:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

似乎是一个非常好的解决方案。即使您目前没有任何动画,但您计划将来也可以继续使用CoordinatorLayout和AppBarLayout,以防将来添加动画。


属性似乎做的一般从我的理解,是计算整个AppBarLayout UI组件的高度。无论高度如何,使用layout_behaviour属性和@ string/appbar_scrolling_view_behaviour的UI组件都将自动显示在AppBarLayout下方。

以这种方式,不需要硬编码应该在AppBarLayout下的UI中的任何上边距。

下面的代码中,include_app_bar_with_tabs_layout(AppBarLayout)的固定高度为200dp(可以是wrap_content或其他任何东西)。然后包含屏幕内容的RelativeLayout使用layout_behaviour属性。


看一看代码和UI图像下方:

<?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" 
    android:fitsSystemWindows="true"> 

    <include 
     layout="@layout/include_app_bar_with_tabs_layout" 
     android:layout_width="match_parent" 
     <!-- this can be anything, even wrap_content --> 
     android:layout_height="200dp" /> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/Green" 
     <!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) --> 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/view_pager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_above="@+id/adView" /> 

     <com.google.android.gms.ads.AdView 
      android:id="@id/adView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      app:adSize="BANNER" 
      app:adUnitId="@string/banner_ad_unit_id" 
      tools:background="@color/green" 
      tools:layout_height="50dp" /> 
    </RelativeLayout> 
</android.support.design.widget.CoordinatorLayout> 

enter image description here