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

来源：互联网发布：微云同步盘 mac 编辑：程序博客网时间：2024/05/22 00:10

PagerTitleStrip

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

PagerTitleStrip的官方解释

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

效果图

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则没这个功能。

效果图

PagerTabStrip效果图

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属性更改

PagerTabStrip属性更改效果图

更改下划线颜色

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都没有用这个玩意的。所以这里也只是一个过渡，在开发中，我们也不建议使用这两个东东

总结自：启航大神的博客http://blog.csdn.net/harvic880925/article/details/38521865

阅读全文

0 0