web-dev-qa-db-ja.com

ツールバーの下のナビゲーション引き出し

ツールバーの下にナビゲーションドロワーを開くようにしています。

<Android.support.v4.widget.DrawerLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:id="@+id/drawer_layout"
tools:context=".MainActivity">
<RelativeLayout
    Android:layout_width = "match_parent"
    Android:layout_height = "wrap_content">
    <include layout="@layout/toolbar"
        Android:id="@+id/toolbar"/>
    <FrameLayout
        Android:layout_below="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/background_color"/>
</RelativeLayout>
<ListView
    Android:id="@+id/drawer"
    Android:layout_width="260dp"
    Android:layout_height="match_parent"
    Android:layout_below="@+id/toolbar"
    Android:layout_marginTop="56dp"
    Android:layout_gravity="start">
</ListView>
</Android.support.v4.widget.DrawerLayout>

ナビゲーションバーがツールバーの下に開くようにXMLを再フォーマットするにはどうすればよいですか？

androidnavigation-drawerandroid-toolbar
59
safaiyeh

DrawerLayoutを最上位の親として移動し、ToolbarをDrawerLayoutコンテンツコンテナーから移動する必要があります。要するに、これは次のようになります。

RelativeLayout
 ----Toolbar
 ----DrawerLayout
     ---ContentView
     ---DrawerList 

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/top_parent"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".MainActivity">

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

    <Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/toolbar">

        <FrameLayout
            Android:id="@+id/content_frame"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/background_color" />

        <ListView
            Android:id="@+id/drawer"
            Android:layout_width="260dp"
            Android:layout_height="match_parent"
            Android:layout_below="@+id/toolbar"
            Android:layout_gravity="start"
            Android:layout_marginTop="56dp" />

    </Android.support.v4.widget.DrawerLayout>
</RelativeLayout>

ただし、マテリアルデザインのガイドラインでは、Navigation DrawerはToolbarの上にある必要があると記載されています。

116
Nikola Despotoski

単に追加する必要があります

Android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

引き出しとして使用しているレイアウトに。

これにより、ツールバーの下のナビゲーションドロワーが自動的に調整され、さまざまな画面サイズもサポートされます。

23
Muhammad Qasim

このようにlayout_marginTopを追加できますが、

<Android.support.design.widget.NavigationView
        Android:layout_marginTop="@dimen/abc_action_bar_default_height_material"
        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" />

ただし、引き出しはツールバーの最上位レイヤーとして表示されます。

以下にツールバーに追加する別のチョッピーな方法を示します!!!

最高ではないかもしれませんが、うまくいきます！

最終結果は次のようになります

enter image description here

プロジェクトをNavigation Drawerプロジェクト（Navigation Drawer Activity）として作成する場合、layoutフォルダーに作成時に4つのXMLファイルが提供されます。

  • app_bar_main
  • content_main
  • navigatin_main

  • activity_main

    enter image description here

これらのxmlのリンク方法ほとんどの場合、include tagが使用されています

アクティビティはactivity_mainにリンクされています

  • activity_mainにはapp_bar_mainとnavigation_view（引き出し）があります
  • app_bar_mainにはデフォルトでtoolbarとcontent_mainがあります

activity_mainを削除して、その内容をアプリバーmainに直接設定し、アクティビティのメインレイアウトとして使用できるようになりました。

ツールバーの下にドロワーを追加するには、Android.support.design.widget.AppBarLayoutの下にドロワーを追加します。

これはapp_bar_main.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"
    Android:fitsSystemWindows="true"
    tools:context="none.navhead.MainActivity">

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



    //------ taken from activity_main
    // content main
    <include layout="@layout/content_main" />

    // you need this padding
    <Android.support.v4.widget.DrawerLayout
        Android:paddingTop="?attr/actionBarSize"
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        tools:openDrawer="start">

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


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

p.sアクティビティのsetContentViewにapp_bar_main.XMLを設定するだけで、いろいろな方法があります;）

20
Charuක

これは私のレイアウトであり、完璧に動作します：activity_main：

<?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">
    <!-- AppBarLayout should be here -->
    <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>

    <!-- add app:layout_behavior="@string/appbar_scrolling_view_behavior" -->

    <Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        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>
</Android.support.design.widget.CoordinatorLayout>

app_bar_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  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"
  tools:context=".activty.MainActivity">
<include layout="@layout/content_main"/>
</FrameLayout>

結果：ベローズツールバー

enter image description here

6
smaznet
<?xml version="1.0" encoding="utf-8"?>
<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="false"
    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:layout_marginTop="?attr/actionBarSize"
        Android:id="@+id/nav_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="false"
        app:menu="@menu/activity_main_drawer" />
</Android.support.v4.widget.DrawerLayout>
3
Tarun Umath

カスタムツールバーを使用している場合は、この方法で引き出しレイアウトを使用します。

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:orientation="vertical"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">

    <!-- The toolbar -->
    <Android.support.v7.widget.Toolbar  
        Android:id="@+id/my_awesome_toolbar"
        Android:layout_height="wrap_content"
        Android:layout_width="match_parent"
        Android:minHeight="?attr/actionBarSize"
        Android:background="?attr/colorPrimary" />

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

        <!-- drawer view -->
        <LinearLayout
            Android:layout_width="304dp"
            Android:layout_height="match_parent"
            Android:layout_gravity="left|start">
            ....
        </LinearLayout>

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

</LinearLayout>

カスタムツールバーを使用していない場合は、ドロワーレイアウトにマージン上部を設定する必要があります。

Android:layout_marginTop ="?android:attr/actionBarSize"
2
Avijit Karmakar

簡単で良い解決策は、fitsSystemWindows=falseに設定されています

Android.support.v4.widget.DrawerLayout

iDが

Android:id="@+id/drawer_layout"

navigationViewの場合、layout_marginTopを?attr/actionBarSizeとして設定すると、アクションバーのサイズが取得され、マージンとして設定されます。

ここに完全なコードがあります of activity_main.xml上記の両方の変更があります。

0
Inzimam Tariq IT