欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

程序员文章站 2024-03-03 16:02:04
零、概览 1.viewpager说白了就是个控件,在使用时包名要带全是android.support.v4.view.viewpager。由于我的adt-bundle版本...

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

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

如果在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
先看个简单的,先上个效果图,吸引大家一下眼球。
三个页面间的滑动,此时是带着上面的标题一块滑动的。

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

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做出来的效果是怎样的。

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

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

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,运行一下,效果是这样的:

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

Android中ViewPager的PagerTabStrip与PagerTitleStrip用法实例

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

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