Android ViewPager的简单使用

很久以前写过一篇Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能，本篇文章简单一点，也是说ViewPager。有这么一个场景，在同一个Activity中，我们需要通过滑动来展示不同的布局界面，而ViewPager就是由于若干个不同的布局界面组成的。

按照惯例，我们先来看看效果图

接下来我们来看看具体的代码实现：
1、在布局中加入ViewPager。这里有一点需要注意，ViewPager的调用需要使用全名调用，也就是需要写清楚包名路径。

2、 ViewPager的使用显然需要使用Adapter适配器，定义一个ViewPager的适配器ViewPagerAdapter继承PagerAdapter。

package per.lijuan.viewpaper;

import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by juan on 2018/06/29.
 */
public class ViewPagerAdapter extends android.support.v4.view.PagerAdapter {
    private List mViewList;

    public ViewPagerAdapter(List mViewList) {
        this.mViewList = mViewList;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return (mViewList.get(position));
    }

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

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

3、我们要定义ViewPager中显示的不同的布局界面，这里我们定义两个界面：第一个页面是显示一张图片和按钮；第二个页面是显示一段文本和一个按钮。
（1）layout_one.xml

（2）layout_two.xml

4、在MAinActivity中，通过LayoutInflater加载这两个不同布局的界面， 保存在List中。创建ViewPagerAdapter的对象，然后通过viewPager的对象调用。

package per.lijuan.viewpaper;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private LayoutInflater mInflater;
    private ViewPager viewPager;
    private ViewPagerAdapter pagerAdapter;
    private List views;
    private View viewOne;
    private View viewTwo;
    private LinearLayout mLlDot;

    private Button mBtnOne;
    private Button mBtnTwo;

    /**
     * 当前显示的是第几页
     */
    private int curIndex = 0;

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

        mInflater = LayoutInflater.from(this);
        initView();
        setOvalLayout();
    }

    private void initView() {
        viewPager = findViewById(R.id.viewpager);
        mLlDot = (LinearLayout) findViewById(R.id.ll_dot);

        views = new ArrayList();
        viewOne = mInflater.inflate(R.layout.layout_one, null);
        viewTwo = mInflater.inflate(R.layout.layout_two, null);
        views.add(viewOne);
        views.add(viewTwo);
        pagerAdapter = new ViewPagerAdapter(views);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(curIndex);
        viewPager.setOffscreenPageLimit(2);
        viewPager.addOnPageChangeListener(this);

        mBtnOne = viewOne.findViewById(R.id.btn_one);
        mBtnTwo = viewTwo.findViewById(R.id.btn_two);

        mBtnOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "你点击第一个页面按钮", Toast.LENGTH_SHORT).show();
            }
        });
        mBtnTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "你点击第二个页面按钮", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        // 取消圆点选中
        mLlDot.getChildAt(curIndex)
                .findViewById(R.id.v_dot)
                .setBackgroundResource(R.drawable.dot_normal);
        // 圆点选中
        mLlDot.getChildAt(position)
                .findViewById(R.id.v_dot)
                .setBackgroundResource(R.drawable.dot_selected);
        curIndex = position;

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * 设置圆点
     */
    public void setOvalLayout() {
        for (int i = 0; i < views.size(); i++) {
            mLlDot.addView(mInflater.inflate(R.layout.dot, null));
        }
        // 默认显示第一页
        mLlDot.getChildAt(0).findViewById(R.id.v_dot)
                .setBackgroundResource(R.drawable.dot_selected);
    }
}

5、这里边我们还在ViewPager的下方增加了一个布局，用于动态加载小圆点的，当滑动到第几个ViewPager时，就改变第几个圆边的样式：
（1）dot.xml

（2）小圆点选中的样式为白色：
dot_selected.xml

（3）小圆点未选中的样式为灰色：
dot_normal.xml

好了，本篇文章就这样子了，存在不足的地方还望指导，感谢^_

源码下载