Actionbar+drawerlayout realize NetEase News Client homepage

I. Overview

With the continuous updating of the Android version, Google has introduced a growing number of advanced components, using these official components we can easily implement some of the previous needs through complex coding or use of third-party components to achieve the effect, such as Slidingmenu, Sherlockactionbar and so on. Here, we use the official Android components Actionbar and drawerlayout to achieve the results of the NetEase News client home page.

Since both Actionbar and Drawerlayout are later introduced, if a compatible low version is required, the V7 support library must be added to the project. Specific how to add support library here do not repeat, you can refer to the API documentation.

Second, the function realization

Once the project has been created and the V7 Support library is added, first use Drawlayout to complete the first page layout, with the following layout file code:

<Android.support.v4.widget.DrawerLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/drawer_layout"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" >    <LinearLayoutAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:orientation= "vertical" >        <TextViewAndroid:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:gravity= "Center"Android:text= "This is the main interface" />    </LinearLayout>        <includeAndroid:layout_width= "280DP"Android:layout_height= "Match_parent"android:layout_gravity= "End"Layout= "@layout/menu_right_layout"android:clickable= "true" /></Android.support.v4.widget.DrawerLayout>

Drawerlayout itself is a layout control, we can use it as a linear layout or other layout, but the control itself has the sliding function, drawerlayout can divide the interface into three parts, the main display interface, the left sliding interface and the right sliding interface, So how does drawerlayout divide the three parts of the content? Drawerlayout mainly by using the Android:layout_gravity property to determine what part of its child elements, if the property value is start is the left sliding interface, the value of end is the right sliding interface, no layout_ The child element of the gravity property is the primary interface content.

Note If there are many child elements in drawerlayout, and if more than one sub-element has the same Layout_gravity property value, Drawerlayout will display the first child element with the same property value as the corresponding layout interface, and the other child elements will be overwritten. In order to make the layout file readable we'd better drawlayout only three direct sub-elements, dividing the overall layout.

The side sliding part of the drawerlayout, which is transparent by default, needs to add a background to both sides of the layout, and the function can be achieved as follows:

After completing the side pull drawer effect, we continue to add Actionbar. If you are using Actionbar, you only need to inherit actionbaractivity, note that actionbaractivity in the V7 package is required for compatibility with the lower version.

Import android.support.v7.app.ActionBarActivity;  Public class extends actionbaractivity {         @Override         protectedvoid  onCreate (Bundle Savedinstancestate) {                   super. OnCreate (savedinstancestate);                   Setcontentview (r.layout.main_layout);         }}

The complete results are as follows:

Obviously, this effect from the real home is still a lot of difference, then we go step by step implementation, the first through the following code can be implemented to set the logo, background and other content.

//Get ActionbarActionBar =Getsupportactionbar ();//set not to show titleActionbar.setdisplayshowtitleenabled (false);//Set Display logoActionbar.setdisplayshowhomeenabled (true); Actionbar.setdisplayuselogoenabled (true); Actionbar.setlogo (r.drawable.netease_top);//Set Actionbar backgrounddrawable background =getresources (). getdrawable (R.drawable.top_bar_background); actionbar.setbackgrounddrawable (background); Actionbar.setdisplayhomeasupenabled (true);

Write the menu file and add menus for actionbar by overriding the Oncreateoptionsmenu method, as follows

By running, we can find that the menu is not the effect we want, which is due to the design of the Actionbar, the effect on the Android platform with the physical keys and the lower version. So how do we make it work in a uniform way, regardless of the version? Here to provide you with a simple and effective way to modify the menu file, the Extra menu as a submenu of more menus, the modified menu file as follows:

<Menuxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:app= "Http://schemas.android.com/apk/res-auto" >    <ItemAndroid:id= "@+id/action_settings"Android:icon= "@drawable/night_biz_pc_menu_icon"android:orderincategory= "1"Android:title= "@string/app_name"app:showasaction= "Always"/>    <ItemAndroid:id= "@+id/action_btn01"Android:icon= "@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"android:orderincategory= "2"Android:title= "More"app:showasaction= "Always">        <Menu>            <ItemAndroid:id= "@+id/action_btn02"Android:icon= "@drawable/biz_plugin_manage_weather"android:orderincategory= "+"Android:title= "11/13"app:showasaction= "Never"/>    <ItemAndroid:id= "@+id/action_btn03"Android:icon= "@drawable/biz_plugin_manage_offline"android:orderincategory= "+"Android:title= "Offline"app:showasaction= "Never"/>    <ItemAndroid:id= "@+id/action_btn04"Android:icon= "@drawable/biz_plugin_manage_theme"android:orderincategory= "+"Android:title= "Night"app:showasaction= "Never"/>      <ItemAndroid:id= "@+id/action_btn05"Android:icon= "@drawable/biz_plugin_manage_search"android:orderincategory= "+"Android:title= "collect"app:showasaction= "Never"/>      <ItemAndroid:id= "@+id/action_btn06"Android:icon= "@drawable/biz_plugin_manage_qrcode"android:orderincategory= "+"Android:title= "Sweep"app:showasaction= "Never"/>      <ItemAndroid:id= "@+id/action_btn07"Android:icon= "@drawable/biz_plugin_manage_offline"android:orderincategory= "+"Android:title= "Settings"app:showasaction= "Never"/>        </Menu>    </Item></Menu>

The results are as follows:

Finally, using Actionbardrawertoggle to complete the Actionbar and drawerlayout linkage effect, get the Drawerlayout object to set the Drawerlitener listener, listen to its status, The corresponding method of Actionbardrawertoggle is called in the listener's method to complete the linkage effect. Finally, the style file is written to set the height of the Actionbar, the final effect is as follows:

If you want to experience a small partner, you can click the download Project , directly run to see Oh! If you have any questions, you can also post comments!

Jerry Education
Source:http://www.cnblogs.com/jerehedu/
This article is the copyright of Yantai Jerry Education Technology Co., Ltd. and the blog Park is shared, welcome reprint, but without the consent of the author must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

Actionbar+drawerlayout realize NetEase News Client homepage