鱼鱼Chen之学写自己的apk（八）使用ViewPager和Fragment实现流行的底部导航

    不知道为什么，最近有些迷茫。大三的暑假马上就要到了，完全不知道应该怎么找实习，尤其还是我们这种大四居然还要上半学期课的。。。。真是焦虑、、、、

想着复习一下Fragment，然后就想到了做个类似很流行的底部导航的效果。也不是很难，之前用到了PageAdapter，而这边直接用到了FragmentPageAdapter

一、分析一下结构

还是很清晰的，3个自定义的Fragment类，一个自定义的适配器，主Activity，然后是对应的布局文件。

二、先完成3个自定义的Fragment

比如虫宝宝的Fragment和xml布局

xml布局

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/chongbaobao"
        android:text="野生的虫宝宝出现了！"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/chongbaobao"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:background="@drawable/chongbaobao" />

</RelativeLayout>

Fragment

public class CbbFragment extends Fragment {
	private long currentTime = -1;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_cbb, container, false);
		ImageView cbbView = (ImageView) view.findViewById(R.id.chongbaobao);
		cbbView.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if ((System.currentTimeMillis() - currentTime) > 1500) {
					Toast.makeText(getActivity(), "再点一次可以让虫宝宝进化！",
							Toast.LENGTH_SHORT).show();
					currentTime=System.currentTimeMillis();
				}else {
					((MainActivity)getActivity()).getevolution(1);
				}
			}
		});
		return view;
	}
}

其实只要

View view = inflater.inflate(R.layout.fragment_cbb, container, false);
		return view;

这两句就可以了，其余的部分的代是我写的关于在Fragment里切换的方法，有兴趣的可以自己看看，这边最后再做解释。

剩下两个类似，就不上代码了。

三、主布局

因为Fragment其实是用适配器装到ViewPager里了，所以这边只要有两部分就好

<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="com.dota.example.fishychenoffragment.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/relativeLayout_Bottom">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/linearLayout_Bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/background_bottombar" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btnCBB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/chongbaobao_selector" />

            <TextView
                android:id="@+id/textCBB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="@string/chongbaobao"
                android:textColor="@color/blue"
                android:textSize="25sp"
                android:textStyle="bold" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btnBBJ"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/baobaojian_selector" />

            <TextView
                android:id="@+id/textBBJ"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="@string/baobaojian"
                android:textColor="@color/blue"
                android:textSize="25sp"
                android:textStyle="bold" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btnBMC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/baomuchong_selector" />

            <TextView
                android:id="@+id/textBMC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="@string/baomuchong"
                android:textColor="@color/blue"
                android:textSize="25sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

四、主活动

我用了几个大方法把所有要执行的都装好了，一个个上

首先是自定义的方法，初始化

private void init() {
		btnCBB = (ImageButton) findViewById(R.id.btnCBB);
		btnBBJ = (ImageButton) findViewById(R.id.btnBBJ);
		btnBMC = (ImageButton) findViewById(R.id.btnBMC);
		textCBB = (TextView) findViewById(R.id.textCBB);
		textBBJ = (TextView) findViewById(R.id.textBBJ);
		textBMC = (TextView) findViewById(R.id.textBMC);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		mFragment = new ArrayList<Fragment>();
		cbbFragment = new CbbFragment();
		bbjFragment = new BbjFragment();
		bmcFragment = new BmcFragment();
		mFragment.add(cbbFragment);
		mFragment.add(bbjFragment);
		mFragment.add(bmcFragment);
		adapter = new MyFragmentPageAdapter(getSupportFragmentManager(),
				mFragment);
		viewPager.setAdapter(adapter);
		btnCBB.setOnClickListener(this);
		btnBBJ.setOnClickListener(this);
		btnBMC.setOnClickListener(this);
	}

这边用Fragment的原理跟之前的不一样，之前用的Transaction（事务）的replace方法来动态插入Fragment，这边直接使用list将Fragment全部装在ViewPager里（虽然不算静态，但是其实是一次性填充好的）。另外，要注意的是，这个的Fragment等都要用v4的那个，即

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;

 MainActivity extends FragmentActivity

为什么呢？很简单，因为我们等会儿要用到自定义的FragmentPageAdapter。

getSupportFragmentManager()方法是用来传入FragmentManager对象，mFragment传入list对象，等会儿用到。

五、来看看自定义的适配器

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

	@Override
	public Fragment getItem(int position) {
		return mFragments.get(position);
	}

	@Override
	public int getCount() {
		return mFragments.size();
	}

}

构造方法里用到了直接传进来的两个参数，这边是继承至FragmentPageAdapter。实现两个抽象方法

六、重回主活动

private void initButtonImage() {
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout_Bottom);
		for (int i = 0; i < mFragment.size(); i++) {
			ImageView imageView = (ImageView) ((LinearLayout) linearLayout
					.getChildAt(i)).getChildAt(0);
			TextView textView = (TextView) ((LinearLayout) linearLayout
					.getChildAt(i)).getChildAt(1);
			if (i == currentIndex) {
				imageView.setEnabled(false);
				textView.setTextColor(getResources().getColor(R.color.purple));
			} else {
				imageView.setEnabled(true);
				textView.setTextColor(getResources().getColor(R.color.blue));
			}
		}
	}

这个方法，就是让当前选中的Fragment对应的底部Button表现不同的样式，selector.xml如下

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/chongbaobao_lost" android:state_enabled="true"/>
    <item android:drawable="@drawable/chongbaobao" android:state_enabled="false"/>

</selector>

剩下两个同理。

然后是onclick事件，也是为了实现这个方法。currentIndex参数是用来记忆当前选中的Fragment

@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btnCBB:
			currentIndex = 0;
			initButtonImage();
			viewPager.setCurrentItem(0);
			break;
		case R.id.btnBBJ:
			currentIndex = 1;
			initButtonImage();
			viewPager.setCurrentItem(1);
			break;
		case R.id.btnBMC:
			currentIndex = 2;
			initButtonImage();
			viewPager.setCurrentItem(2);
			break;

		default:
			break;
		}
	}

oncreate方法，将该调用的调用，并实现页面改变监听器

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
		initButtonImage();
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				currentIndex = position;
				initButtonImage();
			}

			@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

			}
		});
	}

只要在滑动页面时，改变对应底部Button就可以了。

完整的主Activity代码

public class MainActivity extends FragmentActivity implements OnClickListener {
	private ImageButton btnCBB, btnBBJ, btnBMC;
	private TextView textCBB, textBBJ, textBMC;
	private ViewPager viewPager;
	private MyFragmentPageAdapter adapter;
	private CbbFragment cbbFragment;
	private BbjFragment bbjFragment;
	private BmcFragment bmcFragment;
	private List<Fragment> mFragment;
	private int currentIndex = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
		initButtonImage();
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				currentIndex = position;
				initButtonImage();
			}

			@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

			}
		});
	}

	private void init() {
		btnCBB = (ImageButton) findViewById(R.id.btnCBB);
		btnBBJ = (ImageButton) findViewById(R.id.btnBBJ);
		btnBMC = (ImageButton) findViewById(R.id.btnBMC);
		textCBB = (TextView) findViewById(R.id.textCBB);
		textBBJ = (TextView) findViewById(R.id.textBBJ);
		textBMC = (TextView) findViewById(R.id.textBMC);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		mFragment = new ArrayList<Fragment>();
		cbbFragment = new CbbFragment();
		bbjFragment = new BbjFragment();
		bmcFragment = new BmcFragment();
		mFragment.add(cbbFragment);
		mFragment.add(bbjFragment);
		mFragment.add(bmcFragment);
		adapter = new MyFragmentPageAdapter(getSupportFragmentManager(),
				mFragment);
		viewPager.setAdapter(adapter);
		btnCBB.setOnClickListener(this);
		btnBBJ.setOnClickListener(this);
		btnBMC.setOnClickListener(this);
	}

	private void initButtonImage() {
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout_Bottom);
		for (int i = 0; i < mFragment.size(); i++) {
			ImageView imageView = (ImageView) ((LinearLayout) linearLayout
					.getChildAt(i)).getChildAt(0);
			TextView textView = (TextView) ((LinearLayout) linearLayout
					.getChildAt(i)).getChildAt(1);
			if (i == currentIndex) {
				imageView.setEnabled(false);
				textView.setTextColor(getResources().getColor(R.color.purple));
			} else {
				imageView.setEnabled(true);
				textView.setTextColor(getResources().getColor(R.color.blue));
			}
		}
	}

	public void getevolution(int nextPosition) {
		viewPager.setCurrentItem(nextPosition);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btnCBB:
			currentIndex = 0;
			initButtonImage();
			viewPager.setCurrentItem(0);
			break;
		case R.id.btnBBJ:
			currentIndex = 1;
			initButtonImage();
			viewPager.setCurrentItem(1);
			break;
		case R.id.btnBMC:
			currentIndex = 2;
			initButtonImage();
			viewPager.setCurrentItem(2);
			break;

		default:
			break;
		}
	}
}

七、甜点补充
上面主活动中，有个方法没解释。getevolution()，还记得之前在Fragment里写的一大串吗？就是想用来测试能否在Fragment里改变Activity里的组件的方法。这个方法就是在Fragment里双击图片可以切换page

完整的代码  

百度云链接：http://pan.baidu.com/s/1sjqhOaL