Android Navigation tab Bar implementation

Introduction to the Android sliding control very much, I believe that most of the students are in touch with the vertical sliding control of the ListView, but sometimes we also have the need for lateral sliding, very many applications now also made this look, take Weiciyuan as an example, as seen, Several of the above Tabbutton are capable of sliding.
Navigation tabs joins the Navigation tab bar. is a common design style, I believe you will often see it. android2.x era. Generally we are using tabhost to achieve (before the project with such a design bitter forced a good burst). Since Google introduced design specifications, Google has strongly advocated the use of navigation tabs plus fragment and Viewpager to achieve the navigation page click-and-swipe switch.

For example, as you can see, this is a typical demo sample of the navigation tabs:



The implementation code is relatively simple, because it is an open source project. I directly paste out the code, convenient for everyone to study the test.

public class Mainuiactivity extends Fragmentactivity {private static final int cache_pager = 5;private Viewpager mviewpage R;private mainuipageradapter mainuipageradapter; @Overrideprotected void OnCreate (Bundle savedinstancestate) {                Super.oncreate (savedinstancestate);                Mviewpager = new Viewpager (this);                Mviewpager.setid (11); Setcontentview (Mviewpager); Buildphoneinterface ();} private void Buildphoneinterface () {Buildviewpager (); Buildactionbarandviewpagertitles (); Getactionbar (). Setselectednavigationitem (1);} private void Buildviewpager () {Mviewpager = (Viewpager) Findviewbyid (r.id.mainviewpager); mainuipageradapter = new Mainuipageradapter (Getfragmentmanager ()); Mviewpager.setoffscreenpagelimit (Cache_pager); MViewPager.setAdapter ( Mainuipageradapter); Mviewpager.setonpagechangelistener (Onpagechangelistener);}  private void Buildactionbarandviewpagertitles () {//Get reference to Action Bar ActionBar ActionBar = Getactionbar ();// Set the mode of the action bar to navigation mode, so. ACtion Bar will display tab tab Actionbar.setnavigationmode (Actionbar.navigation_mode_tabs); Only show navigation tabs, do not display Actionbar above the title and other layout actionbar.setdisplayshowtitleenabled (false);                Actionbar.setdisplayuselogoenabled (false); actionbar.setdisplayshowhomeenabled (false); Build a adapter of your own definition. Associate the toggle of the Viewpager with the click of the Action Bar tab Maintablistener Maintablistener = new Maintablistener (); Actionbar.addtab ( Actionbar.newtab (). SetText (R.string.first). Settablistener (Maintablistener)); Actionbar.addtab (ActionBar.newTab ( ). SetText (R.string.second). Settablistener (Maintablistener)), Actionbar.addtab (Actionbar.newtab (). SetText ( R.string.thrid). Settablistener (Maintablistener)); Actionbar.addtab (Actionbar.newtab (). SetText (R.string.fourth). Settablistener (Maintablistener));} Private Fragment getfirstfragment () {return Getfragmentmanager (). Findfragmentbytag (FirstFragment.class.getName ());} Private Fragment getsecondfragment () {return Getfragmentmanager (). Findfragmentbytag (SecondFragment.class.getName () );}Private Fragment getthirdfragment () {return Getfragmentmanager (). Findfragmentbytag (ThirdFragment.class.getName ());} Private Fragment getfourthfragment () {return Getfragmentmanager (). Findfragmentbytag (FourthFragment.class.getName ()        );} Build a simple Viewpager toggle listener class that associates the tab click with the viewpager switch viewpager.onpagechangelistener onpagechangelistener = new Viewpager.simpleonpagechangelistener () {@Overridepublic void onpageselected (int position) {Getactionbar (). Setselectednavigationitem (position);}}; Private class Mainuipageradapter extends Appfragmentpageradapter {list<fragment> List = new Arraylist<fragment > ();p ublic mainuipageradapter (fragmentmanager FM) {super (FM); if (getfirstfragment () = = null) {List.add (new Firstfragment ());} else {List.add (getfirstfragment ());} if (getsecondfragment () = = null) {List.add (New secondfragment ());} else {List.add (getsecondfragment ());} if (getthirdfragment () = = null) {List.add (New thirdfragment ());} else {List.add (getthirdfragment ());} if (GetfourthfragmeNT () = null) {List.add (New fourthfragment ());} else {List.add (getfourthfragment ());}} @Overridepublic Fragment getItem (int position) {return list.get (position);} @Overrideprotected String gettag (int position) {list<string> tagslist = new arraylist<string> (); Tagslist.add (FirstFragment.class.getName ()); Tagslist.add (SecondFragment.class.getName ()); Tagslist.add ( ThirdFragment.class.getName ()); Tagslist.add (FourthFragment.class.getName ()); return tagslist.get (position);} @Overridepublic int GetCount () {return list.size ();}} Private class Maintablistener implements Actionbar.tablistener {@Overridepublic void ontabselected (Tab tab, Fragmenttransaction ft) {if (Mviewpager.getcurrentitem ()! = Tab.getposition ()) {Mviewpager.setcurrentitem ( Tab.getposition ());}} @Overridepublic void ontabunselected (Tab tab, fragmenttransaction ft) {//TODO auto-generated method stub}@ overridepublic void ontabreselected (Tab tab, fragmenttransaction ft) {//TODO auto-generated Method stub}}}

Define your own style This style definition is still a bit responsible for looking at the original style, and I've also written a demo. For example, the following:

The result is that the theme you are using is Android native, code such as the following:

        <activity            android:name= "xxxxxx"            android:theme= "@android: Style/theme.holo.light" >

The theme is defined in the framework folder of the Android source code, with the path: "Frameworks/base/core/res/res/values/themes.xml", where the properties associated with action Bar are as follows:

<!--Action Bar Styles-->1476 <item name= "Actiondropdownstyle" > @android: Style/widget.holo.light.spinne r.dropdown.actionbar</item>1477 <item name= "Actionbuttonstyle" > @android: style/ widget.holo.light.actionbutton</item>1478 <item name= "Actionoverflowbuttonstyle" > @android: style/ widget.holo.light.actionbutton.overflow</item>1479 <item name= "Actionmodebackground" > @android: drawable/cab_background_top_holo_light</item>1480 <item name= "Actionmodesplitbackground" > @android: drawable/cab_background_bottom_holo_light</item>1481 <item name= "actionmodeclosedrawable" > @android: drawable/ic_cab_done_holo_light</item>1482 <item name= "Actionbartabstyle" > @style/ widget.holo.light.actionbar.tabview</item>1483 <item name= "Actionbartabbarstyle" > @style/ widget.holo.light.actionbar.tabbar</item>1484 <item name= "Actionbartabtextstyle" > @style/WIDGEt. holo.light.actionbar.tabtext</item>1485 <item name= "Actionmodestyle" > @style/ widget.holo.light.actionmode</item>1486 <item name= "Actionmodeclosebuttonstyle" > @style/ widget.holo.light.actionbutton.closemode</item>1487 <item name= "Android:actionbarstyle" > @android: style/widget.holo.light.actionbar.solid</item>1488 <item name= "actionbarsize" > @dimen/action_bar_ default_height</item>1489 <item name= "Actionmodepopupwindowstyle" > @android: style/ widget.holo.light.popupwindow.actionmode</item>1490 <item name= "Actionbarwidgettheme" > @null </item        >14911492 <item name= "actionmodecutdrawable" > @android:d rawable/ic_menu_cut_holo_light</item>1493 <item name= "actionmodecopydrawable" > @android:d rawable/ic_menu_copy_holo_light</item>1494 <item N Ame= "Actionmodepastedrawable" > @android:d rawable/ic_menu_paste_holo_light</item>1495 &lT;item name= "actionmodeselectalldrawable" > @android:d rawable/ic_menu_selectall_holo_light</item>1496 <item name= "actionmodesharedrawable" > @android:d rawable/ic_menu_share_holo_light</item>1497 <item Name= "Actionmodefinddrawable" > @android:d rawable/ic_menu_find_holo_light</item>1498 <item name= " Actionmodewebsearchdrawable "> @android:d rawable/ic_menu_search_holo_light</item>14991500 <item name=" Dividervertical ">?android:attr/listdivider</item>1501 <item name=" Dividerhorizontal ">?android: attr/listdivider</item>1502 <item name= "Buttonbarstyle" > @android: Style/holo.light.buttonbar</item >1503 <item name= "Buttonbarbuttonstyle" >?android:attr/borderlessbuttonstyle</item>1504 <it EM name= "Segmentedbuttonstyle" > @android:style/holo.light.segmentedbutton</item>

Navigation tab-related properties such as the following:

• 
  

Android Navigation tab Bar implementation