2016-04-24 12 views
9

こんにちは私は単純に私のコンテンツをツールバーの下に置こうとしていますが、私のアプリケーションを実行する瞬間、その下にあるときにコンテンツの一部が隠れてしまいます。ツールバーのコンテンツを表示する

フレームレイアウトを使用して分割しようとしましたが、ちょっと立ち往生しました。私は現在、ソフトウェアと一緒に提供されている基本的なアンドロイドスタジオナビゲーションドロワーテンプレートを使用しており、何を変更しなければならないのか不思議に思っていました。

マイコーディネーターレイアウト

<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を必要としない、あなただけの2人の子供と垂直の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> 
を@Brianホアンと@Karakuriとして
+0

物事をより明確にするためにレイアウト属性を追加するように編集しました。 – Karakuri

+0

非常にありがとう、問題はどのようにシンプルだったか分からなかったソート:D – james

7
app:layout_behavior="@string/appbar_scrolling_view_behavior" 

+0


は、下のコードとUIの画像を見てください。彼はツールバーを画面からスクロールさせたいとは言わなかった。 – Karakuri

+0

ツールバーの下に私の標準的なページの内容がほしいと思う:D – james

+2

前に私の解決を試みなさい。 :D –

0

はlayout_behaviourプロパティを使用して、言った:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

は非常に良い解決策になるようです。現時点でアニメーションがなくても将来的にはアニメーションを追加したい場合は、CoordinatorLayoutとAppBarLayoutを保持することができます。


AppBarLayout UIコンポーネント全体の高さを計算するのが私の理解から一般的に見えるプロパティです。 @文字列/ appbar_scrolling_view_behaviourでlayout_behaviourプロパティを使用するUIコンポーネントは、高さに関係なくAppBarLayoutのすぐ下に自動的に表示されます。

このようにして、AppBarLayoutの下にあるはずのUIの上余白をハードコードする必要はありません。

include_app_bar_with_tabs_layout(AppBarLayout)の高さは200dp(これはwrap_contentまたは他のものでも可)です。次に、画面の内容を含むRelativeLayoutはlayout_behaviourプロパティを使用します。それはそれほど単純ではありません

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

関連する問題