写点什么

HarmonyOS 鸿蒙登录页搭建及 Text 文本详解

发布于: 1 小时前
HarmonyOS 鸿蒙登录页搭建及 Text 文本详解

    HarmonyOS 对于我们并不陌生,它是华为出品的新一代智慧终端操作系统,为不同设备的智能化、互联和协同提供了统一的语言,带来简洁流畅、连续可靠的全场景交互模式;


    现如今很多设备都已经更新为 HarmonyOS,和尚作为客户端开发,也想简单了解一下 HarmonyOS;不管是 HarmonyOS 还是对应的 IDE 都已经迭代了很多版本,目前相对稳定,很多朋友都想了解 HarmonyOSAndroid 之间的关系,和尚在未详读官方 SDK 文档的情况下,以 Android 知识为基础,尝试构建一个简单的【登录】页面,并详细了解一下 Text 文本的相关属性;

HarmonyOS

1. Login Page

1.1 新建 Ability

    HarmonyOS 可以通过 js 也可以通过 Java 方式进行开发,和尚仅尝试 Java 方式;HarmonyOS 的整体开发过程与 Android 还是非常类似的;


    和尚新建一个 LoginAbility,会自动生成一个 LoginAbilitySlice 和对应的 ability_login.xml 用于绑定前台页面,和尚简单理解分别对应 AndroidActivity / 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 中进行编辑;和尚发现,默认 xmlDirectionalLayout 布局且默认设置了 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_parentAndroid 端一致,填充满父控件;match_contentwrap_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 中的 TextViewView 的关系;因此 Component 中的属性,在 Text 中基本都可以使用;和尚主要尝试一些相较于 Component 而言 Text 文本所特有的属性;

2.1 text & hint

    texthint 很容易理解,分别为文本内容和默认提示文本内容;


 <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_colorhint_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_rightelement_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 是刚起步状态,如有错误,请多多指导!


来源: 阿策小和尚

发布于: 1 小时前阅读数: 10
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
HarmonyOS 鸿蒙登录页搭建及 Text 文本详解