前言:在前两篇文章中,我们讲解了滑动页面的的实现方法与四大函数的意义,但有时,仅仅实现页面滑动是不够的,还要有标题栏才会显得更友好。所以在这篇文章中,我将会向大家展示在Android.support.v4包中的两个控件PagerTabStrip与PagerTitleStrip,他们都是用来实现标题栏的,但各自有些不同,在这篇文章中,我们就讲讲它们各自都能实现怎样的功能,又有哪些异同点。

相关文章:

1、《ViewPager 详解(一)---基本入门》

2、《ViewPager 详解(二)---详解四大函数》

3、《ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同》

4、《ViewPager 详解(四)----自主实现滑动指示条》

5、《ViewPager 详解(五)-----使用Fragment实现ViewPager滑动》

一、PagerTitleStrip

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

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

  

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

Class Overview


PagerTitleStrip is a non-interactive indicator of the current, next, and previous pages of a ViewPager. It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the methodgetPageTitle(int) in the adapter supplied to the ViewPager.

For an interactive indicator, see PagerTabStrip.

翻译:

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

我可能译的不大通顺,这里英文也难度不大,大家应该也能看得懂,但我还是着重讲两点:

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

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

根据这两点,我们就可以看代码了:

1、XML布局文件:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context="com.example.testviewpage_2.MainActivity" >
  6. <android.support.v4.view.ViewPager
  7. android:id="@+id/viewpager"
  8. android:layout_width="wrap_content"
  9. android:layout_height="200dip"
  10. android:layout_gravity="center">
  11. <android.support.v4.view.PagerTitleStrip
  12. android:id="@+id/pagertitle"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:layout_gravity="top"
  16. />
  17. </android.support.v4.view.ViewPager>
  18. </RelativeLayout>

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

2、重写适配器的getPageTitle()函数

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

  1. package com.example.testviewpage_2;
  2. /**
  3. * @author  harvic
  4. * @date 2014.8.12
  5. */
  6. import java.util.ArrayList;
  7. import java.util.List;
  8. import android.app.Activity;
  9. import android.os.Bundle;
  10. import android.support.v4.view.PagerAdapter;
  11. import android.support.v4.view.PagerTitleStrip;
  12. import android.support.v4.view.ViewPager;
  13. import android.view.LayoutInflater;
  14. import android.view.View;
  15. import android.view.ViewGroup;
  16. public class MainActivity extends Activity {
  17. private View view1, view2, view3;
  18. private List<View> viewList;// view数组
  19. private ViewPager viewPager; // 对应的viewPager
  20. private List<String> titleList;  //标题列表数组
  21. @Override
  22. protected void onCreate(Bundle savedInstanceState) {
  23. super.onCreate(savedInstanceState);
  24. setContentView(R.layout.activity_main);
  25. viewPager = (ViewPager) findViewById(R.id.viewpager);
  26. LayoutInflater inflater = getLayoutInflater();
  27. view1 = inflater.inflate(R.layout.layout1, null);
  28. view2 = inflater.inflate(R.layout.layout2, null);
  29. view3 = inflater.inflate(R.layout.layout3, null);
  30. viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
  31. viewList.add(view1);
  32. viewList.add(view2);
  33. viewList.add(view3);
  34. titleList = new ArrayList<String>();// 每个页面的Title数据
  35. titleList.add("王鹏");
  36. titleList.add("姜语");
  37. titleList.add("结婚");
  38. PagerAdapter pagerAdapter = new PagerAdapter() {
  39. @Override
  40. public boolean isViewFromObject(View arg0, Object arg1) {
  41. // TODO Auto-generated method stub
  42. //根据传来的key,找到view,判断与传来的参数View arg0是不是同一个视图
  43. return arg0 == viewList.get((int)Integer.parseInt(arg1.toString()));
  44. }
  45. @Override
  46. public int getCount() {
  47. // TODO Auto-generated method stub
  48. return viewList.size();
  49. }
  50. @Override
  51. public void destroyItem(ViewGroup container, int position,
  52. Object object) {
  53. // TODO Auto-generated method stub
  54. container.removeView(viewList.get(position));
  55. }
  56. @Override
  57. public Object instantiateItem(ViewGroup container, int position) {
  58. // TODO Auto-generated method stub
  59. container.addView(viewList.get(position));
  60. //把当前新增视图的位置(position)作为Key传过去
  61. return position;
  62. }
  63. @Override
  64. public CharSequence getPageTitle(int position) {
  65. // TODO Auto-generated method stub
  66. return titleList.get(position);
  67. }
  68. };
  69. viewPager.setAdapter(pagerAdapter);
  70. }
  71. }

相比较《ViewPager 详解(二)---详解四大函数》这里作了一点更改:

1、变量

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

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

2、初始化

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

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

3、重写CharSequence getPageTitle(int )函数

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

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

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

  1. @Override
  2. public CharSequence getPageTitle(int position) {
  3. // TODO Auto-generated method stub
  4. switch (position) {
  5. case 0:
  6. return "王鹏";
  7. case 1:
  8. return "姜语";
  9. case 2:
  10. return "结婚";
  11. default:
  12. return "";
  13. }
  14. }

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

二、PagerTabStrip

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

此例是以《ViewPager 详解(一)---基本入门》为基础,更改而成;

    

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

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

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

同样,先看看官方对PagerTabStrip的解释:

Class Overview


PagerTabStrip is an interactive indicator of the current, next, and previous pages of a ViewPager. It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the methodgetPageTitle(int) in the adapter supplied to the ViewPager.

For a non-interactive indicator, see PagerTitleStrip.

翻译:

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

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context="com.example.testviewpage_2.MainActivity" >
  6. <android.support.v4.view.ViewPager
  7. android:id="@+id/viewpager"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_gravity="center">
  11. <android.support.v4.view.PagerTabStrip
  12. android:id="@+id/pagertab"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:layout_gravity="top"/>
  16. </android.support.v4.view.ViewPager>
  17. </RelativeLayout>

可以看到,同样,是将PagerTabStrip作为ViewPager的一个子控件直接插入其中,当然android:layout_gravity=""的值一样要设置为top或bottom。

2、重写适配器的getPageTitle()函数

全部代码:

  1. package com.example.testviewpage_2;
  2. /**
  3. * @author  harvic
  4. * @date 2014.8.13
  5. */
  6. import java.util.ArrayList;
  7. import java.util.List;
  8. import android.app.Activity;
  9. import android.os.Bundle;
  10. import android.support.v4.view.PagerAdapter;
  11. import android.support.v4.view.ViewPager;
  12. import android.view.LayoutInflater;
  13. import android.view.View;
  14. import android.view.ViewGroup;
  15. public class MainActivity extends Activity {
  16. private View view1, view2, view3;
  17. private List<View> viewList;// view数组
  18. private ViewPager viewPager; // 对应的viewPager
  19. private List<String> titleList;
  20. @Override
  21. protected void onCreate(Bundle savedInstanceState) {
  22. super.onCreate(savedInstanceState);
  23. setContentView(R.layout.activity_main);
  24. viewPager = (ViewPager) findViewById(R.id.viewpager);
  25. LayoutInflater inflater = getLayoutInflater();
  26. view1 = inflater.inflate(R.layout.layout1, null);
  27. view2 = inflater.inflate(R.layout.layout2, null);
  28. view3 = inflater.inflate(R.layout.layout3, null);
  29. viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
  30. viewList.add(view1);
  31. viewList.add(view2);
  32. viewList.add(view3);
  33. titleList = new ArrayList<String>();// 每个页面的Title数据
  34. titleList.add("王鹏");
  35. titleList.add("姜语");
  36. titleList.add("结婚");
  37. PagerAdapter pagerAdapter = new PagerAdapter() {
  38. @Override
  39. public boolean isViewFromObject(View arg0, Object arg1) {
  40. // TODO Auto-generated method stub
  41. return arg0 == arg1;
  42. }
  43. @Override
  44. public int getCount() {
  45. // TODO Auto-generated method stub
  46. return viewList.size();
  47. }
  48. @Override
  49. public void destroyItem(ViewGroup container, int position,
  50. Object object) {
  51. // TODO Auto-generated method stub
  52. container.removeView(viewList.get(position));
  53. }
  54. @Override
  55. public Object instantiateItem(ViewGroup container, int position) {
  56. // TODO Auto-generated method stub
  57. container.addView(viewList.get(position));
  58. return viewList.get(position);
  59. }
  60. @Override
  61. public CharSequence getPageTitle(int position) {
  62. return titleList.get(position);
  63. }
  64. };
  65. viewPager.setAdapter(pagerAdapter);
  66. }
  67. }

这里的代码与PagerTitleStrip的完全相同,就不再讲解了。

就这样,我们就讲完了有关PagerTabStrip的简单使用方法。下面讲一讲PagerTabStrip的扩展。

3、扩展:PagerTabStrip属性更改

在源码中,大家可以看到有个工程叫TestViewPage_PagerTabStrip_extension,运行一下,效果是这样的:

    

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

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

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

下面说说是如何更改的:

1、更改下划线颜色:

主要靠PagerTabStrip的setTabIndicatorColorResource方法;

代码如下:

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

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

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

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

  1. @Override
  2. public CharSequence getPageTitle(int position) {
  3. SpannableStringBuilder ssb = new SpannableStringBuilder("  "+titleList.get(position)); // space added before text
  4. // for
  5. Drawable myDrawable = getResources().getDrawable(
  6. R.drawable.ic_launcher);
  7. myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(),
  8. myDrawable.getIntrinsicHeight());
  9. ImageSpan span = new ImageSpan(myDrawable,
  10. ImageSpan.ALIGN_BASELINE);
  11. ForegroundColorSpan fcs = new ForegroundColorSpan(Color.GREEN);// 字体颜色设置为绿色
  12. ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 设置图标
  13. ssb.setSpan(fcs, 1, ssb.length(),
  14. Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 设置字体颜色
  15. ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(),
  16. Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  17. return ssb;
  18. }

三、总结

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

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

参考文章:

《Android多屏滑动:ViewPager基础使用及PagerTabStrip先天缺陷(附源码)》

《android:修改PagerTabStrip中的背景颜色,标题字体的样式、颜色和图标以及指示条的颜色》

所有源码打包在一起,分为三个:

1、TestViewPage_pagerTitleStrip:pagerTitleStrip实现实例

2、TestViewPage_PagerTabStrip :PagerTabStrip实现实例

3、TestViewPage_PagerTabStrip_extension:PagerTabStrip的扩展实现

源码下载地址:http://download.csdn.net/detail/harvic880925/7747417

 

请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/38521865 谢谢!

ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同的更多相关文章

  1. [转]ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同

      目录(?)[-] 一PagerTitleStrip Class Overview XML布局文件 重写适配器的getPageTitle函数 变量 初始化 重写CharSequence getPag ...

  2. ViewPager 详解(四)----自主实现滑动指示条

    前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了.在第三篇<ViewPager 详解(三)---PagerTabStrip与PagerTitleStr ...

  3. ViewPager 详解(五)-----使用Fragment实现ViewPager滑动

    前言:前几篇文章讲解了ViewPager的普通实现方法,但Android官方最推荐的一种实现方法却是使用fragment,下面我们使用fragment来重新实现一下第一篇<ViewPager 详 ...

  4. ViewPager 详解(二)---详解四大函数

    前言:上篇中我们讲解了如何快速实现了一个滑动页面,但问题在于,PageAdapter必须要重写的四个函数,它们都各有什么意义,在上节的函数内部为什么要这么实现,下面我们就结合Android的API说明 ...

  5. ViewPager 详解(一)---基本入门

    前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块.要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打算将Vi ...

  6. Android 之窗口小部件详解(三)  部分转载

    原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...

  7. WebSocket安卓客户端实现详解(三)–服务端主动通知

    WebSocket安卓客户端实现详解(三)–服务端主动通知 本篇依旧是接着上一篇继续扩展,还没看过之前博客的小伙伴,这里附上前几篇地址 WebSocket安卓客户端实现详解(一)–连接建立与重连 We ...

  8. python设计模式之装饰器详解(三)

    python的装饰器使用是python语言一个非常重要的部分,装饰器是程序设计模式中装饰模式的具体化,python提供了特殊的语法糖可以非常方便的实现装饰模式. 系列文章 python设计模式之单例模 ...

  9. .NET DLL 保护措施详解(三)最终效果

    针对.NET DLL 保护措施详解所述思路完成最终的实现,以下为程序包下载地址 下载 注意: 运行环境为.net4.0,需要安装VS2015 C++可发行组件包vc_redist.x86.exe.然后 ...

随机推荐

  1. 转:常用的HTML标签和属性解释

    基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含 ...

  2. UIView之常用方法

    UIView之常用方法 将一个视图添加为子视图,并使之在最上面显示 -(void)addSubView:(UIView *)view; 将指定子视图移动到顶部 -(void)bringSubViewT ...

  3. .net中XML的创建01(传统方法)

    XML传统的创建: 传统的创建主要是依据XmlDocument的对象展开的,通过XmlDocument对象可以创建元素(XmlElement).属性(XmlAttribute)以及文本节点(Creat ...

  4. Ajax的工作流程简述

    提到Ajax相信我们都不会陌生,不管你是前端开发还是后台数据处理的程序员,ajax的作用就像现在生活中的手机一样,无论是作用还是流程都差不多,这里我们要进行ajax操作后台数据并显示在页面上的话,首先 ...

  5. 如何做好Flex与Java交互

    三种flex4与Java顺利通信的方式是: flex与普通java类通信RemoteObject; flex与服务器交互HTTPService; flex与webservice交互WebService ...

  6. Extjs之遍历Store内的数据

    Store作为数据的载体,通过下面的方法可以获得Store内的数据; Ext.define('haomlGeimjTongjGrid_store_data', { extend: 'Ext.data. ...

  7. link与@import

    导入外部样式的两种写法 <link rel="stylesheet" href="xxxx.css"> <style> @import ...

  8. 利用WebApi获取手机号码归属地

    前述: 在WebApi中,涉及到一个重要的类,HttpWebRequest. 学习link:httpwebrequest详解 示例演示: 代码示例: 1.前端代码: @{ ViewBag.Title ...

  9. poj 2892 &&hdu 1540 Tunnel Warfare

    http://poj.org/problem?id=2892 #include <cstdio> #include <cstring> #include <algorit ...

  10. SCALA中的抽象类代码样例

    package com.hengheng.scala class AbstractClass { } abstract class People { def speak val name : Stri ...