Android仿微信底部导航菜单

公司目前做Java的比较少，所以Android客户端这一块都是我做的。因为当初自学Android开发时UI这一块没怎么看，直接导致了我昨天公司UI设计歧视。所以决定熟悉一下UI这一块。

搜索了一下网上那些仿微信底部菜单的多数好像都是出自一人之手，而且比较古老（TabHost已经过时了），大家抄来抄去。只好自己写了一个。效果如下：

（黑边是截图时操作的问题，没有做什么美化）

言归正传：

主体布局是相对布局，一个RadioGroup在最下面，上面是ViewPager，RadioGroup里是四个RadionButton。

<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"
    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="ireal.test.MainActivity" >

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

    <RadioGroup
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:weightSum="4" >

        <RadioButton
            android:id="@+id/first"
            style="@style/Selecter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:checked="true"
            android:drawableTop="@drawable/first"
            android:text="@string/first" />

        <RadioButton
            android:id="@+id/second"
            style="@style/Selecter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/second"
            android:text="@string/second" />

        <RadioButton
            android:id="@+id/third"
            style="@style/Selecter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/third"
            android:text="@string/third" />

        <RadioButton
            android:id="@+id/fourth"
            style="@style/Selecter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/fourth"
            android:text="@string/fourth" />
    </RadioGroup>

</RelativeLayout>

RadioGroup继承自现行布局，所以可以使用layout_weight

四个RadioButton的drawbleTop都使用了选择器：

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

    <item android:drawable="@drawable/ale" android:state_checked="false"/>
    <item android:drawable="@drawable/ald" android:state_checked="true"/>

</selector>

这个是文字颜色的选择器：

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

    <item android:state_checked="false" android:color="#999999"/>
    <item android:state_checked="true" android:color="#45C01A"/>

</selector>

  为ViewPager设置Adapter时要注意，Adapter里的条目个数应该等于底部RadioButton个数否则可能会出现异常！

下面是我的适配器：

public class Pagers extends FragmentPagerAdapter {
	public Pagers(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int arg0) {
		Fragment fragment = new IFragment();
		Bundle bundle = new Bundle();
		bundle.putString("__TEXT__", String.valueOf(arg0 + 1));
		fragment.setArguments(bundle);
		return fragment;
	}

	@Override
	public int getCount() {
		return 4;
	}
}

监听ViewPager的OnPagerChange事件：

private final int[] ITEMS_ID = new int[] { R.id.first, R.id.second,
				R.id.third, R.id.fourth };
@Override
		public void onPageSelected(int arg0) {

	<span style="white-space:pre">		radioGrop.check(ITEMS_ID[arg0]);<pre name="code" class="html"></span>

		}

监听RadionGroup的CheckedChange( 实现OnCheckedChangeListener）

private final int[] ITEMS_ID = new int[] { R.id.first, R.id.second,
				R.id.third, R.id.fourth };

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			int which = which(checkedId);
			pager.setCurrentItem(which);
		}

		private int which(int id) {
			int which = 0;
			for (int i : ITEMS_ID) {
				if (i == id) {
					return which;
				}
				which++;
			}
			return -1;
		}
	}

好了 ，完成了。

过程比较简单，监听ViewPager跟RadioGroup改变的事件，然后选中对应的ViewPager跟RadioButton