web-dev-qa-db-ja.com

ツールバーの下にコンテンツを表示する

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

フレームレイアウトを使用してそれを分離しようとすることを読みましたが、少し行き詰まりました。現在、ソフトウェアに付属している基本的なAndroidスタジオナビゲーションドロワーテンプレートを使用していますが、どのような変更を加える必要があるのか​​疑問に思っていました。

私のコーディネーターのレイアウト

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

どのような変更を加える必要がありますか？

androidxmlandroid-layouttoolbarandroid-toolbar
18
james

多くの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>
32
Karakuri
app:layout_behavior="@string/appbar_scrolling_view_behavior"

このコードをフレームタグに追加します

15
Brian Hoang

@Brian Hoangと@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

1
PrograMonks