【HarmonyOS 专题】02 搭建简单登录页面

阿策小和尚

发布于 2021-07-30 16:08:33

8470

发布于 2021-07-30 16:08:33

和尚在搭建完 HarmonyOS 环境之后，有很长时间没有研究过 HarmonyOS，DevEco Studio 已经更新了多个版本，和尚在升级完 IDE 开发工具之后，还未仔细学习官方文档，仅以 Android 为基础尝试尝试简单搭建一个【登录】页面；

1. 新建 Ability

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"
      }
    ]
  }
}

2. 编辑 xml

和尚这次主要通过 xml 方式绑定页面 UI，主要是在 ability_login.xml 中进行编辑；和尚发现，默认 xml 是 DirectionalLayout 布局且默认设置了 orientation，很容易理解为线性布局，与 Android 中的 LinearLayout 一致；

2.1 添加 Image Logo

和尚预期添加一个 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"/>

2.2 添加文本框

和尚预计在 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>

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>

小扩展

1. 单位

Harmony	Android
px(单位像素)	px(单位像素)
vp(虚拟像素)	dp(像素密度)
fp(文本像素)	sp(文本像素)

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	缩放至图片尺寸