Hello everyone, I am a coder, a coder with ten years of work experience, dedicated to the pursuit of technology.

Speaking of hongmeng page layout, do Android estimates will be better understood, Hongmeng layout and Android is very similar, similar only file format, the components and attributes are not the same.

Just like applets and Vue, doing one makes you better at the other.

Here to say that learning hongmeng development is very easy, is also a good opportunity.

Before we talk about the 6 big page layout of Hongmeng, let’s talk about the component classification of Hongmeng.

1,

支那

Components can be divided into layout class, display class and interaction class according to their functions:

支那

Component category

Component name

Functional description

Layout of the class

PositionLayout, DirectionalLayout, StackLayout, DependentLayout, TableLayout, AdaptiveBoxLayout

Component containers that provide different layout specifications, such as DirectionalLayout arranged in a single direction, DependentLayout arranged in a relative position, PositionLayout arranged in an exact position, etc.

According to the class

Text, Image, Clock, TickTimer, ProgressBar

Simple content display is provided, such as Text for Text display, Image for Image display, etc.

Interactive class

TextField, Button, Checkbox, RadioButton/RadioContainer, Switch, ToggleButton, the Slider, Rating, ScrollView, TabList, ListContainer, PageSlider, PageFlipper, PageSliderIndicator, Picker, TimePicker, DatePicker, SurfaceProvider, ComponentProvider

It provides interactive response functions with users in specific scenarios, such as Button provides click response function, Slider provides progress selection function, etc.

The framework provides components that facilitate application interface development.

In fact, the Hongmeng APP we developed is these components, including the interface combined with multiple components layer by layer.

For example, if you want to display a paragraph of Text, you can use Text to display it, but you need to have a layout to include it, so we need to talk about layout pages before.

2,

支那

Hongmeng 6 big layout

DirectionalLayout

支那

The layout class in the component category above is the layout we are talking about.

Today we’re going to talk about linear layouts

DirectionalLayout: 1, layout properties 2, arrangement 3, on its way 4, the use of weights

Brief introduction:

DirectionalLayout is an important component layout of the Java UI in Hongmeng development. The default main entry layout of the project is this layout format.

Use to arrange groups of components horizontally or vertically to easily align components within a layout.

Simply understood as a streamlined layout, display from top to bottom.

This layout, combined with other layouts, allows for richer layouts.

Here’s a better picture:

​

Supported XML attributes

DirectionalLayout’s common XML attribute inherits from: Component

(Component is the Component parent that all Views inherit, explained separately below)

DirectionalLayout’s own XML attributes are shown in the following table:

The attribute name

Product description

The values

The values that

Use case

alignment

alignment

left

Represents left aligned.

Can set the value of items such as listed in the table, you can also use the multiple combination “|”.

ohos:alignment=”top|left”

ohos:alignment=”left”

top

Represents top alignment.

right

Indicates right alignment.

bottom

Represents bottom alignment.

horizontal_center

Indicates horizontally centered alignment.

vertical_center

Indicates vertical center alignment.

center

Indicates center alignment.

start

Indicates alignment against the beginning.

end

Indicates alignment by end.

orientation

Direction of arrangement of sub-layouts

horizontal

Indicates a horizontal layout.

ohos:orientation=”horizontal”

vertical

Indicates the vertical layout.

ohos:orientation=”vertical”

total_weight

Sum of weights of all subviews

A float

Floating-point values can be set directly, or float floating-point resources can be referenced.

Ohos: total_weight = “2.5”

ohos:total_weight=”$float:total_weight”

The following table lists the XML attributes supported by DirectionalLayout components:

The attribute name

Product description

The values

The values that

Use case

layout_alignment

alignment

left

Represents left aligned.

Can set the value of items such as listed in the table, you can also use the multiple combination “|”.

ohos:layout_alignment=”top”

ohos:layout_alignment=”top|left”

top

Represents top alignment.

right

Indicates right alignment.

bottom

Represents bottom alignment.

horizontal_center

Indicates horizontally centered alignment.

vertical_center

Indicates vertical center alignment.

center

Indicates center alignment.

weight

The proportion of

A float

Floating-point values can be set directly, or float floating-point resources can be referenced.

ohos:weight=”1″

ohos:weight=”$float:weight”

The table above comes from the hongmeng official website API. As a developer, it is necessary to check the official website API.

arrangement

DirectionalLayout is arranged in two directions :(orientation) horizontal or vertical.

Use orientation to set how components are arranged within the layout, with the default being vertical. Here are the uses and effects of each one.

First: vertical arrangement

Three buttons arranged vertically look like this:

​

The layout code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_content" ohos:alignment="center" ohos:orientation="vertical"> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 1"/> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 2"/> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 3"/> </DirectionalLayout>Copy the code

Button background profile:

color_cyan_element.xml

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#00FFFD"/> </shape>Copy the code

Another way: horizontal arrangement

Horizontal arrangement of three buttons gives the following effect:

​

The layout code is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_content" ohos:alignment="center" ohos:orientation="horizontal"> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 1"/> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 2"/> <Button ohos:width="100vp" ohos:height="40vp" ohos:bottom_margin="3vp" ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 3"/> </DirectionalLayout>Copy the code

Button background profile:

Color_cyan_element. XML This file is in the project resources/base/graphic directory.

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#00FFFD"/> </shape>Copy the code

alignment

DirectionalLayout components use layout_alignment to control their alignment in the layout. If the alignment is in the same direction as the alignment, the alignment does not take effect. If the alignment is in the horizontal direction, the left and right alignment does not take effect.

Sample code for three alignments:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="60vp"> <Button ohos:width="50vp" ohos:height="20vp" ohos:background_element="$graphic:color_cyan_element" Ohos :layout_alignment="left" oHOs :text="Button 1"/> <Button oHOs :width="50vp" oHOs :height="20vp" Ohos :background_element="$graphic:color_cyan_element" OHOs :layout_alignment="horizontal_center" // Center alignment ohos:text="Button 2"/> <Button ohos:width="50vp" ohos:height="20vp" Ohos :background_element="$graphic:color_cyan_element" oHOs :layout_alignment="right" OHOs :text="Button 3"/> </DirectionalLayout>Copy the code

Color_cyan_element. XML: This file is in the project resources/base/graphic directory.

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#00FFFD"/> </shape>Copy the code

The weight

Weight is the size of the component occupied by the parent component proportionally. In horizontal layout, the formula is as follows:

Parent layout allocatable width = parent layout width – sum of all child component widths;

Component width = component weight/ sum of all component weights * parent layout allocated width;

In practice, it is recommended to use width=0 to allocate the width of the parent layout proportionally. The effect of 1:1:1 is as follows:

​

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_content" ohos:orientation="horizontal"> <Button ohos:width="0vp" ohos:height="20vp" ohos:weight="1" Ohos :background_element="$graphic:color_cyan_element" ohos:text="Button 1"/> <Button ohos:width="0" Ohos :background_element="$graphic:color_gray_element" oHOs :text="Button 2"/> <Button ohos:width="0vp" ohos:height="20vp" ohos:weight="1 ohos:background_element="$graphic:color_cyan_element" ohos:text="Button 3"/> </DirectionalLayout>Copy the code

Button background configuration file color_cyan_element. XML: This file is in the project resources/base/graphic directory.

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#00FFFD"/> </shape>Copy the code

Color_gray_element. XML:

<? The XML version = "1.0" encoding = "utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#878787"/> </shape>Copy the code

Pay attention to the public number [programmer chat programming], background reply [Hongmeng], you can obtain 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.

​