鸿蒙OS应用开发实践(三)
https://harmonyos.51cto.com/#zz
经过前两篇的学习,我们了解了DevEco运行一个程序的基本流程和一个鸿蒙OS应用项目的代码结构。
用一句《三体》格式的话说:跑得动hello world,我们就是同志了。
这一篇,我们就自己手动撸一个简单的鸿蒙交互程序:从一个页面跳转到另一个页面。
(一)创建工程
先创建一个新的TV的empty java工程:
![](https://s2.51cto.com/oss/202012/07/01a9cfeeaa032b28c456027a93a9baaa.png)
点finish后,发现这次从创建到项目环境加载完成,用了很短的时间,这是因为初始环境需要各种配置和下载,类似我们初下完一个大型游戏,首次需要更新内容一般。
![](https://s3.51cto.com/oss/202012/07/47c3964c6d441c945f9a8a436a827f7b.png)
(二)自定义布局
进入界面后,默认的IDE已经创建了一个hello world程序,我们打开entry -> src -> main ->resources -> base -> layout -> ability_main.xml 布局文件:
我们先清掉原本的布局,重新写入我们自己的布局:
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:width="match_parent"
- ohos:height="match_parent"
- ohos:background_element="#000000">
- ohos:id="$+id:text"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:center_in_parent="true"
- ohos:text="你好,鸿蒙OS"
- ohos:text_color="white"
- ohos:text_size="32fp"/>
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="20fp"
- ohos:text="跳转"
- ohos:left_margin="50vp"
- ohos:bottom_margin="50vp"
- ohos:right_padding="80vp"
- ohos:left_padding="80vp"
- ohos:text_color="white"
- ohos:background_element="$graphic:button_element"
- ohos:center_in_parent="true"
- ohos:align_parent_bottom="true"/>
<Button>标签表示了这里将会布局创建一个按钮,大部分设置信息同Text。
按钮的背景指定了“button_element”来显示,这是另外一个布局文件,我们来手动创建,在resources -> base ->graphic 目录下,右键创建一个File,命名为:button_element.xml
![](https://s5.51cto.com/oss/202012/07/2dd9c557ba29cfb30d91fed12344aff0.png)
在button_element.xml添加如下代码:
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:shape="rectangle">
- <corners
- ohos:radius="10"/>
- <solid
- ohos:color="#FF007DFF"/>
- </shape>
目前鸿蒙官方提供形状:rectangle(方形)和oval(椭圆),通过不同的内外边距设定,就可以衍生出其他形状:圆形,椭圆,正方,胶囊。
默认的模版使用的是方向布局DirectionLayout(垂直或者横向),这里我们修改使用DependentLayout相对位置布局,这样可以更加方便的控制文本和按钮的相对位置。
运行效果:
![](https://s2.51cto.com/oss/202012/07/0f9491bd04b42fe22a8fcc874b8b585e.png)
(三)创建建跳转页面
当然,当前点击跳转按钮不会有任何反应,一方面我们还没写交互逻辑,另一方面,我们要跳转的页面也还没写。我们继续下一步,写一个新的页面。
在项目对应的目录下,创建一个空的FA(java),如下图:
![](https://s2.51cto.com/oss/202012/07/6531a11b0badafb8bfc7418ab0b9302e.png)
这里我们将新页面命名为:NewPage
![](https://s3.51cto.com/oss/202012/07/f40420ff5e44041ca9e66ca1340226d9.png)
下面两项不勾选,直接点finish。
创建后,目录下除了刚才创建的newpage,还会自动创建一个newpageslice在slice目录下以及对应的布局文件在layout目录下:
![](https://s5.51cto.com/oss/202012/07/cced43545916908d9970ca8dcf8098a5.png)
之前在跑hello world的时候,我们说过,ability是入口,逻辑代码都在slice里,同样,在这个newpage里,它也是将逻辑route到了slice类中。
我们打开ability_new_page.xml,简单修改下输出文本:
![](https://s4.51cto.com/oss/202012/07/2f15ca3375d6313f2cb45e3a303ca4fd.png)
(四)主页面添加交互逻辑
到这里,我们的第二个页面算是简单的创建完毕了,下一步,我们需要在主页面下添加交互逻辑,让它可以跳转到这个新的slice页面中来,在主页面(MainAbilitySlice)中去添加按钮点击的事件逻辑:
- Button btn = (Button) findComponentById(ResourceTable.Id_button);
- if (btn != null) {
- //添加按钮点击事件监听
- btn.setClickedListener(new Component.ClickedListener() {
- @Override
- public void onClick(Component component) {
- Intent newpageIntent = new Intent();
- //指定目标页面
- Operation operation = new Intent.OperationBuilder()
- .withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build();
- newpageIntent.setOperation(operation);
- //启动目标页面
- startAbility(newpageIntent);
- } });
- }
这里会要求import新的包,以提供组件模块,不然上面的代码输完是会标红报错的。需要引入的包:
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
解析下代码:
findComponentById通过id来找到按钮组件,然后这个id对应的就是我们在布局文件中设置的:
ohos:id="$+id:button"
onClick对应按钮的点击事件,这个不是自定义函数,属于事件触发函数。
Intent上回说过了,它是一个中间件,协助当前页面往新页面通讯。
Operation operation = new Intent.OperationBuilder()
.withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build();
这串代码指定了我们要跳转的目标页面,需要指定目标的包名,还有Ability名称(非slice)。
最后使用startAbility()接口启动那个页面。
(五)运行
再次运行查看效果(先开远程虚拟设备,再点运行):
效果出来了,点击右侧的返回,还能回到主界面。
https://harmonyos.51cto.com/#zz
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击