traduccion studio personalizar personalizado icono deslizante cambiar boton bar agregar android navigation-drawer android-toolbar

android - studio - navigation drawer personalizado



Cajón de navegación debajo de la barra de herramientas (7)

Debería mover DrawerLayout como principal superior y mover la Toolbar de Toolbar fuera del DrawerLayout contenido de DrawerLayout . En resumen, esto se ve así:

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>

Sin embargo, las directrices de diseño de materiales indican que Navigation Drawer debe estar encima de la Toolbar .

Estoy tratando de abrir el cajón de navegación debajo de la barra de herramientas.

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

¿Cómo vuelvo a formatear el xml para que la barra de navegación se abra debajo de la barra de herramientas?


Puede agregar layout_marginTop como este,

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

pero el cajón aparecerá como la capa superior de la barra de herramientas.

Aquí hay otra forma Choppy para agregarlo debajo de la barra de herramientas.

podría no ser el mejor pero funciona!

el resultado final se verá así

Si crea un proyecto como un proyecto de Cajón de navegación ( Navigation Drawer Activity ), le dará cuatro archivos XML en la creación en su carpeta de layout

  • app_bar_main
  • content_main
  • navigatin_main
  • activity_main

cómo estos xmls están vinculados? la mayoría de las veces veo que se usa include tag

Tu actividad está vinculada con activity_main

  • activity_main tiene app_bar_main y navigation_view (cajón)
  • app_bar_main tiene la toolbar y content_main por defecto

ahora vamos a eliminar activity_main y establecer su contenido directamente en la barra de aplicaciones principal y usarlo como el diseño principal de Activity.

Para agregar el cajón en la barra de herramientas, agréguelo en android.support.design.widget.AppBarLayout porque contiene la barra de herramientas y debe estar en la parte superior.

aquí hay un ejemplo de 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>

ps puede configurar app_bar_main.XML para establecerContentView de su actividad, solo juegue hay muchas maneras;)


Si está utilizando una barra de herramientas personalizada, utilice el diseño del cajón de esta manera.

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

y si no está utilizando una barra de herramientas personalizada, entonces debe establecer el margen superior en el diseño del cajón.

android:layout_marginTop ="?android:attr/actionBarSize"


Simplemente deberías agregar

android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

a su diseño que está utilizando como cajón.

Esto ajustará automáticamente el cajón de navegación debajo de la barra de herramientas y también admite diferentes tamaños de pantalla.


Una solución fácil y buena está configurada fitsSystemWindows=false para

android.support.v4.widget.DrawerLayout

que tiene id como

android:id="@+id/drawer_layout"

Y para navigationView establece layout_marginTop como ?attr/actionBarSize que obtendría el tamaño de la barra de acciones y lo establecería como margen

Aquí está el código completo de activity_main.xml que tiene ambos cambios listados arriba.


este es mi diseño y mi trabajo perfecto: 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>

resultado: Abajo barra de herramientas


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