ActionBar + DrawerLayout implement the homepage of Netease news client, drawerlayout

ActionBar + DrawerLayout implement the homepage of Netease news client, drawerlayout

I. Overview

With the constant updates of the android version, google has launched more and more advanced components. Using these official components, we can easily implement the effects that previously had to be achieved through complex coding or using third-party components, such as slidingmenu and sherlockactionbar. Here, we use the official android components ActionBar and DrawerLayout to implement the Netease news client homepage.

Because ActionBar and DrawerLayout were both launched later, to be compatible with earlier versions, you must add the v7 support library to the project. You can refer to the api documentation for details on how to add a support library here.

Ii. function implementation

After the project is created and the v7 support library is added, use DrawLayout to complete the homepage layout. The layout file encoding is as follows:

<Android. support. v4.widget. drawerLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: id = "@ + id/drawer_layout" android: layout_width = "match_parent" android: layout_height = "match_parent"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "vertical"> <TextView android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center" android: text = "this is the main interface"/> </LinearLayout> <include android: 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 is a layout control, which can be used in the same way as linear layout or other layout. However, this control has a slide function, and DrawerLayout can divide the interface into three parts, the main display interface, the sliding interface on the left and the sliding interface on the right are displayed. How does DrawerLayout divide the three parts? DrawerLayout mainly uses the android: layout_gravity attribute to determine the content of its child element. If the attribute value is start, it indicates the left-side sliding interface, and if the value is end, it indicates the right-side sliding interface, the child element without the layout_gravity attribute is the main interface content.

Note: if there are many child elements in DrawerLayout and multiple child elements have the same layout_gravity attribute value, DrawerLayout displays the first child element with the same attribute value as the corresponding layout interface, other child elements will be overwritten. To read the layout file, we 'd better deploy only three direct child elements in DrawLayout to divide the overall layout.

The sliding part of the DrawerLayout side is transparent by default. You need to add a background to the layout of both sides. The running function has the following effect:

After the Side Pull drawer effect is completed, we continue to add ActionBar. If you use ActionBar, you only need to inherit ActionBarActivity. Note that you need to use ActionBarActivity in the v7 package to be compatible with lower versions.

import android.support.v7.app.ActionBarActivity;public class MainActivity extends ActionBarActivity {         @Override         protected void onCreate(Bundle savedInstanceState) {                   super.onCreate(savedInstanceState);                   setContentView(R.layout.main_layout);         }}

The result is as follows:

Obviously, this effect is much different from the real homepage. Next we will implement it step by step. First, we can use the following code to set the logo, background, and other content.

// Obtain ActionBaractionBar = getSupportActionBar (); // set the title actionBar not to be displayed. setDisplayShowTitleEnabled (false); // set to display logoactionBar. setDisplayShowHomeEnabled (true); actionBar. setDisplayUseLogoEnabled (true); actionBar. setLogo (R. drawable. netease_top); // sets the actionbar background Drawable background = getResources (). getDrawable (R. drawable. top_bar_background); actionBar. setBackgroundDrawable (background); actionBar. setDisplayHomeAsUpEnabled (true );

Compile the menu file and add a menu to the actionbar by rewriting the onCreateOptionsMenu method. The effect is as follows:

Through running, we can find that the menu is not what we want, which is caused by the actionbar design. It is displayed on the android platform with physical buttons and earlier versions. So how can we make it consistent in any version? Here we provide you with a simple and effective method to modify the menu file and use the excess menu as the sub-menu of More menus. The modified menu file is as follows:

<Menu xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: app = "http://schemas.android.com/apk/res-auto"> <item android: id = "@ + id/action_settings" android: icon = "@ drawable/night_biz_pc_menu_icon" android: orderInCategory = "1" android: title = "@ string/app_name" app: showAsAction = "always"/> <item android: id = "@ + id/action_btn01" android: icon = "@ drawable/abc_ic_menu_moreoverflow_mtrl_alpha" android: orderInCategory = "2" android: title = "more" app: showAsAction = "always"> <menu> <item android: id = "@ + id/action_btn02" android: icon = "@ drawable/biz_plugin_manage_weather" android: orderInCategory = "100" android: title = "11/13" app: showAsAction = "never"/> <item android: id = "@ + id/action_btn03" android: icon = "@ drawable/biz_plugin_manage_offline" android: orderInCategory = "100" android: title = "offline" app: showAsAction = "never"/> <item android: id = "@ + id/action_btn04" android: icon = "@ drawable/biz_plugin_manage_theme" android: orderInCategory = "100" android: title = "" app: showAsAction = "never"/> <item android: id = "@ + id/action_btn05" android: icon = "@ drawable/biz_plugin_manage_search" android: orderInCategory = "100" android: title = "collect" app: showAsAction = "never"/> <item android: id = "@ + id/action_btn06" android: icon = "@ drawable/biz_plugin_manage_qrcode" android: orderInCategory = "100" android: title = "scan" app: showAsAction = "never"/> <item android: id = "@ + id/action_btn07" android: icon = "@ drawable/biz_plugin_manage_offline" android: orderInCategory = "100" android: title = "" app: showAsAction = "never"/> </menu> </item> </menu>

The running effect is as follows:

Finally, use ActionBarDrawerToggle to complete the interaction between actionbar and drawerlayout, obtain the DrawerLayout object to set the DrawerLitener listener for it, listen to its status, and call the corresponding methods of ActionBarDrawerToggle in each method in the listener to complete the Interaction Effect. Finally, write a style in the style file to set the height of the actionbar. The final effect is as follows:

 

If you want to experience it yourself, you can click to download the project and run it directly!