【HarmonyOS 专题】02 搭建简单登录页面
小菜在搭建完 HarmonyOS 环境之后,有很长时间没有研究过 HarmonyOS,DevEco Studio 已经更新了多个版本,小菜在升级完 IDE 开发工具之后,还未仔细学习官方文档,仅以 Android 为基础尝试尝试简单搭建一个【登录】页面;
1. 新建 Ability
HarmonyOS 的整体开发过程与 Android 还是非常类似的;小菜新建一个 LoginAbility,会自动生成一个 LoginAbilitySlice 和对应的 ability_login.xml 用于绑定前台页面,小菜简单理解分别对应 Android 的 Activity / Fragment / xml 等;
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
新建 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="http://9i0i.com/pic.php?p=$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 | 缩放至图片尺寸 |
小菜对 HarmonyOS 还停留至 0 基础位置,具体详细的官方文档还未学习,仅以 Android 基础进行简单尝试;之后会对具体控件进行详细学习与尝试;如有错误,请多多指导!
来源: 阿策小和尚
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- 《HelloGitHub》第 13 期
- 《HelloGitHub》第 12 期
- [linux]为阿里云ECS(CentOS7)配置IPv6地址
- 《HelloGitHub月刊》第 11 期
- [linux]孤儿进程与僵尸进程
- 《HelloGitHub月刊》第 10 期
- [linux]ngrep命令、常见用法
- [linux]压缩、解压命令
- [linux]ubuntu apt-get安装软件失败
- 《HelloGitHub月刊》第 09 期
- [linux]ubuntu14.04通过apt-get安装软件失败
- [linux]挂载smb
- 《HelloGitHub月刊》第 08 期
- 《HelloGitHub月刊》第 07 期
- [linux]如何为Virtualbox虚拟硬盘扩容(转载)
- 《HelloGitHub月刊》第 06 期
- [linux]chown和chmod命令
- [linux]ssh(转载)
- 《HelloGitHub》之GitHub Bot
- 《HelloGitHub月刊》第 05 期