Android ViewPager + Fragment sliding tab, tab click tab, androidviewpager

Android ViewPager + Fragment sliding tab, tab click tab, androidviewpager

I have been studying this for a while. Since Android 3.0, few developers have used the previous TabWidget control. The effect is not very good and cannot be slide. Later, various sliding tabs emerged, each of which had its own advantages. However, we recommend that you slide the ViewPager + Fragment tab and click the tab. Because horizontal or vertical screen effects are good, there is also an open-source framework for this effect. Next, we will introduce it.

Reprinted please indicate the source: http://blog.csdn.net/qq_16064871

Download this demo: Click

1. ViewPagerActivity

There are mainly ViewPager page tabs and ActionBar. Tab page tabs. To synchronize changes and select. You can slide the ViewPager tab, where Fragment is loaded. Fragment also has its own layout and lifecycle. Next, let's 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.a Pp. 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 {p Rivate ViewPager mPager; private ArrayList <Fragment> mfragmentList; // Title List ArrayList <String> titleList = new ArrayList <String> (); @ jsonvoid 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. viewp Ager); mfragmentList = new ArrayList <Fragment> (); mfragmentList. add (new FragmentTest1 (); mfragmentList. add (new FragmentTest2 (); mfragmentList. add (new FragmentTest3 (); mPager. setAdapter (new MyViewPagerAdapter (getsuppfrfragmentmanager (), mfragmentList); mPager. setCurrentItem (0); mPager. setOnPageChangeListener (this); getActionBar (). setNavigationMode (ActionBar. NAVIGATION_MODE_TABS); getActionBar (). setBack GroundDrawable (getResources (). getDrawable (R. drawable. title_bar_shape); // initialize the TAB attribute 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 tabs Fragment adapter public class MyViewPagerAda Pter 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 (in T 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) {// when sliding ViewPager, set the corresponding ActionBar Tab to be selected getActionBar (). getTabAt (arg0 ). select () ;}@ Overridepublic void onTabReselected (Tab arg0, FragmentTransaction arg1) {// TODO Auto-generated method stub} @ Overridepublic v Oid onTabSelected (Tab tab, FragmentTransaction arg1) {if (tab. getTag () = null) return; // select the tab and slide the 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 }}

Ii. 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="30"        android:persistentDrawingCache="animation" /></LinearLayout>

Iii. FragmentTest1

FragmentTest1 used in the process inherits Fragment. The lifecycle of this class is similar to that of an activity. It is similar to that of an activity that disappears and Fragment disappears.

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); // return rootView associated with the layout file;} @ 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 ();}}

IV,

Portrait Screen

Landscape Screen

In the first figure, we can see that the tab title bar is black, which is the color of the system. How can we modify it? See this image and xml

The Code is as follows.

<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 "> <! -- The default value is black. Here, the tab color is set --> <item name = "android: background"> # ff1ea8e8 </item> </style> </resources>

5. After modification

Here, I just provided a simple method to modify the tab color. The specific modification still requires the design of the entire app design and topic style. You can try it if necessary.

In fact, for better results, the title bar open-source framework is used. You can read this blog: Android open-source framework ActionBarSherlock and ViewPager are similar to Netease news client.

Reprinted please indicate the source: http://blog.csdn.net/qq_16064871

Download this demo: Click