Android ViewPager+Fragment Tab导航栏

我们在使用手机软件的时候回经常看到软件界面的顶部或者底部有几个小图标，滑动的时候页面会切换，小图标的状态也会改变。

在android上我们可以使用viewpager与fragment配合写出这样的效果。

首先看布局文件，activity_main.xml：

<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:id="@+id/viewpagerID"
    ></android.support.v4.view.ViewPager>
    <LinearLayout
        
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal" >

            <ImageView
                android:id="@+id/bottom_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/home_bottom1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal" >

            <ImageView
                android:id="@+id/bottom_find"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/find_bottom0" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal" >

            <ImageView
                android:id="@+id/bottom_mine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/mine_bottom0" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

布局文件也不复杂不多说，接下来看MainActivity，继承FragmentActivity。

public class MainActivity extends FragmentActivity implements
		OnPageChangeListener, OnClickListener {
	private ViewPager mViewPager;
	private List<Fragment> fragments;
	private ImageView homeImage;
	private ImageView findImage;
	private ImageView mineImage;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		fragments = new ArrayList<Fragment>();//为viewpager准备数据
		fragments.add(new HomeFragment());
		fragments.add(new FindFragment());
		fragments.add(new MineFragment());

		mViewPager = (ViewPager) findViewById(R.id.viewpagerID);
		homeImage = (ImageView) findViewById(R.id.bottom_home);
		findImage = (ImageView) findViewById(R.id.bottom_find);
		mineImage = (ImageView) findViewById(R.id.bottom_mine);
		//Viewpager与listview一样，也需要adapter提供数据，由于这次的界面是三个tab组成的，所以我们在上面用List准备了数据在这里传进去。
		mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),
				fragments));
		mViewPager.setOnPageChangeListener(this);//监听viewpager切换
		homeImage.setOnClickListener(this);//分别是三个iamgeview小图标的点击事件监听
		findImage.setOnClickListener(this);
		mineImage.setOnClickListener(this);
		
		mViewPager.setCurrentItem(0);//设置ViewPager刚开始的时候停在第一页

	}


	//tab切换的时候导航栏的小图标的状态也在变化，实际上就是imageview的图在切换。每一次设置图片状态前都初始化一次。
	private void initImageView() {
		homeImage.setImageResource(R.drawable.home_bottom0);
		findImage.setImageResource(R.drawable.find_bottom0);
		mineImage.setImageResource(R.drawable.mine_bottom0);
	}

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

	}

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

	}

	@Override
	public void onPageSelected(int arg0) {
		// TODO Auto-generated method stub
		initImageView();//更改图片前都初始化图片一次，下面写起来就方便点。
		switch (arg0) {
		case 0:
			homeImage.setImageResource(R.drawable.home_bottom1);
			break;
		case 1:
			findImage.setImageResource(R.drawable.find_bottom1);
			break;
		case 2:
			mineImage.setImageResource(R.drawable.mine_bottom1);
			break;
		}
	}
	//根据用户所点击的图片切换页面
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		if (homeImage.equals(v)) {
			mViewPager.setCurrentItem(0);
		}
		if (v.equals(findImage)) {
			mViewPager.setCurrentItem(1);
		}
		if (v.equals(mineImage)) {
			mViewPager.setCurrentItem(2);
		}
	}
}

接下来看Adapter的代码：

public class ViewPagerAdapter extends FragmentPagerAdapter{
private List<Fragment> fragments;
	public ViewPagerAdapter(FragmentManager fm,List<Fragment> fragments) {
		super(fm);
		this.fragments=fragments;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragments.get(arg0);
	}

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

}

可以看到写法跟Listview的Adapter的写法大同小异。

接下来就是三个Fragment，由于三个Fragment的写法大同小异，而且没什么代码所以就只贴一个算了：

public class HomeFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
		Bundle savedInstanceState) {
	// TODO Auto-generated method stub
	return inflater.inflate(R.layout.homefragment, container, false);
}
}

好了至此大功告成，我们来看看效果图：

源码下载