单Activity多Fragment实现底部导航器

最近由于Android基础知识讲解需要，采用单Activity多Fragment实现类似QQ底部导航器示例，这种开发模式广泛应用于App开发，比如QQ,微信，新浪等，关于Android底部导航栏的实现方式特别多，实现也是五花八门，同时Google在自己推出的Material design中也增加了Bottom Navigation导航控制，实现起来更加简单，且支持动态效果更加酷炫，但是因为是基础的知识，所以打算通过自定义来实现，不使用Bottom Navigation（如果是实际的项目开发可以考虑使用哈~~），希望对初学者有所帮助。

BottomNavigationBar 地址：https://github.com/Ashok-Varma/BottomNavigation

分析

整体区域分为两部分：底部的导航区域和其余的内容区域，内容区域使用Fragment最为UI展示，底部导航区域添加点击事件，点击TAB切换Fragment,并做字体颜色和图片的切换，在切换上使用add()和hide()的方式，不使用replase()，至于两者的区别，这里就不再说明了，感兴趣的话可以谷歌。

整体结构

底部导航通常由图片和文字组成，上面为ImageView，下面为TextView

底部导航

底部Bottom

使用布局使用RelativeLayout，添加weight，平分屏幕宽度

    

    

        

            

                

                
            

        

        

            

                

                
            
        

        

            

                

                
            
        
        >

        

            

                

                
            
        
        >
    

activity_main.xml

MainActivity

public class MainActivity extends BaseActivity implements View.OnClickListener {
    private RelativeLayout layout_home;
    private RelativeLayout layout_health;
    private RelativeLayout layout_msg;
    private RelativeLayout layout_usercenter;

    private ImageView img_home;
    private ImageView img_health;
    private ImageView img_msg;
    private ImageView img_usercenter;

    private TextView tv_home;
    private TextView tv_health;
    private TextView tv_msg;
    private TextView tv_usercenter;

    private Fragment[] fragments;
    private int currentIndex;
    private int index;

    private int selectColor;
    private int unSelectColor;



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

    @Override
    public void init() {
        initViews();
        initEvent();
        initData();

    }

    public void initViews(){
        layout_health=(RelativeLayout)findViewById(R.id.layout_health);
        layout_home=(RelativeLayout)findViewById(R.id.layout_home);
        layout_msg=(RelativeLayout)findViewById(R.id.layout_msg);
        layout_usercenter=(RelativeLayout)findViewById(R.id.layout_usercenter);

        img_home=(ImageView)findViewById(R.id.img_home);
        img_health=(ImageView)findViewById(R.id.img_health);
        img_msg=(ImageView)findViewById(R.id.img_msg);
        img_usercenter=(ImageView)findViewById(R.id.img_usercenter);

        tv_home=(TextView)findViewById(R.id.tv_home);
        tv_health=(TextView)findViewById(R.id.tv_health);
        tv_msg=(TextView)findViewById(R.id.tv_msg);
        tv_usercenter=(TextView)findViewById(R.id.tv_usercenter);
    }

    public void initEvent(){
        layout_home.setOnClickListener(this);
        layout_health.setOnClickListener(this);
        layout_msg.setOnClickListener(this);
        layout_usercenter.setOnClickListener(this);
    }

    public void initData(){
        selectColor=getResources().getColor(R.color.bottom_text_color_pressed);
        unSelectColor=getResources().getColor(R.color.bottom_text_color_normal);

        fragments=new Fragment[4];
        fragments[0]= HomeFragment.getInstance();
        fragments[1]= HealthFragment.getInstance();
        fragments[2]= MsgFragment.getInstance();
        fragments[3]= UserCenterFragment.getInstance();
        getSupportFragmentManager().beginTransaction().add(R.id.frame_content,fragments[0]).commit();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.layout_home:
                index=0;
                setTabs(index);
                break;
            case R.id.layout_health:
                index=1;
                setTabs(index);
                break;
            case R.id.layout_msg:
                index=2;
                setTabs(index);
                break;
            case R.id.layout_usercenter:
                index=3;
                setTabs(index);
                break;
        }
        if(currentIndex!=index){
            FragmentManager fm=getSupportFragmentManager();
            FragmentTransaction ft=fm.beginTransaction();
            ft.hide(fragments[currentIndex]);
            if(!fragments[index].isAdded()){
                ft.add(R.id.frame_content,fragments[index]);
            }
            ft.show(fragments[index]).commit();
        }
        currentIndex=index;
    }

    public void setTabs(int pos){
        resetColor();
        switch (pos){
            case 0:
                img_home.setImageResource(R.mipmap.icon_home_pressed);
                tv_home.setTextColor(selectColor);
                break;
            case 1:
                img_health.setImageResource(R.mipmap.icon_health_pressed);
                tv_health.setTextColor(selectColor);
                break;
            case 2:
                img_msg.setImageResource(R.mipmap.icon_msg_pressed);
                tv_msg.setTextColor(selectColor);
                break;
            case 3:
                img_usercenter.setImageResource(R.mipmap.icon_user_pressed);
                tv_usercenter.setTextColor(selectColor);
                break;
        }

    }
    public void resetColor(){
        img_home.setImageResource(R.mipmap.icon_home_normal);
        img_health.setImageResource(R.mipmap.icon_health_normal);
        img_msg.setImageResource(R.mipmap.icon_msg_normal);
        img_usercenter.setImageResource(R.mipmap.icon_user_normal);
        tv_home.setTextColor(unSelectColor);
        tv_health.setTextColor(unSelectColor);
        tv_msg.setTextColor(unSelectColor);
        tv_usercenter.setTextColor(unSelectColor);

    }

}

四个Fragment只是一个简单的布局，里面放置了一个TextView,这里就不再贴出来O.o.

效果图预览：

效果图