小菜在搭建完 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 | 縮放至圖片尺寸 |
小菜對 HarmonyOS 還停留至 0 基礎位置,具體詳細的官方文檔還未學習,僅以 Android 基礎進行簡單嘗試;之後會對具體控件進行詳細學習與嘗試;如有錯誤,請多多指導!
來源: 阿策小和尚