​

Hello, everyone, I am your friend Peng Ge, today to a page actual combat, before speaking of several components and layout, so today to a login page development.

On an original article interpret the HongMeng application development | Button (Button) function and usage of components. The old rules read the exercise, do not contact understanding is not in place.

Today, we will not talk about new things. We will sum up what we have learned before and do some actual combat. Today, we will develop a login interface of Zhihu.

​

Let’s start today’s article, as usual, by saying the following:

1, components used 2, code explanation 3, effect

Components used

Look at the effect above. A complete login interface, followed by learning components, complete the development of an APP project. The login screen uses a linear layout: DirectionalLayout

Components used: 1, Text, Text information display, 2, TextField, information input box, 3, Button, Button, 4, Image, Image display, the basic functions and use of which have been learned, but Image has not been introduced, which will be explained in detail later.

The code on

Everything is ready for today’s actual battle.

Let’s start today’s development by creating a project. Do not know the entry to read the first article, hongmeng development entry.

​

​

Directly on the code:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:padding="10vp" ohos:orientation="horizontal"> <Text ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text_color="#666666" ohos:text="X" ohos:text_size="20vp" /> <Text ohos:height="match_content" ohos:width="match_parent" ohos:background_element="$graphic:background_ability_main" ohos:layout_alignment="horizontal_center" Ohos :text_alignment="right" oHOs :text_color="#333333" oHOs :text=" Password-free "OHOs :text_size=" 20VP" /> </DirectionalLayout> <Text ohos:height="match_content" ohos:width="match_content" ohos:top_margin="50vp" Ohos :layout_alignment="horizontal_center" OHOS :text_alignment="center" oHOS :text_color="#333333" oHOS :text=" Password login" ohos:text_size="25vp" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:top_margin="30vp"  ohos:left_margin="20vp" ohos:right_margin="20vp" ohos:orientation="vertical"> <TextField ohos:id="$+id:input_phone" Ohos :height="match_content" oHOs :width="match_content" OHOs :padding="5vp" oHOs :text_color="#666666" oHOs :hint="  ohos:text_size="20vp" /> <Text ohos:height="1vp" ohos:width="match_parent" ohos:background_element="#999999" /> </DirectionalLayout> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:top_margin="20vp" ohos:left_margin="20vp" ohos:right_margin="20vp" ohos:orientation="vertical"> <TextField ohos:id="$+id:input_password" Ohos :height="match_content" oHOs :width="match_content" oHOs :padding="5vp" oHOs :text_color="#666666" oHOs :hint=" ohos:text_size="20vp" /> <Text ohos:height="1vp" ohos:width="match_parent" ohos:background_element="#999999" /> </DirectionalLayout> <Button ohos:id="$+id:login" ohos:height="match_content" ohos:width="match_parent" ohos:left_margin="20vp" ohos:right_margin="20vp" ohos:top_margin="20vp" ohos:background_element="#3399ff" Ohos :text=" # FFFFFF "oHOs :text_size="20vp" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:left_margin="20vp" ohos:right_margin="20vp" ohos:top_margin="10vp" ohos:orientation="horizontal"> <Text ohos:height="match_content" ohos:width="match_content" Ohos :layout_alignment="horizontal_center" oHOS :text_color="#333333" oHOs :text=" Overseas mobile phone number login "oHOs :text_size=" 18VP" /> < text ohos:height="match_content" ohos:width="match_parent" ohos:background_element="$graphic:background_ability_main" Ohos :layout_alignment="horizontal_center" OHOS :text_alignment="right" oHOs :text_color="#333333" oHOs :text=" Need help" ohos:text_size="18vp" /> </DirectionalLayout> <Text ohos:height="match_content" ohos:width="match_content" ohos:weight="1" /> <DirectionalLayout ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="center" ohos:orientation="horizontal"> <Image ohos:height="60vp" ohos:width="60vp" ohos:image_src="$media:bzo" /> <Image ohos:height="60vp" ohos:width="60vp" ohos:image_src="$media:bzq" /> </DirectionalLayout> <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:bottom_margin="20vp" ohos:layout_alignment="center" ohos:alignment="center" ohos:orientation="horizontal"> <Text ohos:height="match_content" Ohos :width="match_content" oHOs :layout_alignment="horizontal_center" oHOs :text_color="#999999" oHOs :text=" Horizontal_content "oHOs :layout_alignment="horizontal_center" ohos:text_size="15vp" /> <Text ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" ohos:layout_alignment="horizontal_center" Ohos :text_color="#3333ff" ohos:text_size="15vp" /> < text ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" Ohos :layout_alignment="horizontal_center" oHOs :text_color="#999999" oHOs :text=" oHOs :text_size=" 15VP "/> < text ohos:height="match_content" ohos:width="match_content" ohos:background_element="$graphic:background_ability_main" Ohos :layout_alignment="horizontal_center" oHOs :text_color="# 3333FF "OHOs :text=" Privacy Guidance" oHOs :text_size=" 15VP "/> </DirectionalLayout> </DirectionalLayout>Copy the code

Orientation: OHOs: Orientation =”vertical” orientation: Orientation =”vertical” Ohos :text_alignment=”right”; oHOs :text_alignment=”right”; The TextField component uses the oHOs :hint=” Enter the password “attribute to display the default hint. Ohos :image_src=”$media:bzo”;

If you have any other questions leave a comment or contact me.

The effect

And finally last effect. There are still some flaws in the interface. I randomly found a picture resource, which will make the project more complete in the future.

​

Old rules code can not be less, otherwise small partners should say I stingy. Code link: gitee.com/codegrowth/…

Pay attention to the public number [programmer chat programming], the background reply “Hongmeng”, you can get thousands of hongmeng open source components.

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.