it-swarm.com.ru

Навигационный ящик под панелью инструментов

Я пытаюсь открыть навигационную панель под панелью инструментов.

<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, чтобы панель навигации открывалась под панелью инструментов?

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

Тем не менее, в рекомендациях по проектированию материалов указано, что навигационный ящик должен быть выше Toolbar.

111
Nikola Despotoski

Вы должны просто добавить 

Android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

к вашему макету, который вы используете в качестве ящика.

Это автоматически отрегулирует панель навигации под панелью инструментов, а также поддерживает различные размеры экрана.

22
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 Activity), он даст вам четыре файла XML при создании в папке layout

  • app_bar_main
  • content_main
  • navigatin_main
  • activity_main

     enter image description here

как эти xmls связаны? в основном я вижу include tag используется

Ваша активность связана с деятельностью

  • activity_main имеет app_bar_main и navigation_view (ящик) 
  • app_bar_main по умолчанию имеет toolbar и content_main

теперь давайте удалим activity_main и установим его содержимое непосредственно на панель приложения main и используем его в качестве основного макета для Activity.

Чтобы добавить ящик под панелью инструментов Добавьте его под 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 вы можете установить app_bar_main.XML для setContentView вашей активности просто поиграть есть много способов;)

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

который имеет идентификатор как

Android:id="@+id/drawer_layout"

А для navigationView установите layout_marginTop в качестве ?attr/actionBarSize, что бы получить размер панели действий и установить его в качестве поля

Вот полный код из activity_main.xml, который имеет оба изменения, перечисленные выше.

0
Inzimam Tariq IT