ViewPager与PagerTabStrip的基本使用方法

在android开发中viewpager是一个实用性超强的控件。下面就viewpager与PagerTabStrip的基本使用做一些总结。

Viewpager的基本用法

viewpager的用法与listview差不多都需要下面两个条件

1. 数据源

2. 适配器Adapter

   数据源就不多说了，一般情况下就是将视图加到List集合中。然后在adapter中的instantiateItem方法中呈现。基本代码如下：

activity

List<View> list = new ArrayList<>();
        LayoutInflater inflater = LayoutInflater.from(this);
        list.add(inflater.inflate(R.layout.viewpager_list_1, null));
        list.add(inflater.inflate(R.layout.viewpager_list_2, null));
        list.add(inflater.inflate(R.layout.viewpager_list_3, null));
        list.add(inflater.inflate(R.layout.viewpager_list_4, null));
        list.add(inflater.inflate(R.layout.viewpager_list_5, null));
        mViewPager.setAdapter(new ViewPagerAdapter(this, list,strings));

PagerAdapter中

    @Override
    public int getCount() {
        if (null != mVapgerView) {
            return mVapgerView.size();
        }
        return 0;
    }
    //这个方法用于判断是否由对象生成界面
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    //这个方法，是从ViewGroup中移出当前View
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mVapgerView.get(position));
    }
    //这个方法实例化的意思,也就是将当前需要呈现的视图呈现。
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = mVapgerView.get(position);
        container.addView(view);
        return view;
    }

pagertabstrip是如何设置的呢？很简单

.xml

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

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab"
            android:layout_width="wrap_content"
            android:layout_height="50dp"/>
    </android.support.v4.view.ViewPager>

.java

mPagerTabStrip = (PagerTabStrip)findViewById(R.id.pager_tab);
        //设置页眉的基本属性
        //取消页眉下的一条线
        mPagerTabStrip.setDrawFullUnderline(false);
        //设置tab的下划线颜色
        mPagerTabStrip.setTabIndicatorColor(Color.RED);

pagertab在页面中是怎样呈现的？

通过PagerAdapter中的

@Override
    public CharSequence getPageTitle(int position) {
    //这里返回的是页眉的字串内容；
        return mTabText.get(position);
    }

直接将字串返回给页眉；
是不是很简单；

完整代码如下：
Activity:

package com.example.bankman.view;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

import com.example.bankman.R;
import com.example.bankman.adapter.ViewPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by yuchao on 17/2/18.
 */
public class ViewPagerActivity extends Activity {

    private ViewPager mViewPager;
    private PagerTabStrip mPagerTabStrip;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager);
        initView();
        initData();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab);
        //设置页眉的基本属性
        //取消页眉下的一条线
        mPagerTabStrip.setDrawFullUnderline(false);
        //设置tab的下划线颜色
        mPagerTabStrip.setTabIndicatorColor(Color.RED);
    }

    private void initData() {
        List<View> list = new ArrayList<>();
        List<String> strings = new ArrayList<>();

        LayoutInflater inflater = LayoutInflater.from(this);
        list.add(inflater.inflate(R.layout.viewpager_list_1, null));
        list.add(inflater.inflate(R.layout.viewpager_list_2, null));
        list.add(inflater.inflate(R.layout.viewpager_list_3, null));
        list.add(inflater.inflate(R.layout.viewpager_list_4, null));
        list.add(inflater.inflate(R.layout.viewpager_list_5, null));

        strings.add("海贼王");
        strings.add("龙珠超");
        strings.add("火影忍者");
        strings.add("一拳超人");
        strings.add("东京食尸鬼");

        mViewPager.setAdapter(new ViewPagerAdapter(this, list,strings));
    }
}

PagerAdapter

package com.example.bankman.adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by yuchao on 17/2/18.
 */
public class ViewPagerAdapter extends PagerAdapter {
    private static final String TAG = ViewPagerAdapter.class.getSimpleName();
    private Context mContext;
    private List<View> mVapgerView;
    private List<String> mTabText;
    private int mI;

    public ViewPagerAdapter(Context context, List<View> data, List<String> text) {
        mContext = context;
        mVapgerView = data;
        mTabText = text;
    }
    @Override
    public int getCount() {
        if (null != mVapgerView) {
            return mVapgerView.size();
        }
        return 0;
    }
    //这个方法用于判断是否由对象生成界面
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    //这个方法，是从ViewGroup中移出当前View
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mVapgerView.get(position));
    }
    //这个方法实例化的意思,也就是将当前需要呈现的视图呈现。
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = mVapgerView.get(position);
        container.addView(view);
        return view;
    }
    //得到tab的字串;
    @Override
    public CharSequence getPageTitle(int position) {
        return mTabText.get(position);
    }
}

这里只是对ViewPager的一些最基本的使用方法做了一些介绍，在实际开发中是很少会用到PagerTabStrip这个的，因为效果实在是太差。下面我们再介绍一种简单，并且效果比PagerTabStrip要好上许多的控件。

用最简单的方法实现app菜单页面的切换。

在上一章中我们介绍了PagerTabStrip与ViewPager结合使用，发现虽然功能实现了但是效果很难看。
在这里我们再介绍一个ViewPager连用的控件TabLayout.

TabLayout使用方法

添加jar包

compile 'com.android.support:design:24.2.0'

.xml与PagerTabStrip有所不同。如下：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/pager_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

在java代码中与PagerTabStrip差不多。如下：

 mViewPager.setAdapter(adapter);
 mTabLayout.setSelectedTabIndicatorColor(Color.RED);
 mTabLayout.setSelectedTabIndicatorHeight(10);
 //关联ViewPager
 mTabLayout.setupWithViewPager(mViewPager);
 mTabLayout.setTabsFromPagerAdapter(adapter);

完整代码如下：
activity

package com.example.bankman.view;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

import com.example.bankman.R;
import com.example.bankman.adapter.ViewPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by yuchao on 17/2/21.
 */
public class ViewPagerTab extends Activity {

    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager_tab);
        initView();
        initData();
    }

    private void initView() {

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) findViewById(R.id.pager_tab);
    }

    private void initData() {
        List<View> list = new ArrayList<>();
        List<String> strings = new ArrayList<>();

        LayoutInflater inflater = LayoutInflater.from(this);
        list.add(inflater.inflate(R.layout.viewpager_list_1, null));
        list.add(inflater.inflate(R.layout.viewpager_list_2, null));
        list.add(inflater.inflate(R.layout.viewpager_list_3, null));
        list.add(inflater.inflate(R.layout.viewpager_list_4, null));
        list.add(inflater.inflate(R.layout.viewpager_list_5, null));

        strings.add("海贼王");
        strings.add("龙珠超");
        strings.add("火影忍者");
        strings.add("一拳超人");
        strings.add("东京食尸鬼");
        ViewPagerAdapter adapter = new ViewPagerAdapter(this, list, strings);
        mViewPager.setAdapter(adapter);

        mTabLayout.setSelectedTabIndicatorColor(Color.RED);
        mTabLayout.setSelectedTabIndicatorHeight(10);
        //关联ViewPager
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(adapter);
    }

}

adapter

package com.example.bankman.adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by yuchao on 17/2/21.
 */
public class ViewPagerTabAdapter extends PagerAdapter {
    private Context mContext;
    private List<View> mViews;
    private List<String> mTitle;

    public ViewPagerTabAdapter(Context context, List<View> view, List<String> title) {
        mContext = context;
        mViews = view;
        mTitle = title;
    }

    @Override
    public int getCount() {
        if (null != mViews) {
            return mViews.size();
        }
        return 0;
    }

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

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

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

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