Android底部导航栏实现

底部导航栏

在使用应用软件时，为了方便用户操作和增加界面直观，许多应用都会用到底部导航栏。
我们经常使用的微信、QQ就是很贴切的例子：


下面我通过几种方式实现类似效果的底部导航栏。

使用Fragment实现底部导航栏

效果展示

相关概念介绍：

官方文档
Fragment表示 FragmentActivity中的行为或界面的一部分。可以在一个 Activity中组合多个Fragment，从而构建多窗格界面，并在多个 Activity 中重复使用某个片段。Fragment必须始终托管在 Activity 中，其生命周期直接受宿主 Activity 生命周期的影响。例如，当Activity 暂停时，Activity的所有片段也会暂停；当Activity 被销毁时，所有片段也会被销毁。

不过，当Activity 正在运行时可以独立操纵每个Fragment，这里就是应用到了每个Fragment的可独立操作这一特性。每个页面使用一个Fragment来实现，所有页面都以同一个activity为宿主，通过获取用户操作隐藏其他页面，显示当前所在的页面对应的Fragment，实现页面间的切换，并且还是可以独立的操作每个页面。

Fragment的使用

Fragment类的代码与Activity非常相识，它包含与 Activity类似的回调方法，如 onCreate()、onStart()、onPause() 和 onStop()。

与Activity对比Fragment的生命周期有个比较有特点的方法,并且在这里是比较重要的：
onCreateView()：系统会在片段首次绘制其界面时调用此方法。若Fragment需要加载样式则需要在此方法中使用inflate加载样式文件，并且作为方法的放回值，若不需要的话默认放回NULL。inflate的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件，并且实例化成View。

public class pageFragment1 extends Fragment {
   
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
   
        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

FragmentManager简介

为了管理Activity中的Fragments，需要使用FragmentManager.
在Activity中要获取FragmentManager需要调用Activity的getFragmentManager()方法。
向FragmentManager中添加Fragment：
可以使用FragmentTransaction来实现，FragmentTransaction可以通过FragmentManager.beginTransaction()来获取，使用add(int containerViewId, Fragment fragment, String tag)方法来添加一个Fragment，remove(Fragment fragment)方法来移除掉一个Fragment。
通过show(Fragment fragment，String tag)和hide(Fragment fragment，String tag）制FragmentManager所管理的Fragment的显示状态，当hide时Fragment不显示，处于暂停状态；show时处于运行状态，允许用户交互。示例代码：

private void selectTab(int i) {
   
    //获取FragmentManager对象
    FragmentManager manager = getSupportFragmentManager();
    //获取FragmentTransaction对象
    FragmentTransaction transaction = manager.beginTransaction();
    //先隐藏所有的Fragment
    hideFragments(transaction);
    switch (i) {
   
        //当选中点击的是第一页的Tab时
        case 0:
            //设置第一页的ImageButton为绿色
            mImg1.setImageResource(R.mipmap.icon1);
            //如果第一页对应的Fragment没有实例化，则进行实例化，并显示出来
            if (mFrag1 == null) {
   
                mFrag1 = new Fragment();
                transaction.add(R.id.id_content, mFrag1);
            } else {
   
                //如果第一页对应的Fragment已经实例化，则直接显示出来
                transaction.show(mFrag1);
            }
            break;
        case 1:
            mImg2.setImageResource(R.mipmap.icon1);
            if (mFrag2 == null) {
   
                mFrag2 = new pageFragment2();
                transaction.add(R.id.id_content, mFrag2);
            } else {
   
                transaction.show(mFrag2);
            }
            break;
        case 2:
            mImg3.setImageResource(R.mipmap.icon1);
            if (mFrag3 == null) {
   
                mFrag3 = new pageFragment3();
                transaction.add(R.id.id_content, mFrag3);
            } else {
   
                transaction.show(mFrag3);
            }
            break;
        case 3:
            mImg4.setImageResource(R.mipmap.icon1);
            if (mFrag4 == null) {
   
                mFrag4 = new Fragment();
                transaction.add(R.id.id_content, mFrag4);
            } else {
   
                transaction.show(mFrag4);
            }
            break;
    }
    //不要忘记提交事务
    transaction.commit();
}

//将四个的Fragment隐藏
private void hideFragments(FragmentTransaction transaction) {
   
    if (mFrag1 != null) {
   
        transaction.hide(mFrag1);
    }
    if (mFrag2 != null) {
   
        transaction.hide(mFrag2);
    }
    if (mFrag3 != null) {
   
        transaction.hide(mFrag3);
    }
    if (mFrag4 != null) {
   
        transaction.hide(mFrag4);
    }
}

在本例子中，就是使用FragmentManager来管理多个Fragment，通过show()方法显示当前所在的Fragment页面，hide方法将其他页面隐藏。

Fragment实现底部导航栏代码实现

MainActivity.class :核心Activity

ass MainActivity extends FragmentActivity implements OnClickListener {
   
    //声明四个Tab的布局文件
    private LinearLayout mTab1;
    private LinearLayout mTab2;
    private LinearLayout mTab3;
    private LinearLayout mTab4;

    //声明四个Tab的ImageButton
    private ImageButton mImg1;
    private ImageButton mImg2;
    private ImageButton mImg3;
    private ImageButton mImg4;

    //声明四个Tab分别对应的Fragment
    private Fragment mFrag1;
    private Fragment mFrag2;
    private Fragment mFrag3;
    private Fragment mFrag4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initViews();//初始化控件
        initEvents();//初始化事件
        selectTab(0);//默认选中第一个Tab
    }

    private void initEvents() {
   
        //初始化四个Tab的点击事件
        mTab1.setOnClickListener(this);
        mTab2.setOnClickListener(this);
        mTab3.setOnClickListener(this);
        mTab4.setOnClickListener(this);
    }

    private void initViews() {
   
        //初始化四个Tab的布局文件
        mTab1 = (LinearLayout) findViewById(R.id.id_tab1);
        mTab2 = (LinearLayout) findViewById(R.id.id_tab2);
        mTab3 = (LinearLayout) findViewById(R.id.id_tab3);
        mTab4 = (LinearLayout) findViewById(R.id.id_tab4);

        //初始化四个ImageButton
        mImg1 = (ImageButton) findViewById(R.id.id_tab_img1);
        mImg2 = (ImageButton) findViewById(R.id.id_tab_img2);
        mImg3 = (ImageButton) findViewById(R.id.id_tab_img3);
        mImg4 = (ImageButton) findViewById(R.id.id_tab_img4);
    }

    //处理Tab的点击事件
    @Override
    public void onClick(View v) {
   
        resetImgs(); //先将四个ImageButton置为灰色
        switch (v.getId()) {
   
            case R.id.id_tab1:
                selectTab(0);
                break;
            case R.id.id_tab2:
                selectTab(1);
                break;
            case R.id.id_tab3:
                selectTab(2);
                break;
            case R.id.id_tab4:
                selectTab(3);
                break;
        }

    }

    //进行选中Tab的处理
    private void selectTab(int i) {
   
        //获取FragmentManager对象
        FragmentManager manager = getSupportFragmentManager();
        //获取FragmentTransaction对象
        FragmentTransaction transaction = manager.beginTransaction();
        //先隐藏所有的Fragment
        hideFragments(transaction);
        switch (i) {
   
            //当选中点击的是第一页的Tab时
            case 0:
                //设置第一页的ImageButton为绿色
                mImg1.setImageResource(R.mipmap.icon1);
                //如果第一页对应的Fragment没有实例化，则进行实例化，并显示出来
                if (mFrag1 == null) {
   
                    mFrag1 = new Fragment();
                    transaction.add(R.id.id_content, mFrag1);
                } else {
   
                    //如果第一页对应的Fragment已经实例化，则直接显示出来
                    transaction.show(mFrag1);
                }
                break;
            case 1:
                mImg2.