ViewPager+Fragment的使用

在使用ViewPager之前我们应该知道下面几点：

  1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。

  2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。

  3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

在这里 Activity布局的ViewPager 用Java代码实现，然后使用ViewPager的页面去托管Fragment，并分别为每个页面的Fragment传入不同的数据，用以区分不同的页。

首先我定义一个MyData类，用来传递数据

public class MyData implements Serializable{
	public String name;
	public String age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	@Override
	public String toString() {
		return "MyDate [name=" + name + ", age=" + age + "]";
	}
	
}

FragmentManager 要求任何作用于Fragment容器的视图都必须具有资源ID.ViewPager作为Fragment的容器，因此必须赋予其资源ID。

在values/ids.xml 这个文件下面创建ViewPager的ID

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item type="id" name="viewPager"/>
</resources>

Activity的Java代码：

public class MainActivity extends FragmentActivity {

	private ViewPager viewpager;
	private ArrayList<MyData> list = new ArrayList<MyData>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        viewpager = new ViewPager(this);
        viewpager.setId(R.id.viewPager);
        setContentView(viewpager);
        setData();
        
        FragmentManager fm = getSupportFragmentManager();
        viewpager.setAdapter(new FragmentStatePagerAdapter(fm) {
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return list.size();
			}
			
			@Override
			public Fragment getItem(int position) {
				// TODO Auto-generated method stub
				//获取Fragment的实例，并传入数据
				return pagerFragment.newInstance(list.get(position));
			}
		});
    }
    
    //设置了三组数据，分别显示ViewPager在不同页面的Fragment
	private void setData() {
		// TODO Auto-generated method stub
		MyData matao = new MyData();
        matao.setName("马涛");
        matao.setAge("20");
        list.add(matao);
        
        final MyData liuhao = new MyData();
        liuhao.setName("刘浩");
        liuhao.setAge("21");
        list.add(liuhao);
        
        MyData tangxiaobin = new MyData();
        tangxiaobin.setName("唐小兵");
        tangxiaobin.setAge("22");
        list.add(tangxiaobin);
	}

}

Fragment的布局代码很简单，就用来显示age和name的值

<?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:background="#FFFFFF"
    android:orientation="vertical" >

     <Button
         android:id="@+id/name"
         android:layout_width="fill_parent"
         android:layout_height="40dp"
         android:layout_marginTop="20dp"
         android:layout_marginLeft="50dp"
         android:layout_marginRight="50dp"
         android:background="#EEC900"
         android:text="马涛"
         android:textColor="#FFFFFF"
         android:textSize="20sp" />

  	<Button
	 android:id="@+id/age"
	 android:layout_width="fill_parent"
	 android:layout_height="40dp"
	 android:background="#EEC900"
	 android:textColor="#FFFFFF"
	 android:textSize="20sp"
         android:layout_marginLeft="50dp"
         android:layout_marginRight="50dp"
	 android:layout_marginTop="20dp"
	 android:text="20" />

</LinearLayout>

Fragment的Java代码如下：

public class pagerFragment extends Fragment{

	public static String key = "hnust.matao.pagerFragment";
	public MyData data;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		data = (MyData) getArguments().getSerializable(key);
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.fragment_layout, container, false);
		
		Button name = (Button) view.findViewById(R.id.name);
		Button age = (Button) view.findViewById(R.id.age);
		name.setText(data.getName());
		age.setText(data.getAge());
		
		return view;
	}

	public static pagerFragment newInstance(MyData data){
	
		Bundle args = new Bundle();
		args.putSerializable(key, data);
		pagerFragment pf = new pagerFragment();
		pf.setArguments(args);
		
		return pf;
	}
	

}

实现的效果如下：

图一 二 三 分别表示ViewPager的三个页面中的Fragment

      

图四 为滑动时的效果：

需要源代码的朋友请联系QQ:657415669