Android viewpager+fragment Slide tab, tab click Tab

I've been studying this for a while, and since Android 3.0, very few developers have used the previous Tabwidget controls. That effect is not very good, nor can it slide. Then there are a variety of sliding tabs, each of which has its advantages. But I still recommend viewpager+fragment slide tab, tab click Tab. Because the horizontal screen or vertical screen effect is also good, in response to this effect, there is an open source framework. The following will be introduced.

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

This demo download: please click

First, viewpageractivity

There are mainly Viewpager page tabs, as well as Actionbar.tab page tabs. To make synchronization changes and select. Viewpager tab can slide, inside load is fragment. Fragment also has its own layout and life cycle. Next look at the code and comments.

Package Com.example.viewpagerfragmentdemo;import Java.util.arraylist;import Android.os.build;import Android.os.bundle;import Android.annotation.suppresslint;import Android.annotation.targetapi;import Android.app.actionbar;import Android.app.actionbar.tab;import Android.app.actionbar.tablistener;import Android.app.fragmenttransaction;import Android.support.v4.app.fragment;import Android.support.v4.app.fragmentactivity;import Android.support.v4.app.fragmentmanager;import Android.support.v4.app.fragmentpageradapter;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.view.view;import android.view.ViewGroup;@ Suppresslint ("Newapi") public class Viewpageractivity extends Fragmentactivity Implementsonpagechangelistener, Tablistener {private Viewpager mpager;private arraylist<fragment> mfragmentlist;//Title list arraylist<string> Titlelist = new arraylist<string> (); @Overrideprotected void OnCreate (Bundle savedinstancesTate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_view_pager); Initviewpager ();} @TargetApi (build.version_codes. Honeycomb) private void Initviewpager () {Mpager = (Viewpager) Findviewbyid (r.id.viewpager); mfragmentlist = new ArrayList <Fragment> (); Mfragmentlist.add (new FragmentTest1 ()); Mfragmentlist.add (new FragmentTest2 ()); Mfragmentlist.add (New FragmentTest3 ()); Mpager.setadapter (New Myviewpageradapter (Getsupportfragmentmanager (),   mfragmentlist)); Mpager.setcurrentitem (0); Mpager.setonpagechangelistener (this); Getactionbar (). Setnavigationmode (Actionbar.navigation_mode_tabs); Getactionbar (). Setbackgrounddrawable (Getresources (). getdrawable (R.drawable.title_bar_shape));//Initialize Tab property string[ ] tabname = null; String[] Temtabname = {"First page", "second page", "third page"};tabname = temtabname;for (int i = 0; i < tabname.length; i++) {Actionbar.tab Tab = Getactionbar (). NewTab (); Tab.settext (Tabname[i]); Tab.settablistener (this); Tab.settag (i); Getactionbar (). AddTab (tab);}} Three page tabs fragmentAdapter public class Myviewpageradapter extends Fragmentpageradapter {arraylist<fragment> list;public Myviewpageradapter (Fragmentmanager fmanager,arraylist<fragment> ArrayList) {super (Fmanager); this.list = ArrayList;} @Overridepublic int GetCount () {return list = = null? 0:list.size ();} @Overridepublic Fragment getItem (int arg0) {return list.get (arg0);} @Overridepublic int GetItemPosition (Object object) {return position_none;} @Overridepublic Boolean isviewfromobject (view view, Object obj) {return view = = ((Fragment) obj). GetView ();} @Overridepublic void Destroyitem (ViewGroup container, int position, Object object) {}} @Overridepublic void onpagescrollstatechanged (int arg0) {//TODO auto-generated method stub} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {//TODO auto-generated method stub} @Overridepublic void onpageselected (int arg0) {//sliding viewpager when set The corresponding Actionbar tab is selected Getactionbar (). Gettabat (arg0). Select (); @Overridepublic void ontabreselected (Tab arg0,Fragmenttransaction arg1) {//TODO auto-generated method stub} @Overridepublic void ontabselected (Tab tab, Fragmenttransaction arg1) {if (Tab.gettag () = = null) return;//check tab, Slide tab int index = ((Integer) Tab.gettag ()). Intvalue () ; if (Mpager! = null && mpager.getchildcount () > 0&& mfragmentlist.size () > Index) Mpager.setcurrentitem (index);} @Overridepublic void ontabunselected (Tab arg0, fragmenttransaction arg1) {//TODO auto-generated method stub}}

Second, Activity_view_pager layout

<?xml version= "1.0" encoding= "Utf-8"? ><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:orientation= "vertical" >    < Android.support.v4.view.ViewPager        android:id= "@+id/viewpager"        android:layout_width= "Fill_parent        " android:layout_height= "Fill_parent"        android:flipinterval= "        android:persistentdrawingcache=" Animation "/></linearlayout>

Third, FragmentTest1

The FragmentTest1 used in the process are inherited fragment. The life cycle of this class is similar to activity, with activity disappearing and fragment disappearing as the activity life cycle progresses.

Package Com.example.viewpagerfragmentdemo;import Android.os.bundle;import Android.support.v4.app.fragment;import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;public class FragmentTest1 Extends fragment{@Overridepublic View oncreateview (layoutinflater inflater, ViewGroup container,bundle Savedinstancestate) {View Rootview = inflater.inflate (R.layout.fragment1, container, false);//Associated layout file return Rootview;} @Overridepublic void OnDestroy () {Super.ondestroy ();} @Overridepublic void OnPause () {super.onpause ();} @Overridepublic void Onresume () {Super.onresume ();} @Overridepublic void OnStart () {Super.onstart ();} @Overridepublic void OnStop () {super.onstop ();}}

Four,

Vertical screen

Horizontal screen

Here the first picture can see the tab title bar is black, is the system's own color, then how to modify it? Look at this picture and the XML

The Red Arrows point to the code below.

<resources>    <!--        Base application theme for API 14+. This theme completely replaces        Appbasetheme from BOTH res/values/styles.xml and        res/values-v11/styles.xml on API 14+ devices.    --<style name= "Appbasetheme" parent= "Android:Theme.Holo.Light.DarkActionBar" >    <!--default is black , set tab Color here--    <item name= "Android:background" > #ff1ea8e8 </item>      </style></ Resources>

Five, after the change

Here I simply provide a way to modify the tab color, specifically to modify or to design the entire app design, theme style issues. The specific needs of the effect, you need to be able to try.

In fact, in order to better effect, appeared the title bar Open source framework to use. Can read this blog: Android open-source framework Actionbarsherlock and Viewpager imitation NetEase news Client

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

This demo download: please click

Android viewpager+fragment Slide tab, tab click Tab