Examples of Pagertabstrip and pagertitlestrip usages of Viewpager in Android _android

0. Overview
1.ViewPager Plainly is a control, in the use of the package name to take all is Android.support.v4.view.ViewPager. Because my Adt-bundle version is relatively high, this package is brought by default and is exported with APK packaged by default. The following figure:

If you don't have the package in Android Private libraries, add it yourself in the libraries of the attribute. Once added, remember to tick it in the order and export shown above.

2. Theoretically to achieve the slide screen as long as a viewpager can be, do not need to be nested in the following:

 <android.support.v4.view.pagertabstrip
  android:id= "@+id/pagertab"
  android:layout_width= "Match_ Parent "
  android:layout_height=" wrap_content " 
  android:layout_gravity=" Bottom "/>

This pagertabstrip is a horizontal line, if you want to use it to identify the current view in which you can add it, of course, eventually you will find that this is a pit dad's stuff. In addition to Pagertabstrip, there is a pagertitlestrip, the use of both the same status are the same, should be nested in the Viewpager. The difference is:

A, pagertabstrip in the effect of the inclusion of Pagertitlestrip, if only add Pagertabstrip can see only the line, but it occupies a certain height of the layout. The default is not to display the title, if you want to show the need to rewrite in the adapter:

 @Override public
 charsequence getpagetitle (int position) {
 //TODO auto-generated a stub
 return Mtitles[position];
 }

The title is displayed. About the title and the color of the line, and the entire logo view background can be set in the code, demo has an example.

B, Pagertitlestrip only show the title without that line.

C, Pagertabstrip can click to switch view, and Pagertitlestrip can not click. More See links

The position of the two relative to the Father Viewpager, that is, the identity is above or below the view, through the Pagertabstrip properties android:layout_gravity= "Bottom" to set.

3, as ListView, the key to Viewpager is the adapter, and to use normal use, you need to rewrite at least the following four methods:

@Override public 
 int GetCount () { 
 //TODO auto-generated a stub return 
 mlistviews.size (); 
 } 
 
 @Override Public 
 Boolean isviewfromobject (View arg0, Object arg1) { 
 //TODO auto-generated method stub 
 return (ARG0==ARG1); 
 } 
 @Override public 
 void Destroyitem (ViewGroup container, int position, object object) { 
 //TODO auto-generated Me Thod stub 
 Container.removeview (Mlistviews.get (position)); 
 } 
 @Override public 
 Object instantiateitem (viewgroup container, int position) { 
 //TODO auto-generated method Stub 
 Container.addview (Mlistviews.get (position), 0); 
 return Mlistviews.get (position); 
 } 

The following method is used to display the caption, generally not rewritten, because Pagertabstrip is a useless thing.

@Override public 
 charsequence getpagetitle (int position) { 
 //TODO auto-generated a stub 
 return Mtitles[position]; 
 } 

4, after the adapter is set, through Viewpager.setcurrentitem (1), to set the default Viewpager display which view. 1 identifies the second interface.
5, each view in the child control, through Initbtns () to obtain, pay attention to Findviewbyid must be preceded by its father. as follows:

BTN1 = (Button) View1.findviewbyid (R.id.btn_in_first);

The more rigorous approach is that the controls in this view can be monitored only when the current view is displayed.

6, when the view of Viewpager changes, set up listening:

Viewpager Sliding monitor
 Viewpager.setonpagechangelistener (new Onpagechangelistener () {


 @Override public
 Void onpageselected (int arg0) {
 //TODO auto-generated method stub
 showtoast ("Switch to: + mtitles[arg0]");


 @Override public
 void onpagescrolled (int arg0, float arg1, int arg2) {
 //TODO auto-generated method stub


 }< c12/> @Override public
 void onpagescrollstatechanged (int arg0) {
 //TODO auto-generated method stub


 }
 });

7, many methods in Pagertabstrip are ineffective such as pagertabstrip.settextspacing (40);

Pagertabstrip.setdrawfullunderline (TRUE);

First, Pagertitlestrip
first look at a simple, first effect map, to attract everyone to the eyeball.
Three sliding between pages, this time with the title of the above slide.

Pagertabstrip is a viewpager indicator of 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.

But I'm still focusing on two points:

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.

Based on these two points, we can look at the code:

1. xml layout file:

<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= "200dip" 
 android:layout_gravity= "center" > 
  
 <android.support.v4.view.pagertitlestrip 
  android:id= "@+ Id/pagertitle " 
  android:layout_width=" wrap_content " 
  android:layout_height=" Wrap_content " 
  Android : layout_gravity= "Top" 
  /> 
  
 </android.support.v4.view.ViewPager> 
 
</RelativeLayout> 

Clearly see that we will. Pagertitlestrip it directly into the Viewpager as a child control; This is the first step; the value of android:layout_gravity= "" is set to top or bottom. Displays the title bar at the top or bottom.

2, rewrite the adapter getpagetitle () function

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.PagerTitleStrip; 
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; 
 The title list array @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, Object arg1) {//TODO auto-generated method Stub//According to the key, find view, judge with the argument that came to view arg0 is not the same view return arg0 = = Viewlist.get (in 
  T) Integer.parseint (arg1.tostring ()); 
  @Override public int GetCount () {//TODO auto-generated a stub return viewlist.size (); @Override public void Destroyitem (ViewGroup container, int position, object) {//TODO Auto-genera 
  Ted Method Stub Container.removeview (Viewlist.get (position)); @Override public Object Instantiateitem (viewgroup container, int position) {//TODO auto-generated Method St Ub Container.addview (Viewlist.get (position)); 
  The current new view position (position) as key pass return position; @Override public charsequence getpagetitle (int position) {//TODO auto-generated a stub return titl 
  Elist.get (position); 
 
 } 
 }; 
 
 Viewpager.setadapter (Pageradapter); 

 } 
 
}

Second, Pagertabstrip
again, look at a pagertabstrip to do the effect is how.

may not see too much difference, in fact, these two implementations are basically the same effect, but there are two different:

1, Pagertabstrip under the current page, there will be a line below to indicate which tab is the current page.

2, Pagertabstrip tab is clickable, when the user clicks on a tab, the current page will jump to this page, and Pagertitlestrip does not have this function.

Again, let's take a look at the official explanation of Pagertabstrip:
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.

As you can see, other than the first sentence is exactly the same as the Pagertitlestrip interpretation. That is, the usage is the same. Only Pagertabstrip are interactive, and Pagertitlestrip are not interactive. For the difference in which position, that is the top two points (whether clickable with the underline indicator bar).

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 that will 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, Object arg1) 
  {//TODO auto-generated method stub return arg0 = = Arg1; 
  @Override public int GetCount () {//TODO auto-generated a stub return viewlist.size (); @Override public void Destroyitem (ViewGroup container, int position, object) {//TODO Auto-genera 
  Ted Method Stub Container.removeview (Viewlist.get (position)); @Override public Object Instantiateitem (viewgroup container, int position) {//TODO auto-generated Method St 
 
  UB Container.addview (Viewlist.get (position)); 
  return Viewlist.get (position); @Override public charsequence getpagetitle (int positiOn) {return titlelist.get (position); 
 
 } 
 }; 
 
 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 became green;

2, in the tab title before adding a picture;

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; 
}