Android 应用开发----ViewPager---PagerTitleStrip添加标题栏

最新推荐文章于 2023-09-18 17:06:23 发布

zhangbijun1230

最新推荐文章于 2023-09-18 17:06:23 发布

阅读量878

点赞数

分类专栏： android 应用开发

android 应用开发专栏收录该内容

91 篇文章 11 订阅

订阅专栏

ViewPager 详解 PagerTabStrip与PagerTitleStrip添加标题栏的异同

一、PagerTitleStrip

先看个简单的，先上个效果图，吸引大家一下眼球。

三个页面间的滑动，此时是带着上面的标题一块滑动的。

看一下android 对于PagerTabStrip的官方解释：

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

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

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

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

1、XML布局文件：

[html] view plain copy

<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（）函数

便于大家有个整体认识，先贴全局代码，然后再逐个讲，这段代码是在《ViewPager 详解（二）---详解四大函数》直接更改来的，如果不太明白，先看看这篇文章。

[java] view plain copy

package com.example.testviewpage_2;
/**
* @author harvic
* @date 2014.8.12
*/
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);
}
}

相比较《ViewPager 详解（二）---详解四大函数》这里作了一点更改：

1、变量

[java] view plain copy

private List<String> titleList; //标题列表数组

申请了一个String数组，用来存储三个页面所对应的标题的

2、初始化

[java] view plain copy

titleList = new ArrayList<String>();// 每个页面的Title数据
titleList.add("王鹏");
titleList.add("姜语");
titleList.add("结婚");

在初始化阶段增加了这么一段初始化数组的代码。

3、重写CharSequence getPageTitle(int )函数

[java] view plain copy

@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}

根据位置返回当前所对应的标题。

大家可以看到，其实这里仅仅只重写了getPageTitle（）函数，将其根据不同的位置返回不同的字符串就可以实现上面的标题栏功能。第一和第二步有关数组和初始化，其实都是这了这一步，其实我们完全可以用下面这个代码来取代它们：

[java] view plain copy

@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
switch (position) {
case 0:
return "XX";
case 1:
return "XX";
case 2:
return "XX";
default:
return "";
}
}

这样效果是一样一样的，只是代码不好维护而已。好了，有关PagerTabStrip的问题，我们就先说到这。

二、PagerTabStrip

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

此例是以《ViewPager 详解（一）---基本入门》为基础，更改而成；

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

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

[html] view plain copy

<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（）函数

全部代码：

[java] view plain copy

package com.example.testviewpage_2;
/**
* @author harvic
* @date 2014.8.13
*/
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，运行一下，效果是这样的：

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

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

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

下面说说是如何更改的：

1、更改下划线颜色：

主要靠PagerTabStrip的setTabIndicatorColorResource方法；

代码如下：

[java] view plain copy

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

2、添加标题——重写适配器CharSequence getPageTitle(int)方法

在CharSequence getPageTitle(int position)方法返回值是，我们不返回String对象，而采用SpannableStringBuilder来构造了下包含图片的扩展String对像；

具体代码如下，不再细讲，大家可以看看SpannableStringBuilder的使用方法，就可理解了。

[java] view plain copy

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

三、总结

通过前面的讲解，我们应该清楚的认识到PagerTabStrip与PagerTitleStrip在添加标题栏的异同，但他们实现的标题栏效果很不好，不能指定一个页面一次显示一个，或者全部显示，而且标题还滑动。所以注定主流的App都没有用这个玩意的。所以这里也只是一个过渡，在开发中，我们也不建议使用这两个东东。

为什么无法改变PagerTabStrip的滑动特性，看这个贴子：《Fixed Tabs with android.support.v4.view.PagerTabStrip or ViewPagerIndicator》

zhangbijun1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 应用开发----ViewPager---PagerTitleStrip添加标题栏

ViewPager 详解 PagerTabStrip与PagerTitleStrip添加标题栏的异同一、PagerTitleStrip先看个简单的，先上个效果图，吸引大家一下眼球。三个页面间的滑动，此时是带着上面的标题一块滑动的。看一下android 对于PagerTabStrip的官方解释：PagerTabStrip是ViewPager的一个关于当前页面、上...
复制链接

扫一扫