Android Tablayout combined with Viewpager to achieve page switching effect _android

First look at the effect, as shown in figure:

1. Since tablayout is a control of the official library of Android design Support libraries, it is necessary to add dependencies to the library when using Tablayout

Compile ' com.android.support:design:22.2.0 '

2. The following is the layout that tablayout and Viewpager use together

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/"
 Android "xmlns:app=" Http://schemas.android.com/apk/res-auto "xmlns:tools=" Http://schemas.android.com/tools " Android:layout_width= "Match_parent" android:layout_height= "Match_parent" tools:context= " Com.example.cxk.myapplication.MainActivity "> <android.support.design.widget.tablayout android:id=" @+id/ Tablayout "android:layout_width=" match_parent "android:layout_height=" 48DP "android:background=" #1FBCD2 "app:tabTe Xtappearance= "@style/mytablayouttextappearance" app:tabindicatorcolor= "@color/white" app:tabselectedtextcolor= "@ Color/white "app:tabtextcolor=" @color/ripple_material_dark "app:tabindicatorheight=" 2DP "/> <android.support . V4.view.ViewPager android:id= "@+id/viewpager" android:layout_width= fill_parent "android:layout_height=" Match_ Parent "android:layout_below=" @+id/tablayout "android:layout_weight=" 1 "/> </relativeLayout>

 

Note:

A. You must write the xmlns:app= "Http://schemas.android.com/apk/res-auto" code under the root layout, or you cannot set some properties for setting tablayout in the layout.

B. The following are some common properties of tablayout

App:tabindicatorcolor= "@color/white" indicator color
Broadband for app:tabindicatorheight= "2DP" indicator
App:tabselectedtextcolor= the color of the font when "@color/white" is selected

App:tabtextcolor= the color of the font when "@color/ripple_material_dark" is not selected
App:tabtextappearance= "@style/mytablayouttextappearance" Changes the size of the font (add the following code below Style.xml)

 <style name= "mytablayouttextappearance" parent= "TextAppearance.AppCompat.Widget.ActionBar.Title" >
  < Item Name= "Android:textsize" >16sp</item>
 </style>

3. The following is the Java code used in conjunction with Tablayout and Viewpager

public class Mainactivity extends Fragmentactivity {private tablayout tablayout;
 Private Viewpager Viewpager;
 Private list<fragment> List;
 Private Fragmentmanager Manager;
 Private Fragmenttransaction transtion;
 Private Myfragmentpageadapter adapter;

 Private list<string> titles;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (R.layout.activity_main);
  First Findid tablayout = (tablayout) This.findviewbyid (r.id.tablayout);
  Viewpager = (Viewpager) This.findviewbyid (R.id.viewpager);
  Put each title in the titles of titles = new arraylist<string> ();
  Titles.add ("first");
  Titles.add ("second");
  The two Fragment are loaded into the collection list = new arraylist<fragment> ();
  Fragment1 f1 = new Fragment1 ();
  Fragment2 F2 = new Fragment2 ();
  List.add (F1);
  List.add (F2);
  Set up an adapter manager = Getsupportfragmentmanager () for Viewpager after committing the transaction using the manager and Transtion
  adapter = new Myfragmentpageadapter (manager); Transtion = ManaGer.begintransaction ();
  Transtion.commit ();
  Viewpager.setadapter (adapter);
  Tablayout.addtab can add a caption to the tab, True to select Tablayout.addtab (Tablayout.newtab (). SetText (titles.get (0)), true, by default;
  Tablayout.addtab (Tablayout.newtab (). SetText (Titles.get (1)), false);
  The two methods are to combine Tablayout and Viewpager Tablayout.setupwithviewpager (Viewpager);
 Tablayout.settabsfrompageradapter (adapter); }//define an adapter to Viewpager class Myfragmentpageadapter extends Fragmentpageradapter {public Myfragmentpageadapter (FRAGM
   Entmanager FM) {super (FM); TODO auto-generated Constructor stub} @Override public android.support.v4.app.Fragment getitem (int arg0) {/
  /TODO auto-generated Method Stub return List.get (ARG0);
  @Override public charsequence getpagetitle (int position) {return titles.get (position);
  @Override public int GetCount () {//TODO auto-generated a stub return list.size (); @Override public void Destroyitem (ViewGroup container, int pOsition, Object) {//TODO auto-generated Method Stub Super.destroyitem (container, Position, object);


 }

 }
}

Note:

1.getSupportManager using this method requires you to inherit fragmentactivity.
2. The defined new adapter needs to rewrite the Getpagertitle method, otherwise the caption will not appear.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.