使用Fragment填充ViewPager

今天我们实现的是使用Fragment来填充ViewPager，首先说一下，很重要，我们要使用Fragment

来填充ViewPager布局的话。我们所有的类所继承的类的包都是在v4包下的，注意咯！这句话我可能描述的不是很清楚，没事，

我们在代码中都有解释。

具体的实现步骤：

1、在activity_main.xml文件中定义一个LinearLayout布局，其中包含4个TextView，就是我们的title

然后下面是一个ViewPager

2、定义一个类MyFragment继承v4包下的Fragment，并新建一个布局文件填充到Fragment中

3、在MainActivity中实现相应的代码实现。

好了，接下来我们根据步骤来写代码吧：

1、activity_main.xml文件

<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"
     >
	<LinearLayout 
	    android:id="@+id/layout"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal"
	    android:padding="10dp">
	    <TextView 
	        android:id="@+id/tv_news"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:text="新闻"/>
	    <TextView 
	        android:id="@+id/tv_sports"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:text="体育"/>
	    <TextView 
	        android:id="@+id/tv_play"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:text="娱乐"/>
	    <TextView 
	        android:id="@+id/tv_weather"
	        android:layout_width="0dp"
	        android:layout_height="wrap_content"
	        android:layout_weight="1"
	        android:textSize="15sp"
	        android:text="天气"/>
	</LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/layout"></android.support.v4.view.ViewPager>

</RelativeLayout>

2、我们定义的xml文件和MyFragment：

<?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:padding="10dp" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="信息"
        android:textSize="18sp" />

</LinearLayout>

MyFragment：

package com.example.text_04;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

//注意：这里继承的Fragment是v4包下的Fragment
public class MyFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment, null);
		TextView tv = (TextView) view.findViewById(R.id.tv);
		//获取MainActivity传来的值并进行相对应的设置
		Bundle bundle = getArguments();
		int index = bundle.getInt("tabIndex");
		switch (index) {
		case 0:
			tv.setText("新闻");
			break;
		case 1:
			tv.setText("体育");
			break;
		case 2:
			tv.setText("娱乐");
			break;
		case 3:
			tv.setText("天气");
			break;

		default:
			break;
		}
		return view;
	}
}

以上这些都是比较简单的，最重要的是在MainActivity中的具体实现，这才是学习的重点：

package com.example.text_04;

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

import android.os.Bundle;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

//这里继承的是FragmentActivity
public class MainActivity extends FragmentActivity {

	private ViewPager viewPager;
	private MyFragment fragment;
	// 存储每个页面的Fragment
	private List<Fragment> fragments;
	private TextView[] titles;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		// 创建集合初始化页面的Fragment
		initFragment();
		// 初始化标题
		initTitle();
		MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		// 设置ViewPager的监听事件
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			// 单页面被选择时
			@Override
			public void onPageSelected(int arg0) {
				for (int i = 0; i < titles.length; i++) {
					// 设置标题背景为灰色
					titles[i].setBackgroundColor(Color.GRAY);
				}
				// 设置当前页面的title为黄色
				titles[arg0].setBackgroundColor(Color.YELLOW);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
	}

	// 初始化标题的函数
	private void initTitle() {
		titles = new TextView[fragments.size()];
		// 获取activity_main.xml文件中的LinearLayout
		LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
		for (int i = 0; i < titles.length; i++) {
			// 这里通过getChildAt方法获得LinearLayou布局下的4个TextView
			titles[i] = (TextView) layout.getChildAt(i);
			// 设置标题的背景为灰色
			titles[i].setBackgroundColor(Color.GRAY);
			// 给标题设置一个标记便于给title[i]设置监听事件时切换不同的Pager
			titles[i].setTag(i);
			titles[i].setOnClickListener(new View.OnClickListener() {

				@Override
				public void onClick(View v) {
					// 获取标记，设置ViewPager当前显示的页面,获得与titles[i]相同索引的pager页面
					viewPager.setCurrentItem((Integer) v.getTag());
				}
			});
		}
		// 第一个默认选中为黄色
		titles[0].setBackgroundColor(Color.YELLOW);
	}

	// 初始化Fragment页面
	private void initFragment() {
		fragments = new ArrayList<Fragment>();
		for (int i = 0; i < 4; i++) {
			fragment = new MyFragment();
			Bundle bundle = new Bundle();
			// 我们自定义一个标记传给Fragment，便于区分我们在Fragment中对不同的界面设置不同的属性
			bundle.putInt("tabIndex", i);
			fragment.setArguments(bundle);
			// 把Fragment添加到Fragment集合中
			fragments.add(fragment);
		}
	}

	// PagerAdapter适用于View
	// 如果ViewPager加载Fragment，只能用FragmentPagerAdapter
	class MyAdapter extends FragmentPagerAdapter {

		public MyAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int arg0) {
			return fragments.get(arg0);
		}

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

	}

}

运行结果：