Android:一个通用的底部导航

现如今，很多app中都有如下图所示的底部导航栏。千篇一律，重复的代码索然无味。这次，我们一起打造一个通用的底部导航。

需求：完成一个通用底部导航的处理

不管首页底下有几个导航模块，都能简单快速实现的替换，点击事件不需要再findViewById。

思路：

1.底部导航外层使用LinearLayout，作为一个底部导航的最外层container。设置id。
2.每个导航按钮用一个Framelayout作为container。
3.我们可以通过最外层container拿到导航按钮的个数，遍历导航按钮，设置点击事件，在点击事件中，改变该Framelayout的enable属性及其所有孩子的状态变化，同时改变其它Framelayout及其孩子的状态，完成统一管理。

代码：

MainActivity布局：

    //项目中切换Fragment，用FrameLayout占位
    

    //底部导航
    

        //每个导航按钮用一个FrameLayout占位
        

            

            

        
        

            

            
        
        

            

            
        
        

            

            
        
    

布局效果如上图所示：用到五个选择器，分别是四个导航按钮切换不同状态图片的，和一个公用的切换文字颜色的

home.xml:

home_search_text_background.xml:

另外几个就不写出来了。跟home.xml如出一辙。

关于选择器，相信大家都写烦了。这里说一个插件，很多人用该都用过：SelectorChapek for Android

操作很简单，只需要把文件后缀按照它的规范写就行。

MainActivity的代码：

public class MainActivity extends AppCompatActivity {

    //底部导航最外层container
    @InjectView(R.id.main_bottom_switcher_container)
    LinearLayout mainBottomSwitcherContainer;

    //底部导航container中孩子的个数
    private int childCount;

    private List fragments=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        initFragment();
        initMainBottomSwitcher();//初始化底部导航
    }

    private void initFragment() {
        fragments.add(new HomeFragment());
        fragments.add(new OrderFragment());
        fragments.add(new MeFragment());
        fragments.add(new MoreFragment());
        onClickListener.onClick(mainBottomSwitcherContainer.getChildAt(0));//默认在首页
    }

    /**
     * 初始化底部导航
     */
    private void initMainBottomSwitcher() {
        //获取底部container中孩子个数
        childCount = mainBottomSwitcherContainer.getChildCount();
        for (int i = 0; i < childCount; i++) {//给每个孩子设置点击事件
            FrameLayout childAt = (FrameLayout) mainBottomSwitcherContainer.getChildAt(i);
            childAt.setOnClickListener(onClickListener);
        }
    }

    private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            int indexOfChild = mainBottomSwitcherContainer.indexOfChild(view);
            changeUi(indexOfChild);      //改变底部导航状态
            changeFragment(indexOfChild);//切换Fragment
        }
    };


    /**
     * 改变点击的index对应控件和它所有孩子的状态  enable=false
     * 改变其他控件和它们所有孩子的状态   enable=true
     * @param index
     */
    private void changeUi(int index) {
        for (int i = 0; i < childCount; i++) {
            if (index == i) {
                setEnable(mainBottomSwitcherContainer.getChildAt(i), false);
            } else {
                setEnable(mainBottomSwitcherContainer.getChildAt(i), true);
            }
        }
    }

    private void changeFragment(int index) {
        Fragment fragment = fragments.get(index);
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.main_fragment_container,fragment)
                .commit();
        //      .addToBackStack(fragment.getClass().getSimpleName())
    }

    /**
     * 将每个导航按钮中的所有控件状态改变
     * 由于我们处理一个通用的代码，那么导航按钮可能会有很多层控件，所以我们需要使用递归
     * @param item
     * @param b
     */
    private void setEnable(View item, boolean b) {
        item.setEnabled(b);//解决的是：点击的导航按钮(我们用的是FrameLayout)是否还能点击
        if (item instanceof ViewGroup) {
            int childCount = ((ViewGroup) item).getChildCount();
            for (int i = 0; i < childCount; i++) {
                setEnable(((ViewGroup) item).getChildAt(i), b);//解决的是：每个导航按钮的孩子的状态的改变，如图片文字根据enable切换
            }
        }
    }
}

这里面，切换Fragment无关紧要，随便写几个测试即可。

可以看到，我们除了找到最外层的LinearLayout：

    //底部导航最外层container
    @InjectView(R.id.main_bottom_switcher_container)
    LinearLayout mainBottomSwitcherContainer;

其它的控件，连id都没有指定。我们只需要拿到最外层的LinearLayout。并通过getChildCount()拿到导航按钮的个数即可。设置点击事件，在点击事件中，对整个底部导航所有控件(包含其所有孩子)的状态进行统一管理。怎么样，现在你不需要再去通过findViewById去找到导航按钮中的任何控件了。

如果你想在底部导航中加一个功能，只需要复制一个底部导航按钮的布局，改一下它的文字和图片即可。然后为它添加一个Fragment，注意，初始化Fragment的顺序跟布局中的顺序一致即可。

这样，一个通用的底部导航就处理好了，非常简单也很实用。