Explain the use of Viewpager pagertabstrip child controls in Android _android

Let's take a look at a small example:

As you can see, the effect is also great, smoother than the previously customized label indicator. Here's a brief introduction to Pagertabstrip and its use.

Pagertabstrip is a class in the V4 support package, a Viewpager-specific class that cannot be used anywhere else. In use, we only need to declare in the Viewpager layout.

As the following code

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" fill_parent "
 android:layout_height=" Fill_parent "
 android: Background= "@android: Color/white"
 android:orientation= "vertical" >

 < Android.support.v4.view.ViewPager
  android:id= "@+id/viewpager"
  android:layout_width= "Match_parent"
  android:layout_height= "Match_parent" >

  <android.support.v4.view.pagertabstrip
   android:layout_ Width= "Match_parent"
   android:layout_height= "wrap_content"
   android:layout_gravity= "Top"
   android: Background= "@android: Color/holo_blue_light"
   android:textcolor= "@android: Color/white"/>
 </ Android.support.v4.view.viewpager>

</LinearLayout>

We can set the Layout_gravity property, such as top or bottom, to control the location of the display. In addition, no additional settings are required.

The rest is what we need to implement in the code.

Import java.util.ArrayList;

Import java.util.List;
Import Android.os.Bundle;
Import android.support.v4.app.Fragment;
Import android.support.v4.app.FragmentActivity;
Import Android.support.v4.app.FragmentPagerAdapter;

Import Android.support.v4.view.ViewPager;
 public class Pagertabstripactivity extends Fragmentactivity {private list<fragment> fragments;
 Private Viewpager Viewpager;

 Private list<string> titlelist;
  @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (R.layout.main);
 Initview ();

  private void Initview () {Viewpager = (Viewpager) Findviewbyid (R.id.viewpager);
  Titlelist = new arraylist<string> ();
  Titlelist.add ("latest recommendation");
  Titlelist.add ("Game Entertainment");

  Titlelist.add ("AV video");
  Fragments = new arraylist<fragment> (); Fragments.add (New Myfragment, Android.
  R.color.holo_green_light)); Fragments.add (New Myfragment, Android.
  R.color.holo_orange_light)); Fragments.add (New Myfragment (Android.

  R.color.holo_red_light)); Fragmentpageradapter adapter = new Fragmentpageradapter (Getsupportfragmentmanager ()) {@Override public int ge
   Tcount () {return 3;
   @Override public Fragment getitem (int position) {return fragments.get (position);
   @Override public charsequence getpagetitle (int position) {return titlelist.get (position);

  }

  };

 Viewpager.setadapter (adapter);

 }
}

In the above code, we show how we control the text of the caption, we just need to rewrite the Getpagertitle method.
Now let's take a look at the Pagertabstrip with examples:

Pagertabstrip is an interactive indicator of Viewpager about the current page, the previous page, and the next page. It is often added as a child control of the Viewpager control in an XML layout file. In your layout file, add it as a child control in the Viewpager. And you want to set its Android:layout_gravity property to top or bottom to display it at the tops or bottom of the viewpager. The title of each page is provided to Viewpager by the getpagetitle (int) function of the adapter.
Usage is exactly the same as Pagertitlestrip, namely:

1, first of all, the article mentions: in your layout file, it is added as a child control in the Viewpager.

2. Second, the title is obtained by overriding the Getpagetitle (int) function of the adapter.

Take a look at the example:
1. XML layout

<relativelayout 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 " 
  tools:context= "com.example.testviewpage_2.MainActivity" > 
 
  <android.support.v4.view.viewpager 
    android:id= "@+id/viewpager" 
    android:layout_width= "wrap_content" 
    android:layout_height= "WRAP_" Content " 
    android:layout_gravity=" center "> 
     
        <android.support.v4.view.pagertabstrip 
      android: Id= "@+id/pagertab" 
      android:layout_width= "match_parent" 
      android:layout_height= "Wrap_content  
      " android:layout_gravity= "Top"/> 
     
  </android.support.v4.view.ViewPager> 
 
</RelativeLayout> 

As you can see, the same thing is to insert pagertabstrip as a child control of Viewpager, and of course android:layout_gravity= "" is set to top or bottom as the value.
2, rewrite the adapter getpagetitle () function
All code:

Package com.example.testviewpage_2; 
Import java.util.ArrayList; 
 
Import java.util.List; 
Import android.app.Activity; 
Import Android.os.Bundle; 
Import Android.support.v4.view.PagerAdapter; 
Import Android.support.v4.view.ViewPager; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
 
Import Android.view.ViewGroup; 
  public class Mainactivity extends activity {private View view1, View2, VIEW3; Private list<view> viewlist;//View array private Viewpager Viewpager; 
 
  The corresponding Viewpager private list<string> titlelist; 
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
 
    Setcontentview (R.layout.activity_main); 
    Viewpager = (Viewpager) Findviewbyid (R.id.viewpager); 
    Layoutinflater inflater = Getlayoutinflater (); 
    View1 = inflater.inflate (R.LAYOUT.LAYOUT1, NULL); 
    View2 = inflater.inflate (r.layout.layout2, NULL); 
 
 VIEW3 = inflater.inflate (R.LAYOUT.LAYOUT3, NULL);   Viewlist = new arraylist<view> ()//The View to be displayed is loaded into the array viewlist.add (VIEW1); 
    Viewlist.add (VIEW2); 
 
    Viewlist.add (VIEW3); 
    Titlelist = new arraylist<string> ();//title data for each page Titlelist.add ("Wang Peng"); 
    Titlelist.add ("Ginger language"); 
 
    Titlelist.add ("marriage"); Pageradapter pageradapter = new Pageradapter () {@Override public boolean isviewfromobject (View arg0, Obje 
      CT arg1) {//TODO auto-generated method stub return arg0 = = Arg1; @Override public int GetCount () {//TODO auto-generated a stub return Viewlist.s 
      Ize (); 
        @Override public void Destroyitem (ViewGroup container, int position, object object) { 
      TODO auto-generated Method Stub Container.removeview (Viewlist.get (position)); @Override public Object Instantiateitem (viewgroup container, int position) {//TODO Auto-gener Ated Method Stub
        Container.addview (Viewlist.get (position)); 
      return Viewlist.get (position); @Override public charsequence getpagetitle (int position) {return Titlelist.get (posit 
      ION); 
 
    } 
    }; 
 
  Viewpager.setadapter (Pageradapter); 

 } 
 
}

The code here is exactly the same as the Pagertitlestrip, and is no longer explained.
In this way, we have finished talking about the simple use of pagertabstrip. Here's a talk about Pagertabstrip extensions.

3, Extension: Pagertabstrip property changes
In the source code, you can see that there is a project called Testviewpage_pagertabstrip_extension, run a bit, the effect is this:

As you can see in the above two figures, I have changed two places:

(1) Underline color, native is black, I turned green;

(2) Add a picture before the tab title;

Here's how to change it:

1, change the underline color:
Mainly rely on the Settabindicatorcolorresource method of Pagertabstrip;

The code is as follows:

Pagertabstrip = (Pagertabstrip) Findviewbyid (r.id.pagertab); 
Pagertabstrip.settabindicatorcolorresource (R.color.green); 

2, add title--Rewrite adapter charsequence getpagetitle (int) method
The return value of the charsequence getpagetitle (int position) method is that we do not return a string object, and the Spannablestringbuilder is used to construct an extended string image containing the picture;
The specific code as follows, no longer detailed, we can see the use of Spannablestringbuilder, you can understand.

@Override public 
charsequence getpagetitle (int position) { 
 
  Spannablestringbuilder SSB = new Spannablestringbuilder ("" +titlelist.get (position)); Space added before text 
                    //for 
  drawable mydrawable = Getresources (). getdrawable ( 
      R.drawable.ic_launcher ); 
  Mydrawable.setbounds (0, 0, mydrawable.getintrinsicwidth (), 
      mydrawable.getintrinsicheight ()); 
  Imagespan span = new Imagespan (mydrawable, 
      imagespan.align_baseline); 
 
  Foregroundcolorspan FCS = new Foregroundcolorspan (color.green);//font color set to green 
  Ssb.setspan (span, 0, 1, spannable.span_exclusive_exclusive)//Set icon 
  Ssb.setspan (FCS, 1, Ssb.length (), 
      spannable.span_exclusive_ EXCLUSIVE)//Set Font color 
  ssb.setspan (new Relativesizespan (1.2f), 1, Ssb.length (), 
      spannable.span_exclusive_ EXCLUSIVE); 
  return SSB; 
}