ViewPager

一、布局文件

---

PagerTabStrip 和 PagerTitleStrip 是 ViewPager 的子控件，都是用来实现标题栏的，基本区别不大：

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

另外每一页准备一个各自的布局文件。如：

view_1.xml：

view_2.xml：

view_3.xml：

---

二、代码

---

public class ViewPagerTest extends AppCompatActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;
    private ArrayList viewList=new ArrayList<>();
    private ArrayList titleList=new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_pager);

        viewPager=(ViewPager)findViewById(R.id.view_pager);
        pagerTabStrip=(PagerTabStrip)findViewById(R.id.pager_tab_strip);

        // 设置tab背景色
        pagerTabStrip.setBackgroundColor(Color.BLUE);
        // 设置下划线颜色
        pagerTabStrip.setTabIndicatorColor(Color.WHITE);
        pagerTabStrip.setTextColor(Color.WHITE);

        View view1= LayoutInflater.from(this).inflate(R.layout.view_1,null);
        View view2= LayoutInflater.from(this).inflate(R.layout.view_2,null);
        View view3= LayoutInflater.from(this).inflate(R.layout.view_3,null);

        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        titleList.add("页面1");
        titleList.add("页面2");
        titleList.add("页面3");

        viewPager.setAdapter(new PagerAdapter() {
            @Override
            //每次滑动的时候生成的组件
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }

            @Override
            //viewpager中的组件数量
            public int getCount() {
                return viewList.size();
            }

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

            @Override
            public int getItemPosition(Object object) {
                return super.getItemPosition(object);
            }

            @Override
            //滑动切换的时候销毁当前的组件
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }

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

1. 准备两个 ArrayList 存放所有页面 view 和各自的标题

private ArrayList viewList=new ArrayList<>(); 
private ArrayList titleList=new ArrayList<>();

2. 创建每个页面的实例，并通过 LayoutInflater 的 inflate() 方法为其加载布局

View view1= LayoutInflater.from(this).inflate(R.layout.view_1,null); 
View view2= LayoutInflater.from(this).inflate(R.layout.view_2,null); 
View view3= LayoutInflater.from(this).inflate(R.layout.view_3,null);

3. 把 view 和标题加入到 ArrayList 里

viewList.add(view1);
viewList.add(view2);
viewList.add(view3);

titleList.add("页面1");
titleList.add("页面2");
titleList.add("页面3");

4. 为 ViewPager 对象设置适配器 PagerAdapter，并复写一系列方法

        viewPager.setAdapter(new PagerAdapter() {
            @Override
            //每次滑动的时候生成的组件
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }

            @Override
            //viewpager中的组件数量
            public int getCount() {
                return viewList.size();
            }

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

            @Override
            public int getItemPosition(Object object) {
                return super.getItemPosition(object);
            }

            @Override
            //滑动切换的时候销毁当前的组件
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }

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

在这里将 ViewPager 和上面的页面数据联系到一起。

5. 还可对 PagerTabStrip 做一些配置

pagerTabStrip=(PagerTabStrip)findViewById(R.id.pager_tab_strip); 

// 设置tab背景色 
pagerTabStrip.setBackgroundColor(Color.BLUE); 
// 设置下划线颜色 
pagerTabStrip.setTabIndicatorColor(Color.WHITE); 
pagerTabStrip.setTextColor(Color.WHITE);

6. 效果。可左右滑动，也可点击标题换页

7. 缺陷

ViewPager 存在一些缺陷。

1. pagerTabStrip.setDrawFullUnderline(false) 设置无效果。
2. pagerTabStrip.setTextSpacing(100) 设置无效果。
   所以要实现以下标题栏效果，只能想别的方法。
   
   
   
   如使用开源 PagerSlidingTabStrip。

8. PagerSlidingTabStrip

dependencies {
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
}

......
    
    

    
    
......

pagerSlidingTabStrip=(PagerSlidingTabStrip)findViewById(R.id.pager_tab);

pagerSlidingTabStrip.setDividerColor(Color.WHITE);
pagerSlidingTabStrip.setIndicatorColor(Color.RED);
pagerSlidingTabStrip.setIndicatorHeight(8);
pagerSlidingTabStrip.setUnderlineHeight(4);
pagerSlidingTabStrip.setAllCaps(false);

pagerSlidingTabStrip.setViewPager(viewPager);

// 作者建议用 pagerSlidingTabStrip 代替 viewPager 设置 OnPageChangeListener()
pagerSlidingTabStrip.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(MainActivity.this, "1", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});