Android Typical interface design (6)--actionbar tab+viewpager+fagment for sliding navigation

First, the problem description

In the Android typical interface design article, the implementation of a typical sliding navigation interface, in fact, the use of Actionbar can also easily achieve this effect, or even similar to the typical Android interface design (3) of the dual navigation effect. Visible Actionbar is still relatively strong, the key to go into, flexible use, the following we use Actionbar to achieve the effect:

Second, the characteristics of this case

1, compatible with the low version

2, using Actionbar split design (split)

3. tab using Custom View

4, combined with Viewpager to achieve sliding navigation

Third, the code explanation:

　　1. Add the V7 compatibility package to the project

To be backwards compatible with Android-support-v7-appcompat that requires the inclusion of the V7 Compatibility Pack in the project and create Mainactivity, inherit actionbaractivity

public class Mainactivity extends actionbaractivity implements tablistener,onpagechangelistener{        protected void OnCreate (Bundle savedinstancestate) {            super.oncreate (savedinstancestate);            Setcontentview (r.layout.activity_main);            Initactionbar ();            Initviewpager ();        }        ... }

Initactionbar and Intviewpager are called in the Oncreeate method, respectively, to initialize Actionbar and initialize Viewpager.

　　2. Initactionbar () Code: Initialize Actionbar

private void Initactionbar () {        actionbar=super.getsupportactionbar ();        Actionbar.setdisplayshowhomeenabled (true);        Actionbar.setdisplayhomeasupenabled (true);        Actionbar.seticon (R.drawable.sun);        Actionbar.settitle ("Two mobile phone");        Set the navigation mode to TABS way        Actionbar.setnavigationmode (actionbar.navigation_mode_tabs);        Create and Configure Tab        Createtab (R.layout.nav, R.DRAWABLE.ICON_HOME_WEIXIU_BG, "hotspot Device");        Createtab (R.layout.nav, R.DRAWABLE.ICON_HOME_ZZJ_BG, "excavator");        Createtab (R.layout.nav, R.DRAWABLE.ICON_HOME_SHAREPRO_BG, "loader");    }

Createtab Method:

private void Createtab (int layout,int imgid,string title) {        View view=layoutinflater.from (this). Inflate (Layout, NULL);        ((TextView) View.findviewbyid (R.id.tvtitle)). SetText (title);        ((ImageView) View.findviewbyid (R.id.ivnav)). Setimageresource (Imgid);        Tab Tab=actionbar.newtab (). Setcustomview (view)//Custom View                . Settablistener (this);        Actionbar.addtab (tab);    }

Nav.xml:tab layout file to achieve the effect of icon above title

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Wrap_ Content "    android:layout_height=" wrap_content "android:padding=" 2DP ">    <imageview        android:id=" @ +id/ivnav "        android:layout_width=" 20DP "        android:layout_height=" 20DP "        android:scaletype=" Centerinside "        android:layout_alignparenttop=" true "        android:layout_centerhorizontal=" true "/>    <textview        android:id= "@+id/tvtitle"        android:layout_width= "wrap_content"        android:layout_ height= "Wrap_content"        android:layout_centerhorizontal= "true"        android:layout_below= "@+id/ivnav"        Android:textcolor= "#fff"/></relativelayout>

3. Initviewpager method

Private string[] titles={"hot equipment", "used excavator", "Second Hand loader"};p rivate void Initviewpager () {        Mviewpager = (Viewpager) Findviewbyid (r.id.vplist);        Fraglist=new arraylist<fragment> ();        Bundle Bundle=null;        Fragment Frag=null;        for (int i=0;i<titles.length;i++) {            frag=new machinefragment ();            Bundle=new Bundle ();            Bundle.putstring ("title", Titles[i]);            Frag.setarguments (bundle);            Fraglist.add (Frag);        }        Adapter=new Machinepageradapter (Super.getsupportfragmentmanager (), fraglist);        Mviewpager.setadapter (adapter);        Mviewpager.setonpagechangelistener (this);    }

Machinepageradapter Adapter:

public class Machinepageradapter extends Fragmentpageradapter {    private list<fragment> fragmentlist;    Public Machinepageradapter (Fragmentmanager fm,list<fragment> List) {        super (FM);        this.fragmentlist=list;    }    Public Fragment getItem (int arg0) {        return fragmentlist.get (arg0);    }    public int GetCount () {        return fragmentlist.size ();    }    @Override public      int GetItemPosition (Object object) {         return position_none;  Child not found requested reload    }  }

Machinefragment: can be designed according to the specific situation, here only a text box is displayed

 
public class Machinefragment extends Fragment {private String title; public void Setarguments (bundle bundle) {title=bundle.getstring ("title");//Accept incoming arguments} public View Oncreat Eview (Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {TextView TEXTVI            ew = new TextView (getactivity ());            Textview.settext (title); Textview.settextsize (20);            Textview.settextcolor (color.red); textview.setgravity (Gravity.center);            LinearLayout layout = new LinearLayout (getactivity ());            Layoutparams params = new Layoutparams (layoutparams.match_parent, layoutparams.match_parent);            Layout.setbackgroundcolor (Color.White);            Layout.addview (TextView, params);        return layout; }}

4. Implement listening

Implements  onpagechangelistener Toggle tab Public    void onpagescrollstatechanged (int arg0) {  }    when view is sliding public void onpagescrolled (int arg0, float arg1, int. arg2) {} public    void onpageselected (int idx) {        Actionbar.sel Ecttab (Actionbar.gettabat (IDX));    } Implements  Tablistener Toggle Viewpager public    void onpagescrollstatechanged (int arg0) {} Public when you click        tab void onpagescrolled (int arg0, float arg1, int arg2) {} public    void onpageselected (int idx) {        Actionbar.selectta B (Actionbar.gettabat (IDX));    }

5. ActionBar Menu

main.xml menu configuration, using xmlns:app= "Http://schemas.android.com/apk/res-auto" compatible with the lower version, and use app:showasaction otherwise showasaction will fail, even if set to always menu item or appear in Overflow

<menu xmlns:android= "http://schemas.android.com/apk/res/android"     xmlns:app= "http://schemas.android.com/ Apk/res-auto ">    <item  android:id=" @+id/action_share "        android:orderincategory="        app: Showasaction= "Always"        android:title= "share"        android:icon= "@drawable/share_ico"        />    <item  android:id= "@+id/action_common"        android:orderincategory= "        app:showasaction="        "Always" Android:title= "Comments"        android:icon= "@drawable/com_btn"        /></menu>

Generate Options Menu

public boolean Oncreateoptionsmenu (Menu menu) {        getmenuinflater (). Inflate (R.menu.main, menu);        return true;    }

Response Click menu

public boolean onoptionsitemselected (MenuItem item) {        switch (Item.getitemid ()) {Case        R.id.action_share:            Toast.maketext (This, "Click to share", Toast.length_long). Show ();            break;        Case R.id.action_common:            toast.maketext (This, "clicked on Comments", Toast.length_long). Show ();            break;            }            return super.onoptionsitemselected (item);    }

6, the realization of the ActionBar design of the body

Arrange menu options to be displayed at the bottom

Add android:uioptions= "Splitactionbarwhennarrow" property to Mainactivity in Androidmanifest.xml

Four, ActionBar style

If you must use the Theme.appcompat theme style for a low-compatibility activity, you can define the Actionbar style on this topic

<style name= "Theme.myactionbar" parent= "@style/theme.appcompat.light" >...</style>

Actionbar style is much more and to consider compatibility, more cumbersome, recommended by the Android Action Bar style generator can easily generate

website:http://jgilfelt.github.io/android-actionbarstylegenerator/

To learn more about the small partners, you can click to view the source code , run the test yourself.

Inquiries or technical exchanges, please join the official QQ Group: (452379712)

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

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Typical interface design (6)--actionbar tab+viewpager+fagment for sliding navigation