第五课 viewPager实现页面滑动

在一个页面中左右滑动显示不同页面，提供不同功能
本例是左右滑动能切换页面，点击上面的按钮也能切换页面。而且页面切换的同时，上面的按钮也会做出相应改变。

总体步骤

1. 在布局中增加ViewPager控件
2. 为控件中的各个子View建立相对应的布局文件
3. 在Activity中获取ViewPager对象
4. 在Activity中初始化个子View对象
5. 使用数组或者List存储子View对象
6. 生成PagerAdapter对象
7. 给ViewPager设置PagerAdapter对象

步骤一

在主页面中添加viewPager控件<android.support.v4.view.ViewPager>

要求

1. ViewPager要有id号

代码

<RelativeLayout 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=".MainActivity" >

    <LinearLayout  android:id="@+id/head" android:layout_height="40dp" android:layout_width="match_parent" android:orientation="horizontal" android:gravity="top">

        <TextView android:id="@+id/fun_bmi" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:text="@string/fun_bmi" android:background="#CCCCCC"/>
        <TextView android:id="@+id/fun_bfr" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:text="@string/fun_bfr" android:background="#CCCCCC"/>
        <TextView android:id="@+id/fun_xxx" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:text="@string/fun_xxx" android:background="#CCCCCC"/>

    </LinearLayout>

    <android.support.v4.view.ViewPager  android:id="@+id/viewPager" android:layout_height="match_parent" android:layout_width="match_parent" android:layout_below="@id/head" android:gravity="center">
    </android.support.v4.view.ViewPager>

</RelativeLayout>

步骤二

要求

1. 为每个子view创建xml文件

代码

例如res/layout中文件目录关系如下
    res/layout/activity_main.xml 主界面，内含viewPager控件
    res/layout/page1.xml
    res/layout/page2.xml
    res/layout/page3.xml
以上3个page{1,2,3}.xml是不同的子view，里面随你发挥，会被加载到activity.xml中的viewPager控件中

步骤三

要求

1. 在Activity中获取ViewPager对象
2. 在Activity中初始化个子View对象
3. 使用数组或者List存储子View对象
4. 生成PagerAdapter对象
5. 给ViewPager设置PagerAdapter对象

代码

private View view_bmi, view_bfr, view_whtr;
private ViewPager viewPager;
private List<View> viewList;
private TextView[] tvArr;
private TextView tv_bmi, tv_bfr, tv_whtr;
private LayoutInflater inflater;

// 初始化每个xml中的控件

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    // 获得在activity_main.xml中的viewPager
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    inflater = getLayoutInflater();
    // 获取每一个view
    view_bmi = inflater.inflate(R.layout.bmi, null);
    view_bfr = inflater.inflate(R.layout.bfr, null);
    view_whtr = inflater.inflate(R.layout.whtr, null);
    // 将每一个view加入到view列表中
    viewList = new ArrayList<View>();
    viewList.add(view_bmi);
    viewList.add(view_bfr);
    viewList.add(view_whtr);
    // 初始化每个view的功能
    initBMI();
    initBFR();
    initWHTR();
    // 找到最上方3个按钮
    tv_bmi = (TextView) findViewById(R.id.fun_bmi);
    tv_bfr = (TextView) findViewById(R.id.fun_bfr);
    tv_whtr = (TextView) findViewById(R.id.fun_xxx);
    // 为每个按钮设置OnClickListener
    tv_bmi.setOnClickListener(new MyOnClickListener(0, viewPager));
    tv_bfr.setOnClickListener(new MyOnClickListener(1, viewPager));
    tv_whtr.setOnClickListener(new MyOnClickListener(2, viewPager));
    // 将每个按钮添加到按钮数组中，这里的按钮通过TextView实现
    tvArr = new TextView[3];
    tvArr[0] = tv_bmi;
    tvArr[1] = tv_bfr;
    tvArr[2] = tv_whtr;
    // 给viewPager设置Adapter
    viewPager.setAdapter(new MyPagerAdapter(viewList));
    // 给viewPager设置PageChangeListener，为了每次点击上面3个按钮切换页面，让按钮显示高亮来说明切换到哪个页面
    viewPager.setOnPageChangeListener(new MyOnPageChangeListener(tvArr));

}

总结

接下来的步骤是为了本步骤服务的

步骤四

要求

1. 当view切换的时候，上面3个按钮做出相应改变

代码

public class MyOnPageChangeListener implements OnPageChangeListener {

    private TextView[] tvArr;

    public MyOnPageChangeListener(TextView[] tvArr) {
        // TODO Auto-generated constructor stub
        this.tvArr = tvArr;
    }

    @Override
    // arg0代表哪个view被选中，然后对应的按钮变色
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        for (int i=0; i<tvArr.length; i++){
            tvArr[i].setBackgroundColor(Color.BLUE);
            if(arg0 != i)
                tvArr[i].setBackgroundColor(Color.parseColor("#CCCCCC"));
        }
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }

}

总结

重写了OnPageChangeListener里的方法。针对view的改变而改变按钮的背景色等等

步骤五

要求

1. 单击每个按钮就会切换到相应页面

代码

public class MyOnClickListener implements OnClickListener {

    private int pos;
    private ViewPager viewPager;

    public MyOnClickListener(int pos, ViewPager viewPager) {
        // TODO Auto-generated constructor stub
        this.pos = pos;
        this.viewPager = viewPager;
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        viewPager.setCurrentItem(pos);
    }

}

总结

1. 初始化的时候，就把每一个按钮对应一个页面，每次点击就切换
2. 之后viewPager的setOnPageChangeListener方法会在页面被改变的时候改变按钮
3. 因为我们需要在滑动页面的时候（没按按钮），按钮会随之改变。

步骤六

要求

1. 给viewPager设置Adapter
2. 接受了view的列表

代码

public class MyPagerAdapter extends PagerAdapter {

    private List<View> viewList;

    public MyPagerAdapter(List<View> viewList) {
        // TODO Auto-generated constructor stub
        this.viewList = viewList;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return viewList.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        // TODO Auto-generated method stub
        ((ViewPager) container).removeView(viewList.get(position));
    }

    @Override
    public Object instantiateItem(View container, int position) {
        // TODO Auto-generated method stub
        ((ViewPager) container).addView(viewList.get(position));
        return viewList.get(position);
    }

}

总结

判断是否滑动，滑动的话会做出什么反应