Панель навигации под панелью инструментов
Я пытаюсь открыть ящик навигации под панелью инструментов.
<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 так, чтобы панель навигации открывалась под панелью инструментов?
Ответы
Ответ 1
Вы должны переместить 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
.
Ответ 2
Вы должны просто добавить
android:layout_marginTop="@dimen/abc_action_bar_default_height_material"
к вашему макету, который вы используете в качестве ящика.
Это автоматически отрегулирует навигационный ящик под панелью инструментов, а также поддерживает различные размеры экрана.
Ответ 3
Вы можете добавить 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" />
но ящик появится как верхний слой на панели инструментов.
Вот еще один Choppy способ добавить его ниже на панель инструментов!!!
может быть не лучшим, но он работает!
конечный результат будет выглядеть следующим образом:
![введите описание изображения здесь]()
Если вы создаете проект в качестве проекта навигационного ящика (Navigation Drawer Activity
), он предоставит вам четыре файла XML при создании в вашей папке layout
- app_bar_main
- content_main
- navigatin_main
-
activity_main
![введите описание изображения здесь]()
как связаны эти xmls? в основном я вижу include tag
Ваша активность связана с Activity_main
-
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 вашей деятельности просто поиграйте, есть много способов;)
Ответ 4
это мои макеты и отлично работают:
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>
Результат:
Панель инструментов Bellow
![введите описание изображения здесь]()
Ответ 5
Если вы используете настраиваемую панель инструментов, тогда используйте макет ящика таким образом.
<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"
Ответ 6
Для простого и хорошего решения установлено fitsSystemWindows=false
для
android.support.v4.widget.DrawerLayout
который имеет id как
android:id="@+id/drawer_layout"
И для navigationView
установите layout_marginTop
как ?attr/actionBarSize
, чтобы получить размер панели действий и установить ее как margin
Вот полный код activity_main.xml
, который имеет как перечисленные выше изменения.