Android Design Support Library -- Navigation View, androidnavigation

Android Design Support Library -- Navigation View, androidnavigation

Cutting-edge

Android introduced the design of the Material design element from 5.0. This new design language makes the user experience of Android a new look, google has encapsulated some important material Design controls in the Android design Support Library. Before that, many material design controls have appeared on github, however, google has standardized some controls. Note that the Android Design Support Library differs from the Android Support Library. The Android Support Library only supports encapsulation of some basic controls, the Android Design Support Library is mainly used to implement special effects of Material design. The Android Design Support Library includes the following eight controls:

Navigation View -- drawer Navigation

TextInputLayout -- EditText floating label

Floating Action Button -- Floating Action Button

Snackbar -- prompt (similar to Toast)

TabLayout -- Tab

CoordinatorLayout -- Rolling Control

CollapsingToolbarLayout -- foldable Toolbar (effects in Google + and photos)

AppBarLayout -- container AppBar

This article introduces the above controls in different chapters and does not analyze the source code. First, check the Navigation View.

　　Navigation View --Drawer navigation

　　This is a very practical drawer navigation effect. You can directly generate navigation labels through menu resource files, which is also very simple to implement. The effect is shown in:

　　

Procedure:

(1) introduce the design package in build. gradle of the app. This document uses the design package version 23.1.1 as an example.

dependencies {    compile 'com.android.support:design:23.1.1'}

(2) The xml layout file (activity_main.xml) and SlideMenu need to use DrawerLayout.

<Android. support. v4.widget. drawerLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: app = "http://schemas.android.com/apk/res-auto" android: id = "@ + id/drawer_layout" android: layout_width = "match_parent" android: layout_height = "match_parent" android: fitsSystemWindows = "true"> <include layout = "@ layout/include_list_viewpager"/> <! -- Display the layout of the content area --> <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" app: menu = "@ menu/drawer_view"/> </android. support. v4.widget. drawerLayout>

Two important attributes

App: headerLayout -- navigation header Layout
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "192dp" android: background = "? Attr/colorPrimaryDark "android: gravity =" bottom "android: orientation =" vertical "android: padding =" 16dp "android: theme =" @ style/ThemeOverlay. appCompat. dark "> <TextView android: layout_width =" match_parent "android: layout_height =" wrap_content "android: text =" Username "android: textAppearance =" @ style/TextAppearance. appCompat. body1 "/> </LinearLayout>

Drawer_view.xml (focus on how to implement grouping)

<? Xml version = "1.0" encoding = "UTF-8"?> <Menu xmlns: android = "http://schemas.android.com/apk/res/android"> <group android: checkableBehavior = "single"> <! -- Single choice --> <item android: id = "@ + id/nav_home" android: icon = "@ drawable/ic_dashboard" android: title = "Home"/> <item android: id = "@ + id/nav_messages" android: icon = "@ drawable/ic_event" android: title = "Messages"/> <item android: id = "@ + id/nav_friends" android: icon = "@ drawable/ic_headset" android: title = "Friends"/> <item android: id = "@ + id/nav_discussion" android: icon = "@ drawable/ic_forum" android: title = "Discussion"/> </group> <item android: title = "Sub items"> <menu> <item android: icon = "@ drawable/ic_dashboard" android: title = "Sub item 1"/> <item android: icon = "@ drawable/ic_forum" android: title = "Sub item 2"/> </menu> </item> </menu>

(2) declare and use in the code

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        if (navigationView != null) {            navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();                        return true;                    }                });        }

In the onNavigationItemSelected () method, you can obtain each Item in the navigation menu to implement the corresponding functions.

Extension: If you want your navigation menu to be displayed on the status bar, you need to perform the following settings for version 5.0 and later.

../Valuse-v21/styles. xml

<resources>    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">        <item name="android:windowDrawsSystemBarBackgrounds">true</item>        <item name="android:statusBarColor">@android:color/transparent</item>    </style></resources>

Add the following attributes to DrawerLayout:

android:fitsSystemWindows="true"

If you feel that the Navigation View is not strong enough, you can look at MaterialDrawer, the connection is as follows: https://github.com/mikepenz/MaterialDrawer