The use of ToolBar and DrawerLayout enables the opening and closing of the side bar drawer, toolbardrawerlayout

The use of ToolBar and DrawerLayout enables the opening and closing of the side bar drawer, toolbardrawerlayout

1. You can see the corresponding position represented by color attributes such as textColorPrimary, colorPrimary, colorPrimaryDark, and navigationBarColor, as shown in figure

 

 

 

2. the specific attributes are in the res style. xml, for example, in Android. in Manifest, you need to change theme to the corresponding AppTheme, as shown in (note that you need to select the topic of NoActionBar as the parent class, because we do not need to use ActionBar, but use ToolBar instead)

 

 

 

3. Declare the ToolBar in the main xml file activity_main.xml, and use the toolBar in the v7 library, android. support. v7.widget. ToolBar.

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />

In addition, you need to bind the toolBar in mainActivity.

Setsuppactionactionbar (toolbar );

 

4. To add menu items in the ToolBar, you need to use menu. xml to create the menu file in layout as the xml file of the ToolBar Control,

 

 

In addition, you need to bind the menu to the custom Menu xml file by using the overload function OnCreateOptionsMenu (menu ).

 

 

 

 

The item in the figure corresponds to a label in a ToolBar. Note that showAsAction must be called in the app space (So app = "http://schemas.android.com/apk/res-auto" is added at the beginning of menu "), if this attribute is set to always, it is the display icon, and if it is never, it is not the display icon. Only More is displayed, as shown in

The two white icons on the right are the first two icons, and the third icon is hidden in the rightmost three menu because of its showAsAction: never attribute.

 

 

 

 

The menu on the left is DrawerLayout. The drawer effect is as follows: custom_drawerlayout.xml. DrawerLayout must have at least two layout S. The first layout is the main layout, that is, all the locations below the ToolBar.

The second layout is a hidden sidebar, mainly based on ListView. In this case, gravity = "start" is equivalent to left, which indicates that it is opened from the left.

<? Xml version = "1.0" encoding = "UTF-8"?>
<Android. support. v4.widget. DrawerLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: id = "@ + id/dl_left"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent">
<! -- The remaining layout of the main interface is as follows -->
<LinearLayout
Android: layout_width = "match_parent"
Android: layout_height = "match_parent">
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: text = "Hello World"/>
</LinearLayout>
<! -- Layout after the drawer is opened, that is, the layout of the ListView -->
<LinearLayout
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: background = "# fff"
Android: layout_gravity = "start">
<ListView
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: id = "@ + id/lv_left_menu"
Android: divider = "@ null">
</ListView>
</LinearLayout>
</Android. support. v4.widget. DrawerLayout>
Certificate ------------------------------------------------------------------------------------------------------------------------------------------
Finally, you need to put custom_drawerlayout as a component in the activity_main.xml file.

<include layout="@layout/custom_drawerlayout"/>

To convert the three bars of the arrow in the left menu, you need to call the ActionBarToggle switch, which is used to control the switch in the upper left corner to open and close the drawer.

 

The following four steps are required (ActionBarDrawerToggle can listen to Drawer Opening and closing events and can be considered as a subclass of DrawerListener)
Getsuppactionactionbar (). setDisplayHomeAsUpEnabled (true); // Add a returned icon to the left of the icon in the upper left corner.

MDrawerToggle = new ActionBarDrawerToggle (this, mDrawerLayout, toolbar, R. string. drawer_open, R. string. drawer_close );
// Declare the mDrawerToggle object. The R. string. open and R. string. close objects can be replaced by "open" and "close ".

MDrawerToggle. syncState (); // implement arrow and three bar pattern switching and drawer pulling Synchronization

MDrawerLayout. setDrawerListener (mDrawerToggle); listener implements the opening and closing of the sidebar, that is, the closing and opening of the drawer

Note the following two functions (trigger functions for Drawer Opening and Closing ):
These two functions are useless here. If you need to change the Title of the ToolBar when the drawer is closed, you can use these two functions to change the Title of the ToolBar.

MDrawerToggle = new ActionBarDrawerToggle (this, // mDrawerLayout, // R. drawable. ic_drawer, // R. string. drawer_open, // R. string. drawer_close) {// @ Override public void onDrawerOpened (View drawerView) {super. onDrawerOpened (drawerView); getActionBar (). setTitle (Please select); // set the invalidateOptionsMenu () of the actionBar text; // Call onPrepareOptionsMenu ()} // @ Override public void onDrawerClosed (View drawerView) when it is disabled) {super. onDrawerClosed (drawerView); getActionBar (). setTitle (mTitle); invalidateOptionsMenu (); // re-draw the menu item above the actionBar}
};
---------------------------------------- Here is the sad line of Cc --------------------------------------------------------------------------------------

The following functions capture the item click event in the ToolBar:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.item_search:
            Toast.makeText(this,"Search item has been selected",Toast.LENGTH_SHORT).show();
            break;
        case R.id.item_share:
            Toast.makeText(this,"Share item has been selected",Toast.LENGTH_SHORT).show();
            break;
        case R.id.item_more:
        Toast.makeText(this,"More item has been selected",Toast.LENGTH_SHORT).show();
        break;
    }
    return super.onOptionsItemSelected(item);
}