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

简介: 0 基础学习 HarmonyOS,通过 xml 方式简单搭建一个基本登录页面!

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

1. 新建 Ability

    HarmonyOS 的整体开发过程与 Android 还是非常类似的;小菜新建一个 LoginAbility,会自动生成一个 LoginAbilitySlice 和对应的 ability_login.xml 用于绑定前台页面,小菜简单理解分别对应 AndroidActivity / Fragment / xml 等;

    新建 Ability 时会在 config.json 中注册,类似于 AndroidAndroidManifest.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 中进行编辑;小菜发现,默认 xmlDirectionalLayout 布局且默认设置了 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_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>

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

    小菜对 HarmonyOS 还停留至 0 基础位置,具体详细的官方文档还未学习,仅以 Android 基础进行简单尝试;之后会对具体控件进行详细学习与尝试;如有错误,请多多指导!

来源: 阿策小和尚
目录
相关文章
|
6月前
|
XML Java 数据格式
HarmonyOS学习路之开发基础——快速入门(创建另一个页面)
在上一节中,我们用XML的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式,接下来我们使用代码的方式编写第二个页面。
|
6月前
|
XML Java 数据格式
HarmonyOS学习路之开发基础——快速入门(编写第一个页面)
在Java UI框架中,提供了两种编写布局的方式:在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别,为了熟悉两种方式,我们将通过XML的方式编写第一个页面,通过代码的方式编写第二个页面。
|
8月前
HarmonyOS ArkTS Ability内页面的跳转和数据传递
HarmonyOS ArkTS Ability 的数据传递包括有 Ability 内页面的跳转和数据传递、Ability 间的数据跳转和数据传递。本节主要讲解 Ability 内页面的跳转和数据传递。 打开 DevEco Studio,选择一个 Empty Ability 工程模板,创建一个名为 “ArkUIPagesRouter” 的工程为演示示例。
202 1
|
XML 数据格式
【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)
【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)
132 0
【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)
|
存储 数据库 Android开发
HarmonyOS(鸿蒙)—— Ability与页面
HarmonyOS(鸿蒙)—— Ability与页面
200 0
HarmonyOS(鸿蒙)—— Ability与页面
|
编解码 数据安全/隐私保护
HarmonyOS实战—实现注册登录和修改密码页面
HarmonyOS实战—实现注册登录和修改密码页面
301 0
HarmonyOS实战—实现注册登录和修改密码页面
|
XML Java Android开发
HarmonyOS实战—页面跳转
HarmonyOS实战—页面跳转
187 0
HarmonyOS实战—页面跳转
|
6月前
|
IDE JavaScript API
HarmonyOS开发第一步,熟知开发工具DevEco Studio
本文主要以常见的功能点作为概述希望可以帮助到学习HarmonyOS的开发者。
164 0
|
1月前
|
数据管理 API 调度
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
72 0
|
1月前
|
前端开发 JavaScript 开发者
鸿蒙2.0!用 JavaScript 开发鸿蒙应用
鸿蒙2.0!用 JavaScript 开发鸿蒙应用

相关产品

  • 云迁移中心