Android 5.X Toolbar + DrawerLayout implement drawer menu

Android 5.X Toolbar + DrawerLayout implement drawer menu

Preface

? A Toolbar added by android5.X, which is more flexible and controllable than ActionBar. Due to the poor flexibility of the previous ActionBar, google gradually uses Toolbar to replace ActionBar, so the Toolbar can also be called a super ActionBar.

This article does not detail the use (customization) of the ToolBar. It mainly introduces an example of the use of the Toolbar, that is, the use of the Toolbar and DrawerLayout to implement the drawer menu.

To use these two controls, you need to introduce the corresponding library dependency:

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:design:23.0.1'}

1. layout file of Toolbar

Include_toolbar.xml

The Toolbar Control is similar to other controls. You must note that the Toolbar in the v7 extension package is referenced, rather than the Toolbar that comes with the system, so that it can be compatible with devices below v21.

2. Add Action menu

Menu items are usually placed in an xml file in the menu folder.

Menu_main.xml

The previous ActionBar also needs to use this menu file to render its Action menu. The same is true for Toolbar.

With the menu layout file, you also need to initialize the menu in the Code so that the Toolbar will display these Action menus (overrideonCreateOptionsMenu()Method ):

/*** You must override this method to create a menu. Otherwise, the Menu will not be displayed in the Toolbar * @ param menu * @ return */@ Overridepublic boolean onCreateOptionsMenu (menu Menu) {getMenuInflater (). inflate (R. menu. menu_main, menu); return true ;}

3. activity main layout File

Activity_main.xml

  
      
               
   <Framelayout android: id = "@ + id/fl_containor" android: layout_height = "match_parent" android: layout_width = "match_parent"> </framelayout>
           
               
                
            
       
  

4. Code initialization Toolbar

@ NonNull private void initToolbar () {mToolbar = (Toolbar) findViewById (R. id. toolbar); mToolbar. setLogo (R. mipmap. ic_launcher); mToolbar. setTitle ("Main title"); mToolbar. setSubtitle ("subtitle ");//... // This method is very important and cannot be minimized. Replace the toolbar with the ActionBar setSupportActionBar (mToolbar );}

Note: Make sure to callsetSupportActionBar()Replace the Toolbar with the ActionBar, and set the topic of the current Activity to NoActionBar.

5. Bind the Toolbar to the DrawerLayout status.

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);drawerToggle.syncState();mDrawerLayout.setDrawerListener(drawerToggle);

6. initialize the content View

Private void initContentView () {Fragment fragment = new ContentFragment (); Bundle bundle = new Bundle (); bundle. putString ("title", "Homepage"); fragment. setArguments (bundle); mFm. beginTransaction (). replace (R. id. fl_containor, fragment ). commit ();}

ContentFragment. java

package com.example.lt.toolbar;import android.app.ActionBar;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by lt on 2016/3/16. */public class ContentFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle bundle) {        TextView textView = new TextView(getActivity());        if(getArguments()!=null){            String title = getArguments().getString("title");            textView.setText(title);            textView.setGravity(Gravity.CENTER);            textView.setLayoutParams(new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));        }        return textView;    }}

7. initialize the drawer menu

Private void initLeftMenu () {ListView menuList = (ListView) findViewById (R. id. lv_menu); menuList. setAdapter (new ArrayAdapter
  
   
(This, android. r. layout. simple_list_item_1, new String [] {"Homepage", "news", "personal Center"}); menuList. setOnItemClickListener (new AdapterView. onItemClickListener () {@ Override public void onItemClick (AdapterView
   Parent, View view, int position, long id) {Fragment fragment = new ContentFragment (); Bundle bundle = new Bundle (); bundle. putString ("title", (TextView) view ). getText (). toString (); fragment. setArguments (bundle); mFm. beginTransaction (). replace (R. id. fl_containor, fragment ). commit (); mDrawerLayout. closeDrawer (Gravity. LEFT );}});}
  

A ListView is used to render the drawer menu and set the click event for replacing the content view on the right after clicking.

Complete code:

Package com. example. lt. toolbar; import android. OS. bundle; import android. support. annotation. nonNull; import android. support. design. widget. floatingActionButton; import android. support. design. widget. snackbar; import android. support. v4.app. fragment; import android. support. v4.app. fragmentManager; import android. support. v4.widget. drawerLayout; import android. support. v7.app. actionBarDrawerToggle; import android. support. v7.app. appCompatActivity; import android. support. v7.widget. toolbar; import android. view. gravity; import android. view. menuInflater; import android. view. view; import android. view. menu; import android. view. menuItem; import android. widget. adapterView; import android. widget. arrayAdapter; import android. widget. listView; import android. widget. textView; import android. widget. toast; public class MainActivity extends AppCompatActivity {private FragmentManager mFm; private DrawerLayout mDrawerLayout; private Toolbar mToolbar; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); mFm = getsuppfrfragmentmanager (); setContentView (R. layout. activity_main); initToolbar (); mDrawerLayout = (DrawerLayout) findViewById (R. id. drawerLayout); ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle (this, mDrawerLayout, mToolbar, R. string. open, R. string. close); drawerToggle. syncState (); mDrawerLayout. setDrawerListener (drawerToggle); initLeftMenu (); initContentView () ;}@ NonNull private void initToolbar () {mToolbar = (Toolbar) findViewById (R. id. toolbar); mToolbar. setLogo (R. mipmap. ic_launcher); mToolbar. setTitle ("Main title"); mToolbar. setSubtitle ("subtitle"); // This method is very important and cannot be omitted. Replace the toolbar with the ActionBar setSupportActionBar (mToolbar);} private void initContentView () {Fragment fragment = new ContentFragment (); Bundle bundle = new Bundle (); bundle. putString ("title", "Homepage"); fragment. setArguments (bundle); mFm. beginTransaction (). replace (R. id. fl_containor, fragment ). commit ();} private void initLeftMenu () {ListView menuList = (ListView) findViewById (R. id. lv_menu); menuList. setAdapter (new ArrayAdapter
  
   
(This, android. r. layout. simple_list_item_1, new String [] {"Homepage", "news", "personal Center"}); menuList. setOnItemClickListener (new AdapterView. onItemClickListener () {@ Override public void onItemClick (AdapterView
   Parent, View view, int position, long id) {Fragment fragment = new ContentFragment (); Bundle bundle = new Bundle (); bundle. putString ("title", (TextView) view ). getText (). toString (); fragment. setArguments (bundle); mFm. beginTransaction (). replace (R. id. fl_containor, fragment ). commit (); mDrawerLayout. closeDrawer (Gravity. LEFT) ;}};}/ *** you must override this method to create a menu, otherwise, the menu will not be displayed in the Toolbar * @ param Menu * @ return */@ Override public boolean onCreateOptionsMenu (menu) {getMenuInflater (). inflate (R. menu. menu_main, menu); return true ;}}
  

Demo of running effect:

This article introduces a common drawer menu with animation effects by using Toolbar + DrawerLayout. For more detailed usage and style customization of Toolbar, refer to the official documentation, for more information, see the following article.