【HarmonyOS 專題】02 搭建簡單登錄頁面

    小菜在搭建完 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 基礎進行簡單嘗試;之後會對具體控件進行詳細學習與嘗試;如有錯誤,請多多指導!

來源: 阿策小和尚

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章