This is the 29th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

After building the HarmonyOS environment, Xiao Kai has not studied HarmonyOS for a long time. DevEco Studio has updated several versions of HarmonyOS. Xiao Kai has not studied the official documentation after upgrading the IDE development tools. Try to simply build a [login] page based on Android;

1. New Ability

The overall development process for HarmonyOS is very similar to Android; Add a LoginAbilitySlice and the corresponding ability_login.xml to bind the foreground page. Simple understanding of the corresponding Android Activity/Fragment/XML, etc.

New Ability is registered in config.json, similar to Android’s Androidmanifest.xml manifest file; If you need to open loglid by default for minor dishes, you need to set the first Launch information in the logLID configuration file.

{... "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" } ] } }Copy the code

2. Edit the XML

Ability_login. XML is used to bind the UI. Xiaocai found that the default XML is DirectionalLayout layout with orientation set by default. It is easy to understand the LinearLayout, which is consistent with the LinearLayout in Android.

2.1 Adding an Image Logo

The small dish is expected to add a Logo picture, using Image control, most familiar with it is easy to immediately correspond with Android, its Image resources in the media folder; However, when the side dish adjusts the width and height of the Image, the Image does not change. Similar to the default Image padding on Android, HarmonyOS Image defaults to Center and does not scale. You need to manually adjust the scale_mode Image padding method.

<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"/>
Copy the code

2.2 Adding a Text box

It is expected to add two text boxes under the Logo, corresponding to the user name and password respectively. First, DirectionalLayout linear layout is used to set horizontal text and text box. When setting the width and height, match_parent is the same as the Android side and fills the parent control. Match_content is the same as WRAP_content, adaptive width and height;

HarmonyOS implements text boxes through TextField, similar to the Flutter approach; Text box default white fill no border, we need to manually set the display effect;

<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" $graphic: login_textFILed_bg "oHOs :hint=" Please enter user name!" ohos:hint_color="$ohos:color:id_color_activated" ohos:left_padding="12vp" ohos:text_alignment="vertical_center" ohos:text_size="23fp"/> </DirectionalLayout>Copy the code

2.3 add Button

Xiao CAI expects to add two buttons under the text box. Most of them are familiar and easy to understand. However, when Xiao CAI tried to add background, he found that the default Button size is the filling size of the Button, which needs to be adjusted through the inner and outer margins.

HarmonyOS does not have a drawable. For background images such as Shape, the corresponding XML is defined in a graphic before setting the element background of the corresponding control.

<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=" bottom_padding "oHOs :text_size="24fp" ohos:top_margin="60vp" ohos:top_padding="14vp"/> <? The 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>Copy the code

A small extension

Unit 1.

Harmony Android
px(unit pixel) px(unit pixel)
vp(Virtual pixels) dp(Pixel density)
fp(Text pixels) sp(Text pixels)
#### 2. Picture scale_mode
scale_mode Zoom type
—– —–
center No zoom, center display
zoom_center Zoom tomin{width, height}, center display
zoom_start Zoom tomin{width, height}, align the starting position
zoom_end Zoom tomin{width, height}, terminating position alignment
inside Scale down to picture size or smaller, center display
clip_center Zoom to picture size or smaller, center display
stretch Scale to image size

Minor dishes for HarmonyOS are still at the base level of 0. The detailed official documents for HarmonyOS have not been learned yet. After the specific control will be studied and tried in detail; If there are mistakes, please give more guidance!

Source: Little Monk A Ce