ViewPager 详解（三）——PagerTabStrip与PagerTitleStrip添加标题栏

潇湘落木life

 关注

阅读 55

2022-06-07

系列文章：

  1. ViewPager 详解（一）——基本入门
  2. ViewPager 详解（二）——四大函数
  3. ViewPager 详解（三）——PagerTabStrip与PagerTitleStrip添加标题栏
  4. ViewPager 详解（四）——自主实现滑动指示条X
  5. ViewPager 详解（五)——使用Fragment实现ViewPager滑动

PagerTitleStrip

在Android.support.v4包中的两个控件PagerTabStrip与PagerTitleStrip，他们都是用来实现标题栏的，但各自有些不同，在这篇文章中，我们就讲讲它们各自都能实现怎样的功能，又有哪些异同点

PagerTitleStrip的官方解释

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

ViewPager 详解（三）——PagerTabStrip与PagerTitleStrip添加标题栏_ide

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp">

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

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    private View view1,view2,view3;
    private ViewPager viewPager;
    private List<View> viewList;

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

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager)findViewById(R.id.viewpager);
        LayoutInflater layoutInflater = getLayoutInflater();
        view1 = layoutInflater.inflate(R.layout.layout1,null);
        view2 = layoutInflater.inflate(R.layout.layout2,null);
        view3 = layoutInflater.inflate(R.layout.layout3,null);

        viewList = new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        titleList = new ArrayList<String>();//每个页面的title数据
        titleList.add("page one");
        titleList.add("page two");
        titleList.add("page three");

        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View view, Object object) {
                //return view == object;
                //根据传来的key，找到view,判断与传来的参数View view是不是同一个视图
                return view == viewList.get((int)Integer.parseInt(object.toString()));
            }

            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                container.removeView(viewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                //return viewList.get(position);
                return position;
            }
            @Override
            public CharSequence getPageTitle(int positon){
                return titleList.get(positon);
            }
        };

        viewPager.setAdapter(pagerAdapter);
    }
}

跟上一节的代码比较有如下改动

1、变量

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

2、初始化

        titleList = new ArrayList<String>();//每个页面的title数据
        titleList.add("page one");
        titleList.add("page two");
        titleList.add("page three");

3、重写CharSequence getPageTitle(int )函数

     @Override
            public CharSequence getPageTitle(int positon){
                return titleList.get(positon);
            }

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

 @Override
            public CharSequence getPageTitle(int positon){
                switch (positon){
                    case 0:
                        return "page one";
                    case 1:
                        return "page two";
                    case 2:
                        return "page three";
                    default:
                        return "";
                }
          
            }

PagerTabStrip

PagerTabStrip的官方解释

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

PagerTabStrip与PagerTitleStrip的不同

除了第一句以外的其它句与PagerTitleStrip的解释完全相同。只是PagerTabStrip是可交互的，而PagerTitleStrip是不可交互的区别。

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

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

效果图

ViewPager 详解（三）——PagerTabStrip与PagerTitleStrip添加标题栏_ide_02

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp">


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

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    private View view1,view2,view3;
    private ViewPager viewPager;
    private List<View> viewList;

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

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager)findViewById(R.id.viewpager);
        LayoutInflater layoutInflater = getLayoutInflater();
        view1 = layoutInflater.inflate(R.layout.layout1,null);
        view2 = layoutInflater.inflate(R.layout.layout2,null);
        view3 = layoutInflater.inflate(R.layout.layout3,null);

        viewList = new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        titleList = new ArrayList<String>();//每个页面的title数据
        titleList.add("page one");
        titleList.add("page two");
        titleList.add("page three");

        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View view, Object object) {
                //return view == object;
                //根据传来的key，找到view,判断与传来的参数View view是不是同一个视图
                return view == viewList.get((int)Integer.parseInt(object.toString()));
            }

            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                container.removeView(viewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                //return viewList.get(position);
                return position;
            }

            @Override
            public CharSequence getPageTitle(int position){
                return titleList.get(position);
            }
        };

        viewPager.setAdapter(pagerAdapter);
    }
}

PagerTabStrip属性更改

ViewPager 详解（三）——PagerTabStrip与PagerTitleStrip添加标题栏_viewpager_03

更改下划线颜色

tabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
        tabStrip.setTabIndicatorColorResource(R.color.colorAccent);

修改PagerTabStrip中的背景颜色

直接修改背景色

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

添加标题——重写适配器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_finger_right);
                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(),
                        myDrawable.getIntrinsicHeight());
                ImageSpan span = new ImageSpan(myDrawable,
                        ImageSpan.ALIGN_BASELINE);

                ForegroundColorSpan fcs = new ForegroundColorSpan(Color.RED);// 字体颜色设置为绿色
                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都没有用这个玩意的。所以这里也只是一个过渡，在开发中，我们也不建议使用这两个东东

总结自：启航大神的博客

相关推荐

Android UI设计（引导界面）：ViewPager之三PagerTabStrip与PagerTitleStrip添加标题栏的区别

独兜曲 55 0 0

Android v4包下的PagerTitleStrip PagerTabStrip ViewPager的页面标题

Gaaidou 94 0 0

qt 去掉标题栏

向上的萝卜白菜 90 0 0

QDockWidget去掉标题栏

冶炼厂小练 137 0 0

标题栏拖拽移动案例

上善若水山西太原 64 0 0

动态实现隐藏标题栏

彭维盛 63 0 0

android studio 去除标题栏

Spinach菠菜 84 0 0

更改figure的标题栏显示

小北的爹 132 0 0

Andorid 获取系统标题栏高度

witmy 89 0 0

如何自定义标题栏

Sky飞羽 34 0 0

精彩评论（0）

0 0 举报