Android component drawerlayout imitates Netease News v4.4 sideslip menu

summary

Today's blog will record some basic usage of drawerlayout. I think there may be a lot of incomprehension about the usage of drawerlayout, which is also a normal thing, because drawerlayout, as an Android component, was later added by Google in Android under android.support.v4 package. So, what kind of component is drawerlayout? We know that when we use various apps on Android, have we noticed that there is usually a "sideslip menu" on the app home page? For the implementation of sideslip menu, I have introduced it in the previous blog. If you want to know more, please move to:

Android custom control - sideslip menu Android custom control - project integration of open source component slidingmenu

Here, the screenshot of "Netease News" client v4.4 is used to illustrate what the drawerlayout drawer layout looks like.

Well, as you have seen, the effect of Netease News client is obvious. When our fingers slide to the right on the left side of the screen, a drawer menu will pop up from the left and "float" on the main interface. It makes reasonable use of the limited space on the device. Similarly, when our fingers slide to the left on the right side of the screen, a drawer menu will pop up to the left, The user experience effect was good. Before drawerlayout appeared, when we needed to make a sideslip menu, we had to implement one ourselves or use the open source project slidingmenu on GitHub. Maybe Google also saw the power of slidingmenu, so we added drawerlayout in the later version of Android to realize the components with the same functions of slidingmenu, In addition, in order to be compatible with earlier versions, it is added under Android, support.v4 package. Training on drawerlayout: http://developer.android.com/training/implementing-navigation/nav-drawer.html About the drawerlayout API: http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html In addition, I have translated Google's training course. The address is: https://www.oudahe.com/p/26920/

Effect preview

Create drawer layout

The following drawer layout refers to android.support.v4.drawerlayout, which is similar to linealayout, relativelayout and other layouts. Three more layouts are defined in drawerlayout, which are respectively the FrameLayout of the management main interface. This layout is used to display the fragments of interface switching. The following is listview, which is used to display the menu list, and finally a relativelayout, It is used to display the layout on the right. The layout code is as follows:

This layout file demonstrates some important layout features

Initialize drawer list

As mentioned above, because the drawerlayout contains a listview as the sideslip menu in the left column, we need to initialize the drawer list first and adapt the data to the list. The data adapter uses the simplest arrayadapter, and the simulation data is simply defined in RES / values / strings.xml, as follows:

In Java code, first create a mainactivity that inherits android.support.v4.app.fragmentactivity, because you need to switch between fragments later.

Handling navigation click events

When the user selects an item in the drawer list, the system calls onitemclick() on the onitemclicklistener() to setonitemclicklistener() what you do in the onitemclick() method. In the following example, selecting each item will insert a different fragment in the layout of the main content, and pass the contents of the navigation list to the fragment for display, Here are some codes:

Open source material menu integration careful friends may find that there is a menu "dynamic" menu button in the upper left corner of the "Netease News" v4.4 client home page. The display process is like this. When the menu is not opened, three horizontal lines such as "three" will be displayed. When the menu is opened (regardless of the left and right menus), buttons such as "< -" will be displayed, changing constantly, Is this effect a little gorgeous?! Friends who know about Android 5.0 should know that this effect is made by using the material design language newly launched by Android 5.0, so how to imitate this effect? Sorry for being lazy, I have found this effect in Niuniu's GitHub - material menu component, which simulates the material design effect under Android 5.0. Note that Jack Wharton's nineoldandroids animation effect is used in this component.

Material menu home page: https://github.com/balysv/material-menu Nineoldandroids home page: https://github.com/JakeWharton/NineOldAndroids

For the use of material menu, please refer to the demo and instructions on its home page. During integration, you need to download the nineoldandroids export jar and integrate it into the project. Here are some of the codes I use:

In addition, you also need to associate the state of the material menu. You need to override the onpostcreate and onsaveinstancestate methods under the activity:

Add the menu button on the actionbar. In order to simulate the "Netease News" v4.4 client home page as much as possible, I also add a small icon in the upper right corner of the title bar. In order to pop up the right bar menu when clicking this small icon, the implementation method is very simple, For the knowledge of adding navigation on actionbar, you can find some explanations on CSDN or view the source document on the official website of Android developers. Here, I simply define one in main.xml under RES / menu:

After the definition operation is completed, the menu layout needs to be loaded:

Title bar navigation click event handling

The logic of this paragraph is a bit convoluted. In fact, what I do is to ensure that only one menu layout can be displayed on the main interface. When the menu layout on the left is displayed, when the menu layout on the right is opened, the menu layout on the left needs to be hidden; Similarly, if the menu layout on the right is already displayed, you need to open the menu layout on the left. You must first hide the menu layout on the right. In order to determine which layout is to be displayed or closed, I defined showview in the global variable to mark the view to be displayed or closed. If showview = = mmenulistview, it means that the menu layout on the left is to be displayed or hidden. At this time, further judge whether the menu is the marked isdirection of the view mmenulistview_ Left to open or close the left view menu. Similarly, if the right navigation menu is to be displayed or hidden, we need to further judge whether the right navigation has been displayed, so as to make relevant decisions on opening or hiding. The logic here seems to explain a little messy, and the code is posted in fragments, which is not conducive to understanding. If you need further understanding, you might as well continue to look at the following parts. I have posted all the Java code, and the comments are very detailed, which is convenient to understand. It's really not OK. You can also click the download link below the blog to download the source code and run it directly.

All source code

Please download the source code here: http://xiazai.jb51.net/201701/yuanma/AndroidDrawerLayout (jb51.net).rar

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.