Android UI 基础之ViewPager的使用

 ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包括了只有只有在Android 3.0 以上可以使用的api，而ViewPager就是其中之一，我们使用ViewPager可以完场很多事情，从最简单的导航，到页面菜单等， 其用发与ListView用法类似，也许要一个适配器  PageAdapter。

ViewPager实现页面切换：

效果如下：

 

 ViewPager是谷歌一个向下兼容包（android-support-v4.jar）里面的类，所以要使用它先引入android-support-v4.jar。该jar包一般存在于android SDK目录sdk\extras\android\support\v4下面。

 

效果二：

 

实现过程：

在布局中添加控件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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.xiyou.com.viewpageruse.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/viewpagertab"
            layout_gravity="top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

android.support.v4.view.PagerTitleStrip 用来显示顶部标题。 

在MainActivity 中找到ViewPager控件和PagerTitleStrip 控件

pager = (ViewPager) findViewById(R.id.viewpager);
tabStrip = (PagerTabStrip) findViewById(R.id.viewpagertab);

为ViewPager写数据适配器， ViewPager使用的是数据适配器是PagerAdapter

所以要继承PagerAdapter（抽象类）写个实现类。

class MypageAdapter extends PagerAdapter {
    @Override

//返回页卡的数量
    public int getCount() {
        return views.size();
    }

    // 实例化页卡
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View v = views.get(position);
        container.addView(v);
        return v;
    }

    // 删除选项卡
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    // 判断当前视图V是否为返回的对象
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    // 设置标签显示的标题
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

定义每一个图片的布局，在MainActivity中将布局文件布局转换为View 

并且添加到动态数组中，以便在适配器中使用。

 private String[] titles = {"引导一", "引导二", "引导三", "引导四"};
private ArrayList<View> views = new ArrayList<>();

views.add(getLayoutInflater().inflate(R.layout.layout1, null));
views.add(getLayoutInflater().inflate(R.layout.layout2, null));
views.add(getLayoutInflater().inflate(R.layout.layout3, null));
views.add(getLayoutInflater().inflate(R.layout.layout4, null));

设置PagerTitleStrip 的属性

分别为指示器的颜色，背景色，以及字体颜色

tabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
tabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_orange_light));
tabStrip.setTextColor(Color.WHITE);

 完整代码如下：

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private ViewPager pager;
    private PagerTabStrip tabStrip;
    private String[] titles = {"引导一", "引导二", "引导三", "引导四"};
    private ArrayList<View> views = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager = (ViewPager) findViewById(R.id.viewpager);
        tabStrip = (PagerTabStrip) findViewById(R.id.viewpagertab);
        // 设置默认显示的选项卡
        pager.setCurrentItem(2);
        invitViews();
        pager.setAdapter(new MypageAdapter());
        pager.setOnPageChangeListener(this);
    }
    // 添加布局
    private void invitViews() {
        views.add(getLayoutInflater().inflate(R.layout.layout1, null));
        views.add(getLayoutInflater().inflate(R.layout.layout2, null));
        views.add(getLayoutInflater().inflate(R.layout.layout3, null));
        views.add(getLayoutInflater().inflate(R.layout.layout4, null));
        tabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
        tabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_orange_light));
        tabStrip.setTextColor(Color.WHITE);
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        Toast.makeText(MainActivity.this, "当前选中的是页面" + position, Toast.LENGTH_SHORT).show();
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
    class MypageAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return views.size();
        }
        // 实例化每一个布局
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = views.get(position);
            container.addView(v);
            return v;
        }
        // 删除选项卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }
        // 判断当前视图V是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        // 获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}