Android viewpager implement tabhost tab bottom slider dynamic sliding transitions



"Android viewpager tabhost tab bottom slider dynamic sliding transition"

Previously based on GitHub third-party open source Control viewpagerindicator underlinepageindicator (original link:http://blog.csdn.net/zhangphil/article/ details/44752213), wrote a bottom with a slider, and when the viewpager page switch time tab also corresponding switch, and the slider also with the corresponding dynamic sliding effect control. But writing too tightly coupled, not conducive to reuse, so now refactor the code, rewrite the code, these effects into a self-customized loosely-coupled control: Tablinearlayout, the control can be used in future projects directly.

Control:

Mainactivity.java 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 third-party open source control Viewpagerindicator Underlinepageindicator, a sliding control that has a lined line at the bottom of the tab. Control There is a special effect in this: The tab of the head in the Viewpager switch process, the bottom of the slider also with the dynamic gradually sliding transition. * * */public class Mainactivity extends Actionbaractivity {private Tablinearlayout mtablinearlayout;private ArrayList&lt ; fragment> marrylist;private viewpager mpager;//unselected tab font color private int color_normal = Color.dkgray; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate ( Savedinstancestate); Setcontentview (r.layout.activity_main); marrylist = new arraylist<fragment> ();// Initialize 5 fragment 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.setfades (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;public Mytablinearlayoutadapter (context context, int resource) {Super (context, resource); this.context = context;} @Overridepublic int GetCount () {return marrylist.size ();} Just return a view of the TextView as a tab here. A richer view can be returned here. @Overridepublic view GetView (int position, view Convertview, ViewGroup parent) {TextView v = new TextView (context); V.setgr Avity (Gravity.center); V.settext ("tab" + position); V.settextcolor (color_normal); return v;}} Fragment used only for testing, identified by an ID. private static class Testfragment extends Fragment {public int id;public static Fragment newinstance () {return new Testfra Gment ();} Public View Oncreateview (Layoutinflater inflater, ViewGroup container,bundle savedinstancestate) {TextView v = new TextVi EW (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 ();}}}

Mainactivity.java Required Activity_main.xml Layout file:

<?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 "and roid:orientation= "vertical" > <zhangphil.view.tablinearlayout android:id= "@+id/tab_linearlayout" an Droid:layout_width= "Match_parent" android:layout_height= "30dip" android:orientation= "Horizontal"/> &l T;com.viewpagerindicator.underlinepageindicator android:id= "@+id/indicator" android:layout_width= "Match_pare NT "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/pa Ger "android:layout_width=" match_parent "android:layout_height=" 0DP "android:layout_weight=" 1 "/>& Lt;/linearlayout> 

Self-rewriting 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_normal = Color.dkgray; Private Arrayadapter matapter;private Viewpager mpager;private tablinearlayoutlistener mtablinearlayoutlistener; 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.mpager = Mpager;mpageindicator.setonpagechangelistener (new Viewpager.onpagechangelistener () {@ overridepublic void onpageselected (int pos) {Setcurrentitem (POS); if (mtablinearlayoutlistener! = null) MTabLinearlayoutlistener.ontab (POS);} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {} @Overridepublic void onpagescrollstatechanged (int a rg0) {}});//Add Tab addindicators ();//Initialize, No. 0 is selected setindicatorviewselected (0);} public void initialization (Viewpager mpager, Arrayadapter matapter,pageindicator mpageindicator, Tablinearlayoutlistener mtablinearlayoutlistener) {this.mtablinearlayoutlistener = MTabLinearLayoutListener; Initialization (Mpager, Matapter, mpageindicator);} Add tab tab private void Addindicators () {for (int i = 0; i < Matapter.getcount (); i++) {View v = matapter.getview (i, Nu ll, null); Addindicatoritem (V, i);}} Here set the effect of the tab change when selected the private void setindicatorviewselected (int pos) {for (int i = 0; i < Super.getchildcount (); i++) {i F (i = = pos) {View v = super.getchildat (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,Adds an event for the added view. private void Addindicatoritem (view view, final int index) {layoutparams params = new Layoutparams (layoutparams.wrap_conte Nt,layoutparams.match_parent, 1); Super.addview (view, index, params); View.setonclicklistener (new View.onclicklistener () {@Overridepublic void OnClick (View v) {//When the user taps the view, the Viewpager is set correctly and pager itemif ( Mtablinearlayoutlistener = null) mtablinearlayoutlistener.ontab (v, index);//sets the display item for the Viewpager. Mpager.setcurrentitem (index, true); Setcurrentitem (index);}}); Sets the current LinearLayout POS item sub view to be selected. public void Setcurrentitem (int pos) {setindicatorviewselected (pos);} An interface in which the method is called back when the user clicks the tab. Public interface Tablinearlayoutlistener {public void Ontab (View v, int pos);p ublic void ontab (int pos);}}

Android viewpager implement tabhost tab bottom slider dynamic sliding transitions