HarmonyOS 对于我们并不陌生,它是华为出品的新一代智慧终端操作系统,为不同设备的智能化、互联和协同提供了统一的语言,带来简洁流畅、连续可靠的全场景交互模式;
现如今很多设备都已经更新为 HarmonyOS,和尚作为客户端开发,也想简单了解一下 HarmonyOS;不管是 HarmonyOS 还是对应的 IDE 都已经迭代了很多版本,目前相对稳定,很多朋友都想了解 HarmonyOS 与 Android 之间的关系,和尚在未详读官方 SDK 文档的情况下,以 Android 知识为基础,尝试构建一个简单的【登录】页面,并详细了解一下 Text 文本的相关属性;
HarmonyOS
1. Login Page
1.1 新建 Ability
HarmonyOS 可以通过 js 也可以通过 Java 方式进行开发,和尚仅尝试 Java 方式;HarmonyOS 的整体开发过程与 Android 还是非常类似的;
和尚新建一个 LoginAbility,会自动生成一个 LoginAbilitySlice 和对应的 ability_login.xml 用于绑定前台页面,和尚简单理解分别对应 Android 的 Activity / Fragment / xml 等;
在新建 Ability 时会在 config.json 中注册,类似于 Android 中的 AndroidManifest.xml 清单文件;和尚需要默认打开 LoginAbility 则需要把首个 Launch 启动信息设置在 LoginAbility 配置文件中;
{
...
"module": {
...
"abilities": [
{
...
"name": "com.example.ace_harmonyos03.MainAbility",
...
},
{
"skills": [
{
"entities": [ "entity.system.home" ],
"actions": [ "action.system.home" ]
}
],
"orientation": "unspecified",
"name": "com.example.ace_harmonyos03.LoginAbility",
"icon": "$media:icon",
"description": "$string:loginability_description",
"label": "$string:entry_LoginAbility",
"type": "page",
"launchType": "standard"
}
]
}
}
复制代码
1.2 编辑 xml
与 Android 相同,绘制前台页面既可以通过 xml 方式绑定也可以通过 Java 绘制布局信息;和尚这次主要通过 xml 方式绑定页面 UI,主要是在 ability_login.xml 中进行编辑;和尚发现,默认 xml 是 DirectionalLayout 布局且默认设置了 orientation,很容易理解为线性布局,与 Android 中的 LinearLayout 一致;
1.2.1 添加 Image 图片
和尚预期添加一个 Logo 图片,可以采用 Image 控件,大部分属性很容易立即与 Android 对应上,其图片资源在 media 文件夹下;但是和尚在调整 Image 宽高时,图片并没有变化;和尚发现与 Android 默认图片填充类似,HarmonyOS Image 默认采用 center 不缩放填充方式,需要手动调整 scale_mode 图片填充方式才可以;
<Image
ohos:height="100vp"
ohos:width="100vp"
ohos:bottom_margin="60vp"
ohos:image_src="$media:icon"
ohos:scale_mode="clip_center"
ohos:top_margin="60vp"/>
复制代码
1.2.2 添加 TextField 文本框
和尚预期在 Logo 下添加两个文本框,分别对应用户名和密码;首先采用 DirectionalLayout 线性布局设置水平放置文本和文本框;其中在设置宽高时,和尚理解 match_parent 与 Android 端一致,填充满父控件;match_content 与 wrap_content 一致,自适应宽高;
HarmonyOS 通过 TextField 实现文本框,这与 Flutter 方式类似;文本框默认白色填充无边框,需要和尚手动设置显示效果;
<DirectionalLayout
ohos:height="50vp"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:left_margin="30vp"
ohos:orientation="horizontal"
ohos:right_margin="30vp">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="用户名:"
ohos:text_size="24fp"/>
<TextField
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:login_textfiled_bg"
ohos:hint="请输入用户名!"
ohos:hint_color="$ohos:color:id_color_activated"
ohos:left_padding="12vp"
ohos:text_alignment="vertical_center"
ohos:text_size="23fp"/>
</DirectionalLayout>
复制代码
1.2.3 添加 Button 按钮
和尚预期在文本框下添加两个 Button,大部分属性都很容易理解,但和尚在尝试添加背景时发现默认的按钮尺寸是 Button 内填充大小,需要通过内外边距来进行按钮的调整;
HarmonyOS 没有 drawable 资源文件夹,对于背景图 shape 等都是通过在 graphic 中定义对应的 xml 再设置对应控件的元素背景;
<Button
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:login_btn_bg"
ohos:bottom_padding="14vp"
ohos:left_margin="30vp"
ohos:right_margin="30vp"
ohos:text="极速登录"
ohos:text_size="24fp"
ohos:top_margin="60vp"
ohos:top_padding="14vp"/>
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid ohos:color="#4D666666"/>
<corners ohos:radius="50vp"/>
</shape>
复制代码
2. Text
Text 文本件在大部分语言编程中都是最常见且使用频率最高的控件;和尚简单了解源码,发现 HarmonyOS 中的 Text 继承自 Component;和尚理解为 Android 中的 TextView 与 View 的关系;因此 Component 中的属性,在 Text 中基本都可以使用;和尚主要尝试一些相较于 Component 而言 Text 文本所特有的属性;
2.1 text & hint
text 和 hint 很容易理解,分别为文本内容和默认提示文本内容;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="阿策小和尚"
ohos:text_size="16fp"/>
ohos:hint="阿策小和尚 hint"
复制代码
2.2 text_color & hint_color
text_color 和 hint_color 分别对应文本字体颜色和默认提示文本字体颜色;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="阿策小和尚"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_size="16fp"/>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:hint="阿策小和尚 hint"
ohos:hint_color="$ohos:color:id_color_bottom_tab_icon"
ohos:text_size="16fp"/>
复制代码
2.3 text_size & text_font
text_size 对应文本字号,同样适用默认提示文本;text_font 对应文本字体,例如 sans-serif / sans-serif-medium / HwChinese-medium 等;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="阿策小和尚"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_size="20fp"/>
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="阿策小和尚"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_font="HwChinese-medium"
ohos:text_size="20fp"/>
复制代码
2.4 italic & text_alignment
italic 为文字是否为斜体;text_alignment 为文本对齐方式,添加一个背景图更容易看到效果,对齐属性也很容易理解;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:italic="true"
ohos:text="阿策小和尚"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_font="HwChinese-medium"
ohos:text_size="20fp"/>
<Text
ohos:height="80vp"
ohos:width="match_parent"
ohos:background_element="$graphic:regist_btn_bg"
ohos:text="阿策小和尚"
ohos:text_alignment="center"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_size="20fp"/>
复制代码
2.5 element_left & element_top & element_right & element_bottom & element_start & element_end & element_padding
element_left 等为文本中添加图标的为止,即 左侧 / 右侧 / 顶部 / 底部 / 开始为止 / 结束为止;element_padding 为文本图标与文本之间的变局;
Tips: 注意 element_right 与 element_start / element_end 属性有冲突,不建议一起使用;在 水平布局方向为从左到右 时,element_right 会与 element_end 属性冲突;在 水平布局方向为从右到左 时,element_right 会与 element_start 属性冲突;同时配置时,element_start / element_end 优先级高于 element_right / element_left 属性;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体娱乐等)业务能力。"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_size="20fp"
ohos:element_padding="20vp"
ohos:element_left="$media:icon"/>
复制代码
2.6 truncation_mode & scrollable & auto_scrolling_duration & auto_scrolling_count
truncation_mode 为文本的截取方式,当文本内容超过设置宽度范围时,HarmonyOS 提供了多种截断方式;none 为无截断,ellipsis_at_start/middle/end 为在文本框起始/中间/结束处使用省略号截断,auto_scrolling 为滚动显示;
scrollable 为文本是否可滚动;auto_scrolling_duration 对应自动滚动时长;auto_scrolling_count 对应滚动次数,默认为无限次;和尚在测试过程中,单纯的 xml 文件调整并不会实现跑马灯效果,需要在 Java 端使用 startAutoScrolling() 启动跑马灯效果;
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:top_margin="10vp"
ohos:text="HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体娱乐等)业务能力。"
ohos:text_size="20fp"
ohos:truncation_mode="ellipsis_at_end"
ohos:element_left="$media:icon"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:top_margin="10vp"
ohos:text="HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体娱乐等)业务能力。"
ohos:text_size="20fp"
ohos:truncation_mode="auto_scrolling"
ohos:scrollable="true"
ohos:auto_scrolling_count="1"
ohos:auto_scrolling_duration="100"
ohos:element_left="$media:icon"
/>
Text text1 =(Text) findComponentById(ResourceTable.Id_test_tv1);
text1.startAutoScrolling();
复制代码
2.7 max_text_lines & multiple_lines
max_text_lines 为文本设置的最大行数;multiple_lines 为多行模式,只有为 true 时才允许换行;
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体娱乐等)业务能力。"
ohos:text_size="20fp"
ohos:top_margin="10vp"
ohos:multiple_lines="true"
ohos:max_text_lines="4"
ohos:truncation_mode="ellipsis_at_end"
ohos:element_left="$media:icon"
ohos:background_element="$graphic:background_ability_text"
/>
复制代码
2.8 additional_line_spacing & line_height_num
additional_line_spacing 对应文本行间距,取值为 float 类型,为具体的值;而 line_height_num 对应行间距倍数,包括设置的 additional_line_spacing 文本行间距;
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:additional_line_spacing="20"
ohos:line_height_num="2"
ohos:multiple_lines="true"
ohos:text="HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体娱乐等)业务能力。"
ohos:text_color="$ohos:color:id_color_badge_red"
ohos:text_size="20fp"/>
复制代码
2.9 auto_font_size & padding_for_text
auto_font_size 为是否支持文本自动调整文本字体大小;padding_for_text 对应设置文本顶部与底部是否默认留白,默认为 true,但和尚尝试过程中效果并不明显;
在使用 auto_font_size 过程中需要在 Java 端设置字号变化规则,及最大最小字号等;
<Text
ohos:id="$+id:test_tv2"
ohos:height="match_content"
ohos:width="match_content"
ohos:auto_font_size="true"
ohos:element_left="$media:icon"
ohos:max_text_lines="1"
ohos:multiple_lines="true"
ohos:text="HarmonyOS"
ohos:text_size="20fp"
ohos:top_margin="10vp"
/>
Text text2 =(Text) findComponentById(ResourceTable.Id_test_tv2);
text2.setAutoFontSizeRule(20, 50, 1);
text2.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
text2.setText(text2.getText() + " HarmonyOS");
}
});
复制代码
3. 小扩展
3.1 单位
| Harmony | Android |
|-----|-----|
| **px**(单位像素) | **px**(单位像素) |
| **vp**(虚拟像素) | **dp**(像素密度) |
| **fp**(文本像素) | **sp**(文本像素) |
复制代码
3.2 图片 scale_mode
| scale_mode | 缩放类型 |
|-----|-----|
| **center**| 不缩放,居中展示 |
| **zoom_center** | 缩放至 **min{width, height}**,居中展示 |
| **zoom_start** | 缩放至 **min{width, height}**,起始位置对齐 |
| **zoom_end** | 缩放至 **min{width, height}**,终止位置对齐 |
| **inside** | 按比例缩小至图片尺寸或更小尺寸,居中展示 |
| **clip_center**| 按比例放大至图片尺寸或更小尺寸,居中展示 |
| **stretch** | 缩放至图片尺寸 |
复制代码
和尚对 HarmonyOS 还停留至 0 基础位置,具体详细的官方文档还未学习,仅以 Android 基础进行简单尝试;Text 中还有很多是在可编辑状态下的属性,和尚暂时仅研究静态属性,与 Android / Flutter 有很多相似的用法,使用难度较简单;和尚对于 HarmonyOS 是刚起步状态,如有错误,请多多指导!
来源: 阿策小和尚
评论