I want to replicate the Navigation Drawer similar to that of the LinkedIn App below:
我想复制类似于以下LinkedIn应用程序的导航抽屉:
Note that the message, notification, and the settings buttons at the top are persistent and are not part of the scrollable list.
请注意,顶部的消息,通知和设置按钮是持久性的,不属于可滚动列表的一部分。
I've followed the official Android tutorial for Navigation Drawer as well as numerous other tutorials that simply do not provide additional light into how I can achieve this.
我已经关注了导航抽屉的官方Android教程以及许多其他教程,这些教程根本无法提供我如何实现这一目标的额外信息。
The best I could think of was to add 3 ImageButtons to the header layout of the Navigation Drawer template in Android Studio 2.1.1.
我能想到的最好的方法是在Android Studio 2.1.1中的Navigation Drawer模板的标题布局中添加3个ImageButtons。
EDIT: As per Prat's and a few others advice, I've included an additional header layout just before the drawer that contains the 3 buttons, but no matter the z-ordering of the layouts within the xml, it seems to hide behind the drawer. See image illustration below:
编辑:根据Prat和其他一些建议,我在包含3个按钮的抽屉之前添加了一个额外的标题布局,但无论xml中布局的z排序,它似乎都隐藏在抽屉后面。见下图:
Below are the layout files:
以下是布局文件:
header.xml (contains the 3 buttons)
header.xml(包含3个按钮)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:background="#111">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
</LinearLayout>
nav_header_main.xml (default generated header)
nav_header_main.xml(默认生成的标头)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:background="#111">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
</LinearLayout>
activity_main.xml
<?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="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff">
<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="false"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
<include
android:id="@+id/header"
layout="@layout/header"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
2 个解决方案
#1
1
Try to do like this :
尝试这样做:
header.xml(top most layout where you have 3 images)
header.xml(最顶层的布局,你有3个图像)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
</LinearLayout>
</LinearLayout>
nav_header_main( default android header)
nav_header_main(默认的android头文件)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />
</LinearLayout>
then finally the main layout showing
然后最后主要布局显示
- header(top)
- nav_main_header
- listview
<!-- The main content view -->
<FrameLayout
android:id="@+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<include android:id="@+id/header"
layout="@layout/header"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="100dp"/>
<include android:id="@+id/header2"
layout="@layout/nav_header_main"
android:layout_width="fill_parent"
android:layout_below="@id/header"
android:layout_height="100dp"/>
<ListView
android:id="@+id/lvDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:layout_below="@id/header2"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</RelativeLayout>
#2
0
Use recyclerview
with adapter for this. You can implement any structure of custom views for items.
使用recyclerview和适配器。您可以为项目实现任何自定义视图结构。
#1
1
Try to do like this :
尝试这样做:
header.xml(top most layout where you have 3 images)
header.xml(最顶层的布局,你有3个图像)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="@drawable/ic_menu_manage" />
</LinearLayout>
</LinearLayout>
nav_header_main( default android header)
nav_header_main(默认的android头文件)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />
</LinearLayout>
then finally the main layout showing
然后最后主要布局显示
- header(top)
- nav_main_header
- listview
<!-- The main content view -->
<FrameLayout
android:id="@+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<include android:id="@+id/header"
layout="@layout/header"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="100dp"/>
<include android:id="@+id/header2"
layout="@layout/nav_header_main"
android:layout_width="fill_parent"
android:layout_below="@id/header"
android:layout_height="100dp"/>
<ListView
android:id="@+id/lvDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:layout_below="@id/header2"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</RelativeLayout>
#2
0
Use recyclerview
with adapter for this. You can implement any structure of custom views for items.
使用recyclerview和适配器。您可以为项目实现任何自定义视图结构。