android

使用PagerTabStrip实现有滑动标签的Viewpager

在ViewPager这种可以滑动的控件上，总是有很多的文章可以做。上次的文章，我们实现了一个自定义的ViewPager的指示器，这篇文章，我们主要是想利用Android自带的控件，实现一个指示器，这个控件，就是support-v4包里面的PagerTabStrip控件。

首先，我们先看一下实现效果，大饱眼福。

可以看到，效果实现的也是很棒，比之前自定义的标签指示器更加的流畅。下面，简单介绍一下PagerTabStrip和它的使用。

PagerTabStrip是v4支持包里面的类，是ViewPager专用的类，不能在其他地方使用。在使用的时候，我们只需要在ViewPager的布局里面声明即可。

如下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:background="@android:color/white"  
    android:orientation="vertical" >  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/viewPager"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  
  
        <android.support.v4.view.PagerTabStrip  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:layout_gravity="top"  
            android:background="@android:color/holo_blue_light"  
            android:textColor="@android:color/white" />  
    </android.support.v4.view.ViewPager>  
  
</LinearLayout>

我们可以设置layout_gravity属性，比如top或者是bottom，来控制显示的位置。除此之外，不需要进行其他设置。

剩下的，就是我们需要在代码里面实现的了。

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import java.util.ArrayList;  
import java.util.List;  
  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentActivity;  
import android.support.v4.app.FragmentPagerAdapter;  
import android.support.v4.view.ViewPager;  
  
public class PagerTabStripActivity extends FragmentActivity {  
  
    private List<Fragment> fragments;  
    private ViewPager viewPager;  
    private List<String> titleList;  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
        initView();  
    }  
  
    private void initView() {  
        viewPager = (ViewPager) findViewById(R.id.viewPager);  
  
        titleList = new ArrayList<String>();  
        titleList.add("最新推荐");  
        titleList.add("游戏娱乐");  
        titleList.add("影音视频");  
  
        fragments = new ArrayList<Fragment>();  
        fragments.add(new MyFragment(android.R.color.holo_green_light));  
        fragments.add(new MyFragment(android.R.color.holo_orange_light));  
        fragments.add(new MyFragment(android.R.color.holo_red_light));  
  
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(  
                getSupportFragmentManager()) {  
  
            @Override  
            public int getCount() {  
                return 3;  
            }  
  
            @Override  
            public Fragment getItem(int position) {  
                return fragments.get(position);  
            }  
  
            @Override  
            public CharSequence getPageTitle(int position) {  
                return titleList.get(position);  
            }  
  
        };  
  
        viewPager.setAdapter(adapter);  
  
    }  
}

在上面的代码里面，展现了我们如何控制标题的文字，我们只需要重写getPagerTitle方法即可。如果不想要下面的指示器，把PagerTabStrip换成PagerTitlestrip即可。可以把剩下的，就交给伟大的Android系统去做吧！