ViewPage中PagerTabStrip与PagerTitleStrip添加标题栏(三)

http://blog.youkuaiyun.com/to_be_designer/article/details/48193653

　在ViewPager中我们经常会看到在每个显示的页面上有标题显示，那么我们如何来通过代码来添加呢？Google在给我们提供的v4包中提供了两个控件PagerTabStrip与PagerTitleStrip，通过这两个控件可以在ViewPager中添加标题。 
　　

PagerTabStrip与PagerTitleStrip的异同

PagerTabStrip与PagerTitleStrip的使用基本相同，唯一不同的是：

1、PagerTabStrip在当前页面下，会有一个下划线条来提示当前页面的Tab是哪个。 
2、PagerTabStrip的Tab是可以点击的，当用户点击某一个Tab时，当前页面就会跳转到这个页面，而PagerTitleStrip则没这个功能。

　　　　　　　　　　　　　　　　　　　　　　　　　　　此处引用于大神 @harvic880925 的博客—博文连接

PagerTabStrip的使用

PagerTabStrip的使用有两点：

1. 在ViewPager布局中添加PagerTabStrip控件，设置layout_gravity属性，确定title的显示位置，一般我们都会定义在bottom或者top。 
2. 在自定义的PagerAdapter中重写getPageTitle(int position)方法。

　　ViewPager就这两个步骤，下面我们来看具体的代码实现： 
总体布局文件：

<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.lishuang.administrator.viewpager0901.TitleActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

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

    </android.support.v4.view.ViewPager>
</RelativeLayout>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

自定义MyPagerAdapterTitle继承PagerAdapter：

public class MyPagerAdapterTitle extends PagerAdapter {
    private List<View> mViews;
    private List<String> mTitles;//定义title集合

    public MyPagerAdapterTitle(List<View> mViews, List<String> mTitles) {
        this.mViews = mViews;
        this.mTitles = mTitles;//通过构造器将title数据传入。
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //删除View
        container.removeView(mViews.get(position));
    }

    //重写该方法
    @Override
    public CharSequence getPageTitle(int position) {
        //设置title
        return mTitles.get(position);
    }
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Activity中实现： 
（view1 ，view2 ，view3三个布局文件item_frist， item_second， item_third不再列出，每个布局只包含一个ImageView。）

public class TitleActivity extends Activity {

    private ViewPager mViewPagerTitle;
    private MyPagerAdapterTitle myPagerAdapterTitle;
    private LayoutInflater mInflater;
    private List<View> mViews;//初始化数据
    private List<String> mTitles;//初始化标题数据

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_title);
        mInflater = getLayoutInflater();
        mViewPagerTitle = (ViewPager) findViewById(R.id.viewpager_title);
        //初始化布局页面
        mViews = new ArrayList<View>();
        View view1 = mInflater.inflate(R.layout.item_frist, null);
        View view2 = mInflater.inflate(R.layout.item_second, null);
        View view3 = mInflater.inflate(R.layout.item_third, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        //初始化标题数据
        mTitles = new ArrayList<String>();
        String title1 = new String("PagerOne");
        String title2 = new String("PagerTwo");
        String title3 = new String("PagerThree");
        mTitles.add(title1);
        mTitles.add(title2);
        mTitles.add(title3);

        myPagerAdapterTitle = new MyPagerAdapterTitle(mViews, mTitles);
        mViewPagerTitle.setAdapter(myPagerAdapterTitle);
    }
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果展示： 

PagerTitleStrip的使用

　　PagerTabStrip的使用的使用与PagerTabStrip的使用完全相同。只需要将总体布局中的PagerTabStrip改为PagerTabStrip即可。

<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.lishuang.administrator.viewpager0901.TitleActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertabtitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top">
        </android.support.v4.view.PagerTitleStrip>

    </android.support.v4.view.ViewPager>
</RelativeLayout>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果展示：