Android:一个通用的底部导航

最新推荐文章于 2024-07-28 23:44:14 发布

刘忆初

最新推荐文章于 2024-07-28 23:44:14 发布

阅读量1.7k

点赞数 2

分类专栏： Android进阶

本文链接：https://blog.csdn.net/qq_34512207/article/details/71216104

版权

Android进阶专栏收录该内容

23 篇文章 17 订阅

订阅专栏

现如今，很多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的顺序跟布局中的顺序一致即可。

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