“fullLoad” app（二）之底部导航功能实现

技术分析

底部导航功能的实现可以有很多技术手段，本项目采用ViewPager+List<fragment>+FragmentPagerAdapter，来实现底部导航栏功能，包括点击导航与滑动导航

Layout文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andriod="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    andriod:layout_width="match_parent"
    andriod:layout_height="match_parent"
    andriod:orientation="vertical"
    andriod:background="@color/white">


    <!--ViewPager-->
    <android.support.v4.view.ViewPager
        andriod:id="@+id/viewPager"
        andriod:layout_width="match_parent"
        andriod:layout_height="0dp"
        andriod:layout_weight="1"/>

    <!--底部导航栏-->
    <LinearLayout
        andriod:layout_width="match_parent"
        andriod:layout_height="55dp"
        andriod:orientation="horizontal">

        <!--left-->
        <LinearLayout
            andriod:id="@+id/ll_navigate_left"
            andriod:layout_width="0dp"
            andriod:layout_height="match_parent"
            andriod:layout_weight="1"
            andriod:gravity="center"
            andriod:orientation="vertical">
            <ImageView
                andriod:id="@+id/iv_navigate_left"
                andriod:layout_width="50dp"
                andriod:layout_height="50dp"
                andriod:src="@drawable/ic_left_pressed"/>
        </LinearLayout>

        <!--index-->
        <LinearLayout
            andriod:id="@+id/ll_navigate_index"
            andriod:layout_width="0dp"
            andriod:layout_height="match_parent"
            andriod:layout_weight="1"
            andriod:gravity="center"
            andriod:orientation="vertical">
            <ImageView
                andriod:id="@+id/iv_navigate_index"
                andriod:layout_width="50dp"
                andriod:layout_height="50dp"
                andriod:src="@drawable/ic_index_normal"/>
        </LinearLayout>

        <!--right-->
        <LinearLayout
            andriod:id="@+id/ll_navigate_right"
            andriod:layout_width="0dp"
            andriod:layout_height="match_parent"
            andriod:layout_weight="1"
            andriod:gravity="center"
            andriod:orientation="vertical">
            <ImageView
                andriod:id="@+id/iv_navigate_right"
                andriod:layout_width="50dp"
                andriod:layout_height="50dp"
                andriod:src="@drawable/ic_right_normal"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

以上是activity_main.xml的代码。

java文件

MainActivity.java

public class MainActivity extends FragmentActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private LinearLayout ll_main_left,ll_main_index,ll_main_right;
    private ImageView iv_main_left,iv_main_index,iv_main_right;
    private NavigateFragmentPagerAdapter navigateAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //获得上一个上一个页面传来的UserEntity及其userType
        //key值为userEntity_data
        //UserEntity userEntity=(UserEntity) getIntent().getParcelableExtra("userEntity_data");
        //userType=userEntity.getUserType();

        //适配器
        navigateAdapter=new NavigateFragmentPagerAdapter(getSupportFragmentManager(), MyApplication.getUserEntity().getUserType());//getSupportFragmentManager()需要继承自FragmentActivity

        //绑定控件
        InitView();
    }

    /*点击事件*/
    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.iv_navigate_left:
                initialiseNavigate();
                iv_main_left.setImageResource(R.drawable.ic_left_pressed);
                viewPager.setCurrentItem(0);
                break;
            case R.id.iv_navigate_index:
                initialiseNavigate();
                iv_main_index.setImageResource(R.drawable.ic_index_pressed);
                viewPager.setCurrentItem(1);
                break;
            case R.id.iv_navigate_right:
                initialiseNavigate();
                iv_main_right.setImageResource(R.drawable.ic_right_pressed);
                viewPager.setCurrentItem(2);
                break;
            default:
                break;
        }
    }

    /*viewPager监听事件*/
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if(state==2){
            switch (viewPager.getCurrentItem()){
                case Constants.NAVIGATE_LEFT:
                    initialiseNavigate();
                    iv_main_left.setImageResource(R.drawable.ic_left_pressed);
                    break;
                case Constants.NAVIGATE_INDEX:
                    initialiseNavigate();
                    iv_main_index.setImageResource(R.drawable.ic_index_pressed);
                    break;
                case Constants.NAVIGATE_RIGHT:
                    initialiseNavigate();
                    iv_main_right.setImageResource(R.drawable.ic_right_pressed);
            }
        }
    }

    private void InitView(){
        /*viewPager*/
        viewPager=(ViewPager)findViewById(R.id.viewPager);
        viewPager.setAdapter(navigateAdapter);
        viewPager.setCurrentItem(Constants.NAVIGATE_LEFT);
        /*LinearLayout*/
        ll_main_left=(LinearLayout)findViewById( R.id.ll_navigate_left);
        ll_main_index=(LinearLayout)findViewById( R.id.ll_navigate_index);
        ll_main_right=(LinearLayout)findViewById( R.id.ll_navigate_right);

        /*ImageView*/
        iv_main_left=(ImageView)findViewById(R.id.iv_navigate_left);
        iv_main_index=(ImageView)findViewById(R.id.iv_navigate_index);
        iv_main_right=(ImageView)findViewById(R.id.iv_navigate_right);

        /*register click*/
        viewPager.addOnPageChangeListener(this);

        iv_main_left.setOnClickListener(this);
        iv_main_index.setOnClickListener(this);
        iv_main_right.setOnClickListener(this);
    }

    /*使导航栏图标处于normal状态*/
    private void initialiseNavigate(){
        iv_main_left.setImageResource(R.drawable.ic_left_normal);
        iv_main_index.setImageResource(R.drawable.ic_index_normal);
        iv_main_right.setImageResource(R.drawable.ic_right_normal);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        /*解除上一次的绑定*/
        XGPushManager.registerPush(getApplicationContext(), "*");
    }
}

为了实现滑动屏幕的功能，在MainActivity中实现ViewPager.OnPageChangeListener接口，并重写该接口的onPageScrolled，onPageSelected，onPageScrollStateChanged方法。

NavigateFragmentPagerAdapter.java

public class NavigateFragmentPagerAdapter extends FragmentPagerAdapter {
    private static final String TAG = "FragmentPagerAdapter";
    private List<Fragment> fragmentList=new ArrayList<Fragment>();
    /*申明需要滚动的Fragment碎片
    * 以及根据用户类型选择相应的Fragment*/
    private LocationFragment locationFragment;
    private IndexFragment indexFragment;
    private RightFragment rightFragment;

    //货主页面只有第三个页面有区别
    private RightFragmentForGoods rightFragmentForGoods;

    /*构造器*/
    public NavigateFragmentPagerAdapter(FragmentManager fm,int type){
        super(fm);
        switch (type){
            case Constants.USERTYPE_NONE:
                //用户类型是无,则弹出对话框提示用户登录
                AlertDialog.Builder builder=new AlertDialog.Builder(MyApplication.getContext());
                builder.setTitle("警告")
                        .setMessage("登录异常，请返回重新登录")
                        .setNegativeButton("返回", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                return;
                            }
                        })
                        .create();
                break;
            case Constants.USERTYPE_CAR:
                //用户类型是车主
                locationFragment=new LocationFragment();
                indexFragment=new IndexFragment();
                rightFragment=new RightFragment();
                fragmentList.add(locationFragment);
                fragmentList.add(indexFragment);
                fragmentList.add(rightFragment);
                break;
            case Constants.USERTYPE_GOODS:
                //用户类型是货主
                locationFragment=new LocationFragment();
                indexFragment=new IndexFragment();
                rightFragmentForGoods=new RightFragmentForGoods();
                fragmentList.add(locationFragment);
                fragmentList.add(indexFragment);
                fragmentList.add(rightFragmentForGoods);
                break;
            default:
                break;
        }
    }

    /*必须重载的四个方法*/
    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        switch (position){
            case Constants.NAVIGATE_LEFT:
                //第一个页面
                fragment=fragmentList.get(0);
                break;
            case Constants.NAVIGATE_INDEX:
                //第二个页面
                fragment=fragmentList.get(1);
                break;
            case Constants.NAVIGATE_RIGHT:
                //第三个页面
                fragment=fragmentList.get(2);
                break;
            default:
                break;
        }
        return fragment;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        return super.instantiateItem(container, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        Log.d(TAG, "destroyItem: "+position);
        super.destroyItem(container, position, object);
    }
}

NavigateFragmentPagerAdapter继承自FragmentPagerAdapter，在其构造函数中给，通过判断登录用户的用户类型，增添不同的fragment到List中，实现不同用户类型，不同用户界面的功能。
自定义的NavigateFragmentPagerAdapter需要重写4个方法：
getCount，getItem，instantiateItem，destroyItem。

效果演示