Emulate Android APP, use Toolbar+drawerlayout+viewpager

First of all, need to use toolbar need to have ANDROID.SUPPORT.V7 package, about his some problems, you can see my previous blog: about V7 Some of the problems and solutions.

Mainly need to download to the V7 package, and then add to his class path, so as to support toolbar some style, and then also need to V7 jar package, we put him under the Lib directory, build path can be.

The approximate frame of the demo:

。

Before we get started, we know a little bit about toolbar, he's the second generation of Actionbar, advocating the use of the new Google Design code, and then talking nonsense.

The main use of toolbar is to use several classes: first, you need to inherit the actionbaractivity under the V7 package, as well as Actionbardrawertoggle, and TOOLBAR,V4 under Drawerlayout package. Then the following is the main analysis:

We use toolbar to define a toolbar layout file, which is defined as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.v7.widget.toolbar xmlns:android= "/http Schemas.android.com/apk/res/android "    xmlns:app=" Http://schemas.android.com/apk/res/com.example.toolbar "    android:id= "@+id/toolbar"    android:layout_width= "match_parent"    android:layout_height= "wrap_content "    android:background="? attr/colorprimary "    android:minheight="? attr/actionbarsize "    app:popuptheme=" @style/themeoverlay.appcompat.light "    app:theme=" @style/themeoverlay.appcompat.actionbar "></ Android.support.v7.widget.toolbar>

His theme theme is a cool spin that resembles an informed click and then shows the menu item.

Then we also need to define a drawerlayout layout file, he is used with toolbar, my own attempt is no longer drawerlayout the layout file using include, so may be more bloated, he is included in the left menu, as well as the content interface, My content interface uses the Viewpager implementation. The code is as follows:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:orien tation= "vertical" tools:context= "com.example.toolbar.MainActivity" > <!--introduced toolbar--<include Layo ut= "@layout/toolbar"/> <!--introduced drawerlayout--<android.support.v4.widget.drawerlayout android:i  D= "@+id/drawer" android:layout_width= "match_parent" android:layout_height= "Match_parent" > <!-- Content interface--<linearlayout android:layout_width= "match_parent" android:layout_height= "MATC H_parent "android:orientation=" vertical "> <linearlayout android:layout_width="                Match_parent "android:layout_height=" 40DP "android:background="? Attr/colorprimary "      Android:gravity= "Center_horizontal"          android:orientation= "Horizontal" > <textview android:id= "@+id/text_page_                    XX "android:layout_width=" wrap_content "android:layout_height=" Match_parent "                    Android:layout_gravity= "Center_horizontal|bottom" android:layout_marginright= "25DP" android:layout_margintop= "7DP" android:text= "Cantonese Opera Appreciation" android:textcolor= "#f Fffff "android:textsize=" 17SP "android:textstyle=" bold "/> <tex                    TView android:id= "@+id/text_page_01" android:layout_width= "Wrap_content"                    android:layout_height= "Match_parent" android:layout_gravity= "Center_horizontal|bottom" android:layout_marginleft= "25DP" android:layout_margintop= "7DP" android:t              ext= "Cantonese Opera News"      Android:textcolor= "#c7cbd6" android:textsize= "17SP" android:textstyle= "bold"/ > </LinearLayout> <android.support.v4.view.viewpager android:id= "@+id/id_            PageAdapter "android:layout_width=" match_parent "android:layout_height=" Match_parent "> </android.support.v4.view.ViewPager> </LinearLayout> <!--slide Menu contents--< LinearLayout android:id= "@+id/drawer_view" android:layout_width= "Wrap_content" Android:la yout_height= "Match_parent" android:layout_gravity= "Start" android:background= "#33cc99" an Droid:focusable= "true" android:orientation= "vertical" > <textview android:id= "@                +id/id_textview01_menu "android:layout_width=" 200DP "android:layout_height=" Wrap_content " Android:layOut_marginbottom= "30DP" android:layout_marginleft= "5DP" android:focusable= "true"            android:text= "Actioin One" android:textcolor= "#000000" android:textsize= "20sp"/>                <textview android:layout_width= "200DP" android:layout_height= "Wrap_content" Android:layout_marginbottom= "30DP" android:layout_marginleft= "5DP" Android:focusab Le= "true" android:focusableintouchmode= "true" android:text= "action," Andro Id:textcolor= "#000000" android:textsize= "20sp"/> <textview android:layout_                Width= "200DP" android:layout_height= "wrap_content" android:layout_marginleft= "5DP"                Android:focusable= "true" android:text= "action three" android:textcolor= "#000000" Android:textsiZe= "20sp"/> </LinearLayout> </android.support.v4.widget.DrawerLayout></LinearLayout> 

Then, I was showing two viewpager on the home page, their layout files are similar, here posted a

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" match_parent "    android:layout_height=" match_parent "    android:gravity= "Center"    android:orientation= "vertical" >    <textview        android:layout_width= "Wrap_content"        android:layout_height= "Wrap_content"        android:text= "first tab"        android:textsize= "40sp"        android: Textstyle= "Bold"        android:layout_gravity= "center"/></linearlayout>

Then, an important part of using toolbar is that we need to suppress actionbar, the most straightforward way is to use the Noactionbar theme in the definition of the subject of our manifest file.

So the content of the style file that we define is:

<resources xmlns:android= "Http://schemas.android.com/apk/res/android" >    <!--He is the theme style of the app, Using Noactionbar--    <style name= "Appbasetheme" parent= "Theme.AppCompat.Light.NoActionBar" >        <! --Toolbar (Actionbar) Color--        <item name= "colorprimary" > #4876FF </item>        <!--status bar color--        <item name= "Colorprimarydark" > #3A5FCD </item>        <!--window background color-        <item name= " Android:windowbackground "> @android:color/white</item>    </style></resources>

Note: There are only two places in his layout

One in the Res/values/styles.xml.

Two in the/res/values-v21/styles.xml

And our targetsdkversion should also be set to 21 or above, so as to ensure that we can properly use toolbar

Then the main code for Java: Post the Code First:

Import Java.util.arraylist;import java.util.list;import android.content.context;import android.content.Intent; Import Android.os.bundle;import Android.support.v4.view.pageradapter;import Android.support.v4.view.ViewPager; Import Android.support.v4.view.viewpager.onpagechangelistener;import android.support.v4.widget.DrawerLayout; Import Android.support.v7.app.actionbaractivity;import Android.support.v7.app.actionbardrawertoggle;import Android.support.v7.widget.toolbar;import Android.view.layoutinflater;import Android.view.view;import Android.view.view.onclicklistener;import Android.view.viewgroup;import android.widget.textview;/** * @author Administrator * */@SuppressWarnings ("deprecation") public class Mainactivity extends actionbaractivity implements Onclicklistener{private drawerlayout mdrawerlayout;private actionbardrawertoggle mDrawerToggle;private Toolbar Mtoolbar;private list<view> data;private viewpager page;private TextView text_page_00;private TextView text_page _01;private TExtview id_textview01_menu; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate ( Savedinstancestate); Setcontentview (R.layout.activity_main); Initviews ();} private void Initviews () {Mtoolbar = (Toolbar) Findviewbyid (R.id.toolbar); Mtoolbar.settitle ("Lingnan elegance"); Setsupportactionbar (Mtoolbar); Getsupportactionbar (). Setdisplayhomeasupenabled (TRUE);/* Findview */mDrawerLayout = (drawerlayout) Findviewbyid (r.id.drawer); mdrawertoggle = new Actionbardrawertoggle (this, mdrawerlayout, MToolbar, R.string.drawer_open, R.string.drawer_close); Mdrawertoggle.syncstate (); Mdrawerlayout.setdrawerlistener ( Mdrawertoggle);d ata = new arraylist<view> ();p age = (Viewpager) This.findviewbyid (r.id.id_pageadapter); Page.setonpagechangelistener (New Myonpagechangelistener ());//Listener Slide event Layoutinflater inflater = (layoutinflater) Getsystemservice (Context.layout_inflater_service); View view_00 = inflater.inflate (r.layout.fragment_01, NULL); View view_01 = inflater.inflate (r.layout.fragment_02, NULL);d ATA.Add (view_00);d ata.add (view_01);//Added two viewtext_page_00 = (TextView) This.findviewbyid (r.id.text_page_00); text_page _01 = (TextView) This.findviewbyid (r.id.text_page_01); Text_page_00.setonclicklistener (this); text_page_01. Setonclicklistener (this); Id_textview01_menu = (TextView) This.findviewbyid (r.id.id_textview01_menu); id_textView01 _menu.setonclicklistener (this);//Initialize adapter Pageradapter adapter = new Pageradapter () {@Overridepublic void Destroyitem ( ViewGroup container, int position, object object) {Container.removeview (Data.get (position));} @Overridepublic Object Instantiateitem (viewgroup container, int position) {View view = Data.get (position); Container.addview (view); return view;} @Overridepublic boolean isviewfromobject (View arg0, Object arg1) {return arg0 = = arg1;} @Overridepublic int GetCount () {return data.size ();}}; Page.setadapter (Adapter);p Age.setcurrentitem (0);} @Overridepublic void OnClick (View v) {resettextcolor (); switch (V.getid ()) {case r.id.text_page_00://after the Cantonese opera appreciation, Set Viewpager to the first page, his font is white, Cantonese operaThe news font is gray Page.setcurrentitem (0); Text_page_00.settextcolor (Getresources (). GetColor (R.COLOR.TEXT1)); break;case r.id.text_page_01://Press the Cantonese Opera News, set Viewpager as the second page, his font is white, Cantonese opera appreciation of the font is gray Page.setcurrentitem (1); Text_page_01.settextcolor (Getresources (). GetColor (R.COLOR.TEXT1)); Break;case r.id.id_textview01_menu://is the ability to test the menu on the left. He will start a new activityintent intent = intent (this, otheractivity.class); startactivity (intent); This.finish (); break;}} /** * Reset font color */private void Resettextcolor () {Text_page_00.settextcolor (Getresources (). GetColor (R.COLOR.TEXT2)); text _page_01.settextcolor (Getresources (). GetColor (R.COLOR.TEXT2));} /** * This is similar to listening to Viewpager when the sliding occurs when using * @author Administrator * */private class Myonpagechangelistener implements Onpagechange listener{@Overridepublic void onpagescrollstatechanged (int arg0) {} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {}//When the slide stops, we need to set the color of the font @overridepublic void onpageselected (int arg0) {resettextcolor (); if (arg0 = = 0) { Text_page_00.settextcolor (Getresources (). GetColor (R.COLOR.TEXT1));} Else{text_page_01.settextcolor (Getresources (). GetColor (R.COLOR.TEXT1));}}}

First his home page shows toolbar, then will contain two TextView, click can switch (Viewpager), and then, click on the top left menu will show a series of menu items, click the first start a new activity (I only set the first menu item as a test , the other is not, the interface is not optimized).

In this mainactivity, what we need to do is when Viewpager sliding, change the font color, click on the font can switch Viewpager, his own color will change accordingly.

Otheractivity of Startup

Import Android.os.bundle;import Android.support.v7.app.actionbaractivity;import android.widget.textview;@ Suppresswarnings ("deprecation") public class Otheractivity extends actionbaractivity{@Overrideprotected void onCreate (Bundle savedinstancestate) {//TODO auto-generated method Stubsuper.oncreate (savedinstancestate); TextView TV = new TextView (this), Tv.settext ("Liweijie"); Setcontentview (TV);}}

Film: The first one is open first, the second generation is to click on the Cantonese Opera News or the right to drag Viewpager

Refer to blog:http://blog.csdn.net/jdsjlzx/article/details/41441083 and http://www.jcodecraeer.com/a/anzhuokaifa/ Androidkaifa/2015/0303/2522.html

Emulate Android APP, use Toolbar+drawerlayout+viewpager