The "Android Interface implementation" uses Actionbar and drawerlayout pure native controls for the slide bar and Sliding tab interface

Reprint Please specify source: http://blog.csdn.net/zhaokaiqiang1992

In the previous article, we used third-party open source controls, such as Slidingmenu and Pagerslidingtabstrip, to implement the Slip bar and Slide tab interface. But in the SUPPORT-V4 package, the native slide bar control drawerlayout is provided, and the tab effect is sliding, which we can do with tab on Viewpager and Actionbar. So in today's article, we'll show you how to integrate Drawerlayout with Actionbar, using pure native controls to achieve the effect we want.

First, let's look at the final implementation effect.

In addition to the implementation of the slide bar and can slide tab page, but also by adding the Actionbar on the menu and Shareactionprovider, you can achieve a simple sharing function, below, to introduce the implementation of the specific process.

First look at the directory structure of the entire project

Mainactivity is the main interface, Menuadapter is the menu of the ListView adapter, Placeholderfragment is the subclass of fragment, The Sectionspageradapter is a Viewpager adapter.

The files in the Res folder are the corresponding layout files, and Main is the Actionbar menu layout.

First, if we want to use drawerlayout, we have to declare it in the XML layout

<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 ">    <android.support.v4.view.viewpager        android:id=" @+id/pager "        android:layout_width=" Match_parent "        android:layout_height=" match_parent "/>    <listview        android:id=" @+id/left_drawer "        android:layout_width= "240DP"        android:layout_height= "match_parent"        android:layout_gravity= "start "        android:background=" #ccffffff "        android:choicemode=" Singlechoice "        android:divider=" @android: Color/transparent "        android:dividerheight=" 0DP "/></android.support.v4.widget.drawerlayout>

The above code is the main interface layout code, Drawerlayout must be used as the root layout, in which we nested a viewpager to implement the tab page sliding, note that the following ListView is the layout of the slide bar, We can, of course, use other layouts to achieve this. If we want to control the slide-out direction of the slide bar, we should use the Layout_gravity property to set it, for example, Left/right or Start/end. If we want to use a drawerlayout layout then our main layout must be the first child control, and the width and height must be match_parent, such as the use of the viewpager above us. The layout of our skid bar must be immediately behind the main layout and set the direction of the slide out through the layout_gravity. Usually we set a fixed size to the width of the skid bar, and the height is set to match_parent.

In order to bind drawerlayout to the activity we need and define related event callbacks, we need to define a Actionbardrawertoggle object to do the work, for example, the following code implements the function we want

Bind the Drawerlayout layout to the current interface and set the Click event Mdrawertoggle = new Actionbardrawertoggle (this,/* host Activity */mdrawerlayout,/* The Drawerlayout object */r.drawable.ic_drawer that needs to be bound,/* is used to replace the upward picture */r.string.drawer_open,/* "Open drawer" description for Accessibility */r.string.drawer_close/* "Close drawer" description for accessibility */) {public void ondrawerclosed (Vie W view) {//Creates call to Onprepareoptionsmenu () Invalidateoptionsmenu ();} public void ondraweropened (View drawerview) {//Creates call to Onprepareoptionsmenu () Invalidateoptionsmenu ();}};/ /Binding Listener Mdrawerlayout.setdrawerlistener (Mdrawertoggle);

It is worth noting that in the ondrawerclosed () and ondraweropened () methods, there is no direct drawerlayout open and close operation, but the Invalidateoptionsmenu () method is called, Let the system call Onprepareoptionsmenu (). So, how does the slide bar open and close, exactly how it is controlled?

We can control it in the Onoptionsitemelected method, like this

@Overridepublic boolean onoptionsitemselected (MenuItem Item) {//handles the open close effect of the slide bar if (mdrawertoggle.onoptionsitemselected (item)) {return true;} Handle the Actionbar menu's Click event Switch (Item.getitemid ()) {//Editcase R.id.action_edit:toast.maketext (This, "edit", Toast.length_short). Show (), Return true;//morecase r.id.action_more:toast.maketext (This, "more", Toast.length_short ). Show (); return true;} return super.onoptionsitemselected (item);}

after you've set up the slide bar, set tab below. The Sliding tab interface is actually made up of Viewpager and actionbar.tab, so we need to set it separately.

Viewpager use everyone should be very familiar with, need to set up a adapter, and then in the Fragment page switch operation, the following emphasis, how to combine the tab and Viwqpager together.

First, we need to call the following code to adjust the navigation mode to tab

Initialization

ActionBar = Getactionbar ();

Set the navigation mode to tab mode

ActionBar. Setnavigationmode (ActionBar. Navigation_mode_tabs);

once set up, we can assemble the

Initialize the Viewpager adapter object msectionspageradapter = new Sectionspageradapter (Getsupportfragmentmanager ()); Mviewpager.setadapter (msectionspageradapter);//when sliding between different fragment, change the selected Tab, we can also use Actionbar.tab#select () to complete, If we have tab references Mviewpager.setonpagechangelistener (new Viewpager.simpleonpagechangelistener () {@Overridepublic void onpageselected (int position) {Actionbar.setselectednavigationitem (position);}}); /Add tabfor (int i = 0; i < Msectionspageradapter.getcount (); i++) {Actionbar.addtab (Actionbar.newtab ()) According to the number of interfaces. SetText ( Msectionspageradapter.getpagetitle (i)). Settablistener (this));}

If you want to change the tab's current selection after sliding, we need to set the selected item in onpageselected according to position, if we want to click Tab,viewpager to switch to the corresponding interface, we need to be in the current activity , implement the Actionbar.tablistener interface, and then, in the callback interface below, switch to

@Overridepublic void ontabselected (Actionbar.tab tab,fragmenttransaction fragmenttransaction) {//handles Tab clicks, Viewpager slide to the corresponding position Mviewpager.setcurrentitem (tab.getposition ());} @Overridepublic void ontabunselected (Actionbar.tab tab,fragmenttransaction fragmenttransaction) {} @Overridepublic void ontabreselected (Actionbar.tab tab,fragmenttransaction fragmenttransaction) {}

Following these steps, we have achieved the desired effect with pure native controls. Regarding the use of the menu and Sharetionprovider on Actionbar, this article does not introduce too much, and sometimes it is introduced separately.

Project's GitHub address: Https://github.com/ZhaoKaiQiang/actionbartabs

The "Android Interface implementation" uses Actionbar and drawerlayout pure native controls for the slide bar and Sliding tab interface