Android:一个通用的底部导航

来源：互联网发布：百度人工智能负责人编辑：程序博客网时间：2024/05/22 15:40

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

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

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

思路：

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

代码：

MainActivity布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    //项目中切换Fragment，用FrameLayout占位    <FrameLayout        android:id="@+id/main_fragment_container"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" />    //底部导航    <LinearLayout        android:id="@+id/main_bottom_switcher_container"        android:layout_width="match_parent"        android:layout_height="50dp"        android:orientation="horizontal">        //每个导航按钮用一个FrameLayout占位        <FrameLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <ImageView                android:layout_width="match_parent"                android:layout_height="30dp"                android:src="@drawable/home" />            <TextView                android:layout_width="match_parent"                android:layout_height="20dp"                android:layout_gravity="bottom"                android:gravity="center"                android:text="首页"                android:textColor="@color/main_bottom_tv_color" />        </FrameLayout>        <FrameLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <ImageView                android:layout_width="match_parent"                android:layout_height="30dp"                android:src="@drawable/order" />            <TextView                android:layout_width="match_parent"                android:layout_height="20dp"                android:layout_gravity="bottom"                android:gravity="center"                android:text="订单"                android:textColor="@color/main_bottom_tv_color" />        </FrameLayout>        <FrameLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <ImageView                android:layout_width="match_parent"                android:layout_height="30dp"                android:src="@drawable/me" />            <TextView                android:layout_width="match_parent"                android:layout_height="20dp"                android:layout_gravity="bottom"                android:gravity="center"                android:text="个人"                android:textColor="@color/main_bottom_tv_color" />        </FrameLayout>        <FrameLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <ImageView                android:layout_width="match_parent"                android:layout_height="30dp"                android:src="@drawable/more" />            <TextView                android:layout_width="match_parent"                android:layout_height="20dp"                android:layout_gravity="bottom"                android:gravity="center"                android:text="更多"                android:textColor="@color/main_bottom_tv_color" />        </FrameLayout>    </LinearLayout></LinearLayout>

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

home.xml:

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/home_normal" android:state_enabled="true"/>    <item android:drawable="@drawable/home_disabled" android:state_enabled="false"/></selector>

home_search_text_background.xml:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <stroke        android:width="2dp"        android:color="#F0F0F0" />    <!-- 矩形的圆角半径 -->    <corners android:radius="10dp" /></shape>

另外几个就不写出来了。跟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<Fragment> 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的顺序跟布局中的顺序一致即可。

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

2 0