ViewPager的用法实例

前言：最近在做一个项目，文件管理器，能够在主界面通过滑动选择：手机，内存卡，云端的不同界面，因此就用到了ViewPager。

　　起步阶段，ViewPager写好了，对应的Adapter也写好了，测试通过，在ViewPager中的子项都是用ListView来布局，发现ListView中的数据单独测试能够显示，一旦和ViewPager合并在一起ListView就显示不出来，后来和一些实例源码作比较，才知道是在ViewPager的适配器的instantiateItem()中，返回的时候返回错了，本来应该返回适配的控件view的，竟然返回了ViewGroup了。。。

　　其中每个View不是使用ListView来做的，仅仅是放了一个图片（因为是测试ViewPager的问题），最终的效果如下图

　　

　　下面是单独的ViewPager的源码，

1.清单文件 activity_main.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<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.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.v4.view.ViewPager>

</LinearLayout>

2.子view对应的vp_phone.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

  <ImageView
        android:id="@+id/image_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:scaleType="fitXY"
        />

</LinearLayout>

3.主类代码MainActivity.java如下：

package com.zyf.android.filemanage;

import java.io.File;
import java.util.ArrayList;

import com.zyf.android.adapter.MyPagerAdapter;
import com.zyf.androidfilemanage.R;

import android.app.Activity;
import android.os.Bundle;

import android.support.v4.view.ViewPager;
import android.view.View;

public class MainActivity extends Activity {

    private ArrayList<View> views;

    private ArrayList<File> files;
    public static int LIST_GRID_MODE =0;
    public static int LIST_MODE =0;
    public static int GRID_MODE =1;

    //private ArrayList<>

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
        views = new ArrayList<View>();
        View view0 =getLayoutInflater().inflate(R.layout.vp_phone, null);
        View view1 =getLayoutInflater().inflate(R.layout.vp_phone, null);
        View view2 =getLayoutInflater().inflate(R.layout.vp_phone, null);
        views.add(view0);
        views.add(view1);
        views.add(view2);
        viewPager.setAdapter(new MyPagerAdapter(views));
    }
}

4.ViewPager的适配器MyPagerAdapter.java代码如下：

package com.zyf.android.adapter;

import java.util.ArrayList;

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

public class MyPagerAdapter extends PagerAdapter {

    private ArrayList<View> views;
    private String[] pagerTabStrip={"手机","存储卡","云端"};

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

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

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return pagerTabStrip[position];
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        View view = views.get(position);

        container.addView(view);
        return view;  //出错的地方就是这里，原来返回了container导致错误，运行的时候看不出来
    }
}

上面的代码比较简单，作出的效果也很简单，不过在这个基础上把子View的ImageView换成其他的，比如ListView的话，显示效果会更好些