公司目前做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