如何开发出鸿蒙操作系统中的APP软件呢？你不仅仅要开始学会hello word，更要把APP的功能做出来才行。今天就开始做APP的首页，我们先实现APP首页的底部导航功能。

为了更快地实现此功能，我们可以根据openHarmony开源项目提供的第三方依赖包和PageSlider组件来共同完成，下面一起来编程操作吧。

一.鸿蒙APP首页的“底部导航”功能，要实现确实有点难，但我们可以先在Gradle配置文件中加载openHarmony项目提供的依赖包。

在openHarmony开源项目中，它为我们提供了关于实现“底部导航”功能的封装包，我们只需要在鸿蒙项目entry文件夹中的build.gradle配置文件内配置依赖包相关信息。比如，配置文件中的dependencies的节点内添加implementation “
io.openharmony.tpc.thirdlib:BottomNavigationViewEx:1.0.1″这段信息，即可让项目自动添加依赖包，配置如下：

当上面的配置完成后，我们需要检查依赖包是否已经部署到项目中，可以点击项目中的External Libraries选项，查看里面是否有依赖包。

如果你对依赖包的封装还是不够满意，想对这个依赖包进行Java重写也是可以的。因为底部导航栏的样式、布局、界面跳转等功能都会根据实际需求会不尽相同，封装包进行重写也是很正常的现象。

二.根据依赖包提供相关的资源库，我们需要把底部导航的布局组件加入到APP开启后的“首页”里面，依赖包中的BottomNavigationViewEx 类和PageSlider可以为其提供底部导航的组件实现方式。

我们开启APP之后，会首先看到APP的“首页”，而首页中除了界面顶部的“频道”按钮外，还有底部导航栏，鸿蒙APP的底部导航栏可以通过依赖包中的
com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx 类来实现底部导航组件的布局，具体配置如下：

我们在项目中找到entry目录，在其src/main/resources路径下并找到layout文件夹，并打开layout文件夹中的ability_main.xml配置文件。ability_main.xml配置文件的具体配置内容如下：

<?xml version="1.0" encoding="utf-8"?>
 <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
            ohos:id="$+id:bnve"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:align_parent_bottom="true"/>


        <PageSlider
            ohos:id="$+id:vp"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:above="$id:bnve"/>

    </DependentLayout>

从上面的配置信息来看，除了把BottomNavigationViewEx这个类进行组件化外，还要添加PageSlider这个滑动组件，以便实现底部导航图标icon按钮的点击效果。

三.通过依赖BottomNavigationViewEx和PageSlider这两个组件，我们可以开始在MainAbilitySlice这个主线的Page中去实现底部导航。

为了能让APP首页的底部导航功能能够正常操作，我们需要让导航键“听书”、“书架”、“发现”和“我的”等icon图标进行点击时可以正常切换界面，且导航的中文名称也能动态变换。

首先，先新建DataItem类，可实现中文名称的传递动态，以对应正确的导航icon图标。

DataItem类所在项目的文件目录

代码块如下：

/**
 * 数据实体
 */
public class DataItem {

    String moveText;

    public DataItem(String text){
        moveText = text;
    }

    public String getMoveText(){
        return moveText;
    }

    public void setMoveText(String moveText){
        this.moveText = moveText;
    }
}

其次，为导航icon图标按钮设置需要切换的XML显示界面，使切换界面有APP在启动之后的初始界面。

我们先配置并布局4个icon图标切换页面的配置文件，如下图：

4个导航icon图标，对应的4个XML界面显示内容

上面四个切换页面item_faxian_per.xml 、item_me_per.xml、item_shujia_per.xml、item_tingshu_per.xml可根据自己的APP需求去配置布局页面显示效果。

然后，我们再通过新建的VpAdapter类来实现APP启动后显示的初始切换界面，以及其它界面的切换。VpAdapter类的代码如下：

import com.example.myapplication.ResourceTable;
import com.example.myapplication.entity.DataItem;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.PageSliderProvider;
import ohos.agp.components.Text;
import ohos.agp.components.Component;
import ohos.agp.utils.TextAlignment;
import java.util.List;

/**
 * PageSlider选项界面适配
 */
public class VpAdapter extends PageSliderProvider {

    private List<DataItem> list;
    private AbilitySlice context;

    public VpAdapter(List<DataItem> list, AbilitySlice context) {
        this.list = list;
        this.context = context;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    //根据导航图标icon，动态选择切换的界面
    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        final DataItem data = list.get(i);

        //根据icon图标选择的索引值i,选择要导航切换的界面，默认为"听书"界面
        Component cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_tingshu_per, null, true);
        if (i == 1){    //书架
           cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_shujia_per, null, true);
        }
        if (i == 2){    //发现
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_faxian_per, null, true);
        }
        if(i == 3){     //我的
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_me_per, null, true);
        }

//        在切换页面中添加“文字”信息
//        Text label = (Text) cpt.findComponentById(ResourceTable.Id_tingshu);
//        label.setTextAlignment(TextAlignment.CENTER);
//        label.setText(data.getMoveText() + "," + i);

       componentContainer.addComponent(cpt);
       return cpt;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((ohos.agp.components.Component) o);
    }

    @Override
    public boolean isPageMatchToObject(ohos.agp.components.Component component, Object o) {
        return false;
    }

}

上面的内容完善后，我们再通过MainAbilitySlice类来整体实现APP的底部导航功能，MainAbilitySlice类的代码如下：

import com.example.myapplication.ResourceTable;
import com.example.myapplication.adapter.VpAdapter;
import com.example.myapplication.entity.DataItem;
import com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx;
import com.ittianyu.bottomnavigationviewex.item.BottomNavigationItem;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;
import ohos.agp.utils.Color;
import java.util.ArrayList;

/**
 * 实现首页的底部导航功能
 */
public class MainAbilitySlice extends AbilitySlice {

    private BottomNavigationViewEx bottomNavigationViewEx;
    private PageSlider pageSlider;

    private VpAdapter adapter;

		@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        bottomNavigationViewEx = (BottomNavigationViewEx) findComponentById(ResourceTable.Id_bnve);
        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_vp);

        adapter = new VpAdapter(getData(),MainAbilitySlice.this);

        pageSlider.setProvider(adapter);

        //在底部导航栏中加入导航键初始的icon图标和文字
        bottomNavigationViewEx.addItem(new BottomNavigationItem(ResourceTable.Media_ic_home_tab_listen_focused, "听书", getContext()))
                .addItem(new BottomNavigationItem(ResourceTable.Media_ic_home_tab_mine_focused, "书架", getContext()))
                .addItem(new BottomNavigationItem(ResourceTable.Media_ic_home_tab_discover_focused, "发现", getContext()))
                .addItem(new BottomNavigationItem(ResourceTable.Media_ic_home_tab_account_focused, "我的", getContext()))
                .setCurrentItem(0)
                .setShowAllText(false)
                .setBackgroundColor(Color.BLACK.getValue())
                .initialise();

        //选择切换后的界面和导航图标
        bottomNavigationViewEx.setTabSelectedListener(new BottomNavigationViewEx.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int i) {
                switch (i) {
                    case 0:
                        pageSlider.setCurrentPage(0);
                        break;

                    case 1:
                        pageSlider.setCurrentPage(1);
                        break;

                    case 2:
                        pageSlider.setCurrentPage(2);
                        break;
                    case 3:
                        pageSlider.setCurrentPage(3);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onTabUnselected(int i) {

            }

            @Override
            public void onTabReselected(int i) {

            }
        });

        bottomNavigationViewEx.setupWithViewPager(pageSlider);
    }

    //动态的导航名称
    private ArrayList<DataItem> getData() {
        ArrayList<DataItem> dataItems = new ArrayList<>();
        dataItems.add(new DataItem("听书"));
        dataItems.add(new DataItem("书架"));
        dataItems.add(new DataItem("发现"));
        dataItems.add(new DataItem("我的"));
        return dataItems;
    }

	  @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

以上所有步骤完成之后，我们就可以启动编辑器中的“模拟器”来选择相应的电子设备进行相关导航功能操作和测试。

结语：

鸿蒙操作系统中的APP开发并不难，即便我们不知道如何去实现APP的某些功能，也可以借助相关的openHarmony开源项目内容来更简单的实现。比如，我们现在可以直接加载openHarmony提供的资源包就可以实现APP的底部导航功能，这对鸿蒙初级入门者来讲确实简单了许多。

鸿蒙APP的开发想要变得更简单，我们不但要熟悉其应用开发流程，更要关注并了解相关的鸿蒙开发文档和openHarmony相关的项目源码，不再为复杂的功能需求而绞尽脑汁，让自己快乐的编程。