Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

2022-06-06 08:14

短信预约 -IT技能 免费直播动态提醒

零、概览
1.ViewPager说白了就是个控件，在使用时包名要带全是Android.support.v4.view.ViewPager。由于我的ADT-Bundle版本比较高，这个包默认自带了,且默认是随apk打包导出的。如下图:

2016629105303414.png (279×290)

2016629105343104.png (627×307)

如果在Android Private Libraries里没这个包，则要自己在属性的Libraries里自己添加。添加后记得在上图所示的Order and Export里将其打勾。

2.理论上说要实现滑屏只要一个ViewPager就可以了，不需要再在里面嵌套如下:


 <android.support.v4.view.PagerTabStrip
  android:id="@+id/pagertab"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" 
  android:layout_gravity="bottom"/>

这个PagerTabStrip就是个横线，如果想用它来标识当前在哪个View的话可以加它，当然最后你会发现这就是个坑爹的玩意。除了PagerTabStrip，还有一个PagerTitleStrip，两者的用法地位都是一样的，均要嵌套在ViewPager里。区别是：

a、PagerTabStrip在效果上包含了PagerTitleStrip，如果只添加PagerTabStrip可以看到只有线，但是它占的布局是有一定高度的。默认是不显示标题的，如果要显示需在适配器里重写：


 @Override
 public CharSequence getPageTitle(int position) {
 // TODO Auto-generated method stub
 return mTitles[position];
 }

就会显示标题了。关于标题及这个线的颜色，和整个标识View的背景可以再代码里设置，demo里有示例。

b、PagerTitleStrip只显示标题而没有那个线。

c、PagerTabStrip可以点击切换View，而PagerTitleStrip不能点击。更多参见链接

两者相对父亲ViewPager的位置，也就是标识是在View的上面还是下面，通过PagerTabStrip的属性android:layout_gravity="bottom"来设置。

3、就像ListView的一样，ViewPager的关键在于适配器，而要用正常使用需要至少重写以下四个方法:


@Override 
 public int getCount() { 
 // TODO Auto-generated method 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 method 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); 
 }

下面这个方法是用来显示标题的，一般不重写，因为PagerTabStrip是个中看不中用的玩意。


@Override 
 public CharSequence getPageTitle(int position) { 
 // TODO Auto-generated method stub 
 return mTitles[position]; 
 }

4、在设置适配器后，通过viewPager.setCurrentItem(1);来设置默认的ViewPager显示哪一个View。1标识第二个界面。
5、每个View里都用子控件，通过initBtns()来获得，注意findViewById时一定要前面加上它的父亲.如下：


btn1 = (Button)view1.findViewById(R.id.btn_in_first);

更为严谨的做法是只有显示当前View时，这个View里的控件才可以被监听。

6、当ViewPager的View发生变化时，设置监听:


//ViewPager滑动监听
 viewPager.setOnPageChangeListener(new OnPageChangeListener() {
 @Override
 public void onPageSelected(int arg0) {
 // TODO Auto-generated method stub
 showToast("切换至:" + mTitles[arg0]);
 }
 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {
 // TODO Auto-generated method stub
 }
 @Override
 public void onPageScrollStateChanged(int arg0) {
 // TODO Auto-generated method stub
 }
 });

7、PagerTabStrip里的很多方法都是没有效果的如pagerTabStrip.setTextSpacing(40);

pagerTabStrip.setDrawFullUnderline(true);

一、PagerTitleStrip
先看个简单的，先上个效果图，吸引大家一下眼球。
三个页面间的滑动，此时是带着上面的标题一块滑动的。

2016629105430222.png (300×500)

2016629105446935.png (300×500)

PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个非交互的指示器。它经常作为ViewPager控件的一个子控件被被添加在XML布局文件中。在你的布局文件中，将它作为子控件添加在ViewPager中。而且要将它的 android:layout_gravity 属性设置为TOP或BOTTOM来将它显示在ViewPager的顶部或底部。每个页面的标题是通过适配器的getPageTitle(int)函数提供给ViewPager的。

但我还是着重讲两点：

1、首先，文中提到：在你的布局文件中，将它作为子控件添加在ViewPager中。

2、第二，标题的获取，是重写适配器的getPageTitle(int)函数来获取的。

根据这两点，我们就可以看代码了：

1、XML布局文件：


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

清楚的看到我们将.PagerTitleStrip将其作为ViewPager的子控件直接嵌入其中；这是第一步；当然android:layout_gravity=""的值要设置为top或bottom。将标题栏显示在顶部或底部。

2、重写适配器的getPageTitle（）函数


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数组 
 private ViewPager viewPager; // 对应的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>();// 将要分页显示的View装入数组中 
 viewList.add(view1); 
 viewList.add(view2); 
 viewList.add(view3); 
 titleList = new ArrayList<String>();// 每个页面的Title数据 
 titleList.add("王鹏"); 
 titleList.add("姜语"); 
 titleList.add("结婚"); 
 PagerAdapter pagerAdapter = new PagerAdapter() { 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) { 
  // TODO Auto-generated method stub 
  //根据传来的key，找到view,判断与传来的参数View arg0是不是同一个视图 
  return arg0 == viewList.get((int)Integer.parseInt(arg1.toString())); 
  } 
  @Override 
  public int getCount() { 
  // TODO Auto-generated method stub 
  return viewList.size(); 
  } 
  @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-generated method stub 
  container.addView(viewList.get(position)); 
  //把当前新增视图的位置（position）作为Key传过去 
  return position; 
  } 
  @Override 
  public CharSequence getPageTitle(int position) { 
  // TODO Auto-generated method stub 
  return titleList.get(position); 
  } 
 }; 
 viewPager.setAdapter(pagerAdapter); 
 } 
}

二、PagerTabStrip
同样，先看个PagerTabStrip做出来的效果是怎样的。

2016629105738396.png (300×500)

2016629105756297.png (300×500)

可能看不出太大区别，其实这两个实现的效果基本差不多，但有两点不同：

1、PagerTabStrip在当前页面下，会有一个下划线条来提示当前页面的Tab是哪个。

2、PagerTabStrip的Tab是可以点击的，当用户点击某一个Tab时，当前页面就会跳转到这个页面，而PagerTitleStrip则没这个功能。

同样，先看看官方对PagerTabStrip的解释：
PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器。它经常作为ViewPager控件的一个子控件被被添加在XML布局文件中。在你的布局文件中，将它作为子控件添加在ViewPager中。而且要将它的 android:layout_gravity 属性设置为TOP或BOTTOM来将它显示在ViewPager的顶部或底部。每个页面的标题是通过适配器的getPageTitle(int)函数提供给ViewPager的。

可以看到，除了第一句以外的其它句与PagerTitleStrip的解释完全相同。即用法也是相同的。只是PagerTabStrip是可交互的，而PagerTitleStrip是不可交互的区别。对于区别在哪些位置，即是上面的两点（是否可点击与下划线指示条）。

用法与PagerTitleStrip完全相同，即：

1、首先，文中提到：在你的布局文件中，将它作为子控件添加在ViewPager中。

2、第二，标题的获取，是重写适配器的getPageTitle(int)函数来获取的。

看看实例：
1、XML布局


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

可以看到，同样，是将PagerTabStrip作为ViewPager的一个子控件直接插入其中，当然android:layout_gravity=""的值一样要设置为top或bottom。
2、重写适配器的getPageTitle（）函数
全部代码：


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数组 
 private ViewPager viewPager; // 对应的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>();// 将要分页显示的View装入数组中 
 viewList.add(view1); 
 viewList.add(view2); 
 viewList.add(view3); 
 titleList = new ArrayList<String>();// 每个页面的Title数据 
 titleList.add("王鹏"); 
 titleList.add("姜语"); 
 titleList.add("结婚"); 
 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 method stub 
  return viewList.size(); 
  } 
  @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-generated method stub 
  container.addView(viewList.get(position)); 
  return viewList.get(position); 
  } 
  @Override 
  public CharSequence getPageTitle(int position) { 
  return titleList.get(position); 
  } 
 }; 
 viewPager.setAdapter(pagerAdapter); 
 } 
}

这里的代码与PagerTitleStrip的完全相同，就不再讲解了。
就这样，我们就讲完了有关PagerTabStrip的简单使用方法。下面讲一讲PagerTabStrip的扩展。

3、扩展：PagerTabStrip属性更改
在源码中，大家可以看到有个工程叫TestViewPage_PagerTabStrip_extension，运行一下，效果是这样的：

2016629105508111.png (300×500)

2016629105524941.png (300×500)

在上面两个图中可以看到，我更改了两个地方：

1、下划线颜色，原生是黑色，我变成了绿色；

2、在Tab标题前加了一个图片；

下面说说是如何更改的：

1、更改下划线颜色：
主要靠PagerTabStrip的setTabIndicatorColorResource方法；

代码如下：


pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab); 
pagerTabStrip.setTabIndicatorColorResource(R.color.green);

2、添加标题——重写适配器CharSequence getPageTitle(int)方法
在CharSequence getPageTitle(int position)方法返回值是，我们不返回String对象，而采用SpannableStringBuilder来构造了下包含图片的扩展String对像；
具体代码如下，不再细讲，大家可以看看SpannableStringBuilder的使用方法，就可理解了。


@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);// 字体颜色设置为绿色 
 ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 设置图标 
 ssb.setSpan(fcs, 1, ssb.length(), 
  Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 设置字体颜色 
 ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(), 
  Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
 return ssb; 
}

您可能感兴趣的文章:Android App中ViewPager所带来的滑动冲突问题解决方法Android中ViewPager实现滑动条及与Fragment结合的实例教程Android中的ViewPager视图滑动切换类的入门实例教程android教程viewpager自动循环和手动循环android配合viewpager实现可滑动的标签栏示例分享使用ViewPager实现android软件使用向导功能实现步骤Android利用ViewPager实现滑动广告板实例源码Android ViewPager相册横向移动的实现方法Android App中使用ViewPager实现滑动分页的要点解析

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

viewpager Android

阅读原文内容投诉