#星光计划2.0#【HarmonyOS 专题】02 搭建简单登录页面 原创

发布于 2021-12-3 10:06
浏览
0收藏

    本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0;

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

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 基础进行简单尝试;之后会对具体控件进行详细学习与尝试;如有错误,请多多指导!

来源: 阿策小和尚

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐