问题
I am updating the Navigation Drawer in my app. I want to add section dividers as the Gmail App has. How do I add them? Just add them as views, which is a simple approach. But, i want to know, is it the correct approach?
Gmail App:
Right now, I am using a listview with a header view.
My current xml:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
android:id="@+id/toolbar"
layout="@layout/toolbar_with_spinner" />
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
<ListView
android:id="@+id/listview_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/white"
android:choiceMode="singleChoice"
android:divider="@null"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
What is the correct approach of achieving something like the Gmail Navigation?
回答1:
Use Menu Resources instead of listview. the group tag in menu creates a divider line
menu_drawer
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single"
>
<item
android:id="@+id/id1"
android:icon="@drawable/icon1"
android:title="@string/title1"
/>
<item
android:id="@+id/id2"
android:icon="@drawable/icon2"
android:title="@string/title2"
/>
<item
android:id="@+id/id3"
android:icon="@drawable/icon3"
android:title="@string/title3"
/>
</group>
<group android:checkableBehavior="none"
android:id="@+id/menu_nav_temp_gid"
>
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="@string/settings" />
</group>
</menu>
Link the menu resources in navigation view
<?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/ac_hs_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include layout="@layout/layout_home_screen" />
<android.support.design.widget.NavigationView
android:id="@+id/ac_hs_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/layout_nav_header"
app:menu="@menu/menu_drawer"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
回答2:
I used headerview and footerview to add the image on top and divider at the bottom. The divider is a View.
drawer_list_footer_divider.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:layout_gravity="bottom"
android:background="@android:color/white"
android:orientation="vertical" >
<View
android:id="@+id/left_viewline"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:background="?android:attr/listDivider" />
</LinearLayout>
drawer_list_footer_view.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="50dp"
android:layout_gravity="bottom"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<ImageView
android:id="@+id/imageView_settings"
android:layout_width="25dp"
android:layout_height="25dp"
android:contentDescription="@string/empty"
android:src="@drawable/ic_action_settings" />
<TextView
android:id="@+id/textView_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:padding="10dp"
android:singleLine="true"
android:text="@string/action_settings" />
</LinearLayout>
and in my code:
private void setUpHeaderAndFooter() {
LayoutInflater inflater = getLayoutInflater();
View header = (View) inflater.inflate(R.layout.drawer_list_header_view,
mDrawerList, false);
mDrawerList.addHeaderView(header, null, false);
View footer_divider = (View) inflater.inflate(
R.layout.drawer_list_footer_divider, null, false);
mDrawerList.addFooterView(footer_divider, null, false);
// This view is Settings view
View footer = (View) inflater.inflate(R.layout.drawer_list_footer_view,
mDrawerList, false);
footer.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
if (android.os.Build.VERSION.SDK_INT < 11) {
startActivity(new Intent(MainActivity.this,
Settings1Activity.class)
.setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));
} else {
startActivity(new Intent(MainActivity.this,
Settings2Activity.class)
.setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));
}
}
});
mDrawerList.addFooterView(footer, null, true);
}
回答3:
Use NavigationView inside DrawerLayout as its second child. Insert items in menu and apply menu attribute to NavigationView to display list items in Navigation Drawer. You can then give group id to menu items to be placed inside which will automatically creates a divider. For broader explanation, pls follow :
How to create a simple divider in the new NavigationView?
来源：https://stackoverflow.com/questions/26906719/navigation-drawer-divider-between-sections-like-gmail-app