Android ViewPager implements the sliding transition of the slider at the bottom of the Tabhost tab, and viewpagertabhost

Android ViewPager implements the sliding transition of the slider at the bottom of the Tabhost tab, and viewpagertabhost
Zookeeper

Android ViewPager implements slide at the bottom of the Tabhost Tab

Previously, based on the third-party open-source control ViewPagerIndicator UnderlinePageIndicator on github (original link: http://blog.csdn.net/zhangphil/article/details/44752213), I wrote a bottom with a slider, and when the ViewPager page switch tab also accordingly switch, and the slider also corresponds to the dynamic sliding effect control. However, the write is too tightly coupled, which is not conducive to reuse. So now we have reconstructed the code, rewritten the code, and made these effects into a custom loose coupling control: TabLinearLayout, this control can be used directly in future projects.

Controls:

MainActivity. java used for testing:

Package zhangphil. view; import java. util. arrayList; import zhangphil. underline. r; import com. viewpagerindicator. underlinePageIndicator; import android. support. v4.app. fragment; import android. support. v4.app. fragmentManager; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. pagerAdapter; import android. support. v4.view. viewPager; import android. support. v7.app. actionBarActivity; Import android. view. gravity; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. arrayAdapter; import android. widget. textView; import android. content. context; import android. graphics. color; import android. OS. bundle;/*** Based on the UnderlinePageIndicator of the third-party open-source control ViewPagerIndicator, you can write a sliding control with a line at the bottom of the tab. * Control. The special effect here is that the slider at the bottom of the header gradually slides during the ViewPager switching process. * **/Public class MainActivity extends ActionBarActivity {private TabLinearLayout mTabLinearLayout; private ArrayList <Fragment> mArryList; private ViewPager mPager; // The font Color of the unselected tab is private int COLOR_NORMAL = Color. DKGRAY; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mArryList = new ArrayList <Fragment> (); // initialize five F Ragment as a test. For (int I = 0; I <5; I ++) {TestFragment f = (TestFragment) TestFragment. newInstance (); f. id = I; mArryList. add (f);} PagerAdapter mAdapter = new MyFragmentAdapter (getSupportFragmentManager (); mPager = (ViewPager) findViewById (R. id. pager); mPager. setAdapter (mAdapter); UnderlinePageIndicator mIndicator = (UnderlinePageIndicator) findViewById (R. id. indicator); mIndicator. setViewPager (mPager); mIndicator. setF Ades (false); mIndicator. setSelectedColor (0xff33B5E5); mTabLinearLayout = (TabLinearLayout) findViewById (R. id. tab_LinearLayout); ArrayAdapter mTabLinearLayoutAdapter = new MyTabLinearLayoutAdapter (this,-1); mTabLinearLayout. initialization (mPager, mTabLinearLayoutAdapter, mIndicator);} private class MyTabLinearLayoutAdapter extends ArrayAdapter {private Context context Context; public MyTabLinearLayoutAdapter (Con Text context, int resource) {super (context, resource); this. context = context;} @ Overridepublic int getCount () {return mArryList. size () ;}// here, only one TextView is returned as the View of the tab. // More views can be returned here. @ Overridepublic View getView (int position, View convertView, ViewGroup parent) {TextView v = new TextView (context); v. setGravity (Gravity. CENTER); v. setText ("tab" + position); v. setTextColor (COLOR_NORMAL); return v ;}// Fragment for testing only, identified by an id. Private static class TestFragment extends Fragment {public int id; public static Fragment newInstance () {return new TestFragment ();} public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {TextView v = new TextView (getActivity (); v. setGravity (Gravity. CENTER); v. setTextSize (50f); v. setText ("Fragment:" + id); return v ;}} private class MyFragmentAdapter extends FragmentPagerAdapter {public MyFragmentAdapter (FragmentManager fm) {super (fm );} @ Overridepublic Fragment getItem (int position) {return mArryList. get (position) ;}@ Overridepublic int getCount () {return mArryList. size ();}}}

Activity_main.xml layout file required by MainActivity. java:

<?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:orientation="vertical" >    <zhangphil.view.TabLinearLayout        android:id="@+id/tab_LinearLayout"        android:layout_width="match_parent"        android:layout_height="30dip"        android:orientation="horizontal" />    <com.viewpagerindicator.UnderlinePageIndicator        android:id="@+id/indicator"        android:layout_width="match_parent"        android:layout_height="7px" />    <View        android:layout_width="match_parent"        android:layout_height="1px"        android:background="#33B5E5" />    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

TabLinearLayout. java:

Package zhangphil. view; import com. viewpagerindicator. pageIndicator; import android. content. context; import android. graphics. color; import android. support. v4.view. viewPager; import android. util. attributeSet; import android. view. view; import android. widget. arrayAdapter; import android. widget. linearLayout; import android. widget. textView; public class TabLinearLayout extends LinearLayout {private int COLOR_NORM AL = Color. DKGRAY; private ArrayAdapter mAtapter; private ViewPager mPager; private TabLinearLayoutListener listener; public TabLinearLayout (Context context, AttributeSet attrs) {super (context, attrs);} public TabLinearLayout (Context context) {super (context);} public void initialization (ViewPager mPager, ArrayAdapter mAtapter, PageIndicator mPageIndicator) {this. mAtapter = mAtapter; this. m Pager = mPager; mPageIndicator. setOnPageChangeListener (new ViewPager. OnPageChangeListener () {@ Overridepublic void onPageSelected (int pos) {setCurrentItem (pos); if (callback! = Null) mTabLinearLayoutListener. onTab (pos) ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0 ){}}); // Add the tab addIndicators (); // initialization, 0th items are selected;} public void initialization (ViewPager mPager, ArrayAdapter mAtapter, PageIndicator mPageIndicator, TabLinearLayoutListener listener) {this. mTabLine ArLayoutListener = mTabLinearLayoutListener; initialization (mPager, mAtapter, mPageIndicator);} // Add the Tab private void addIndicators () {for (int I = 0; I <mAtapter. getCount (); I ++) {View v = mAtapter. getView (I, null, null); addIndicatorItem (v, I) ;}// set the effect of tab changes when selected private void setIndicatorViewSelected (int pos) {for (int I = 0; I <super. getChildCount (); I ++) {if (I = pos) {View v = super. getC HildAt (I); TextView TV = (TextView) v; // Android Holo style blue TV. setTextColor (0xff33B5E5);} else {View v = super. getChildAt (I); TextView TV = (TextView) v; TV. setTextColor (COLOR_NORMAL) ;}}// Add a View in the linear layout to add events for the added View. Private void addIndicatorItem (View view, final int index) {LayoutParams params = new LayoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. MATCH_PARENT, 1); super. addView (view, index, params); view. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// when the user clicks this View, the ViewPager setting is correct while the Pager Itemif (mTabLinearLayoutListener! = Null) mTabLinearLayoutListener. onTab (v, index); // set the display item of ViewPager. MPager. setCurrentItem (index, true); setCurrentItem (index) ;}}); // sets the pos sub-view of the current LinearLayout to be selected. Public void setCurrentItem (int pos) {setIndicatorViewSelected (pos) ;}// an interface is called back when you click the tab. Public interface TabLinearLayoutListener {public void onTab (View v, int pos); public void onTab (int pos );}}