ViewPager做底部导航

        做了一个项目，需要使用底部导航功能，仿微信效果，可以左右滑动切换页面。好处就是比较适合用户手势操作，操作效果比较好；缺点是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>

转载于:https://my.oschina.net/u/2288619/blog/356309