鸿蒙系统—打造通用的底部导航栏

Posted 2023-02-23

参考技术A

1、定义一个IBarLayout接口，第一个泛型就是底部导航栏中的每个条目，第二个泛型是每个条目的数据。在接口里面提供一些方法，可以根据数据查找条目，可以添加监听，可以设置默认选中的条目，可以初始化所有的条目，当某个条目被选中后需要告知外界。

2、再定义一个单个条目的接口，泛型就是每个条目的数据，接口里面定义方法，可以设置条目的数据，可以动态修改某个条目的大小

每个条目都有自己的图片、文字、文字的颜色，我们把这些属性定义在一个实体类中。由于颜色可以是整型，也可以是字符串，这里定义泛型，泛型就是文字的颜色。具体是哪种类型的颜色，由调用者来决定。
注意下BarType这个枚举，我们的底部导航栏支持两种类型，IMAGE代表下图，某个条目只显示图片， 也可以让某个条目凸出来，只需要将条目的高度变高即可。

IMAGE_TEXT代表条目显示图片和文字。如下图

1、在布局文件实现单个条目的布局，很简单，使用相对布局，文字位于屏幕的底部，图片位于文字的上面。

1、定义BottomBar，继承相对布局，实现之前定义的IBar接口，泛型就是每个条目所对应的实体类，由于目前并不知道泛型的具体类型，所以泛型直接使用问号来代替。BottomBar就是单个条目。

定义BottomNavigationBar，继承栈布局。第一个泛型就是底部导航栏的条目，第二个泛型就是每个条目的数据

至此，底部导航栏已经封装完成，外界如何使用呢？
1、在布局文件中添加BottomNavigationBar，这个就是我们封装好的底部导航栏

2、在AlibitySlice里面使用，这里使用MVP模式，将业务逻辑放入presenter层中。
先定义接口

3、MainAbilitySlice实现AbilitySliceProvider接口， getContext、getResourceManager、findComponentById这三个方法AbilitySlice的父类已经帮我们实现了，这些方法其实就是系统的方法。getString和getColor需要我们自己来实现，我们在BaseAbilitySlice中手动实现这两个方法。 在MainAbilitySlice的onStart方法中创建MainAbilitySlicePresenter对象，这样就能在MainAbilitySlicePresenter处理具体的业务逻辑。

4、MainAbilitySlicePresenterr处理具体的业务逻辑

5、如果想让某个条目凸出来，可以按照下面的方式

最后附上 源码
注：项目用到的图片全部来源于 阿里矢量图库 ，如果缺少图片，可以阿里矢量图里面找图片。