“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。

效果演示