做了一个项目,需要使用底部导航功能,仿微信效果,可以左右滑动切换页面。好处就是比较适合用户手势操作,操作效果比较好;缺点是viewpager控件需要提前加载下一个页面,最少提前加载一个页面,为了保证左右滑动时不出现卡顿现象。例如,当显示“首页”页面时,会加载“应用”中的页面,此时“应用”页面有联网操作的话,会启动thread联网,如果有progressDialog转圈操作的话,会在“首页”中显示,此点需要特别!!
先上效果图:
布局文件main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/guidePages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/viewGroup" />
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" />
</RelativeLayout>
其中主activity页面MainActivity.java
// @ViewInject(R.id.guidePages)
// ViewPager viewPager = null;
// //包裹底部图标的LinearLayout
// @ViewInject(R.id.viewGroup)
// LinearLayout viewPoints = null;
private void initViewPager() {
//设置viewpager的适配器和监听事件
ViewPagerFragmentAdapter mAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
viewPager.setOnPageChangeListener(new GuidePageChangeListener());
}
private void initBottomImage() {
//创建ImageView数组,大小是要显示的图片的数量
imageViews = new ImageView[Const.IMAGE_NUM];
// 计算每个item的宽度,使得可以显示4个图标
int itemW = screenWidth / Const.IMAGE_NUM;
//添加底部图标的图片
for(int i = 0; i < Const.IMAGE_NUM; i++){
ImageView imageView = new ImageView(this);
//设置底部图标imageview的宽高
// imageView.setLayoutParams(new LayoutParams(itemW,LayoutParams.WRAP_CONTENT));//创建一个宽为屏幕 1/4像素,高为图片高
imageView.setLayoutParams(new LayoutParams(itemW, itemW * 100 / 135));//屏幕宽度540,做的底部图高100,宽135,计算为了适配其他设备
//将底部图标layout添加到数组中
imageViews[i] = imageView;
imageViews[i].setTag(i);
imageViews[i].setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
if(viewPager != null)
viewPager.setCurrentItem((Integer)v.getTag());
}
});
//默认选中的是第一张图片,此时第一个小圆点是选中状态,其他不是
if(i==0){
imageViews[i].setBackgroundResource(R.drawable.home_bottom_icon_home);
}else if(i==1){
imageViews[i].setBackgroundResource(R.drawable.home_bottom_icon_app);
} else if(i==2){
imageViews[i].setBackgroundResource(R.drawable.home_bottom_icon_flow);
} else if(i==3){
imageViews[i].setBackgroundResource(R.drawable.home_bottom_icon_flow);
}
//将imageviews添加到底部图标视图组
viewPoints.addView(imageViews[i]);
}
}
ViewPagerFragmentAdapter.java文件
public class ViewPagerFragmentAdapter extends FragmentPagerAdapter {
public ViewPagerFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
if(position == 0) {
fragment = HomeFragment.newInstance(position);
} else if(position == 1) {
fragment = AppStoreFragment.newInstance(position);
} else if(position == 2) {
fragment = WifiFlowFragment.newInstance(position);
} else if(position == 3) {
fragment = SettingFragment.newInstance(position);
}
return fragment;
}
@Override
public int getCount() {
return Const.IMAGE_NUM;//IMAGE_NUM = 4
}
}
一个imageBackground文件home_bottom_icon_home.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bottom_home_button_click_on" android:state_selected="true"/>
<item android:drawable="@drawable/bottom_home_button"/>
</selector>