鸿蒙APP的开发想要变得更简单,我们不但要熟悉其应用开发流程,更要关注并了解相关的鸿蒙开发文档和openHarmony相关的项目源码,不再为复杂的功能需求而绞尽脑汁,让自己快乐的编程。
如何开发出鸿蒙操作系统中的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相关的项目源码,不再为复杂的功能需求而绞尽脑汁,让自己快乐的编程。
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/25066.html