Author: Han Ru

Company: Program Ka (Beijing) Technology Co., Ltd

Hongmeng Bus columnist

Harmonyos provides Ability and AilitySlice as the base classes. An interface Ability can consist of one or more AilitySlice. AilitySlice is used to host the specific logic implementation and interface UI of a single page. Is the smallest unit of application display, run, and jump. AilitySlice sets the layout of the interface through the SetuIContent.

Table 1 UI interface for abilitySlice

Interface declaration Interface description
setUIContent(ComponentContainer root) Set the interface entry, root is the interface component tree root node.

Components need to be composed and added to the layout of the interface. In the Java UI framework, there are two ways to write layouts:

  • Create Layout in Code: Create Component and ComponentContainer objects in code, set appropriate layout parameters and property values for these objects, and add Component to ComponentContainer to create the complete interface.
  • Declare UI layout in XML: describe the relationship between Component and ComponentContainer in a hierarchical structure, and set appropriate layout parameters and attribute values for Component nodes. This layout can be directly loaded and generated in the code.

There is no fundamental difference between the two approaches to creating a layout that can be declared in XML and modified in code after loading.

1. Component classification

According to the functions of components, they can be divided into three categories: layout class, display class and interaction class:

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 DirectionAlayOut 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 the function of interactive response with users in specific scenarios. For example, Button provides click response function, Slider provides progress selection function, etc.

The components provided by the framework make the development of application interface more convenient. See API reference for detailed function description and attribute setting of these components.

Code creation layout

To develop the interface shown in the following figure, add a Text component and a Button component. Because the two components are centered from top to bottom, you can optionally use a vertical DirectionAlayout layout to place the components.

The code creates the layout by creating components and layouts separately in AilitySlice and associating them.

2.1 Creating Components

  1. Announcement component

    Button button = new Button(getContext());

  2. Set the component size

    button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT); button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);

  3. Setting component properties

    button.setText("My name is Button."); button.setTextSize(50);

2.2 Create a layout and use it

  1. The statement layout

    DirectionalLayout directionalLayout = new DirectionalLayout(getContext());

  2. Setting Layout Size

    directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT); directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

  3. Setting Layout Properties

    directionalLayout.setOrientation(Component.VERTICAL);

  4. Add a component to the layout (constrain the layout properties of the component as required by the layout)

    directionalLayout.addComponent(button);

  5. Add the layout to the component tree

    setUIContent(directionalLayout);

The sample code is as follows:

public class ExampleAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); // DirectionAllayout DirectionAllayout = new DirectionAllayout (getContext()); / / set the layout size directionalLayout. SetWidth (ComponentContainer. LayoutConfig. MATCH_PARENT); directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT); / / set the layout attribute directionalLayout setOrientation (Component. VERTICAL); directionalLayout.setPadding(32, 32, 32, 32); Text text = new Text(getContext()); text.setText("My name is Text."); text.setTextSize(50); text.setId(100); / / for a component to add the layout of the corresponding layout attribute DirectionalLayout. LayoutConfig LayoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT); layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER; text.setLayoutConfig(layoutConfig); / / add Text to the layout directionalLayout addComponent (Text); // similarly add a Button Button Button = new Button(getContext()); layoutConfig.setMargins(0, 50, 0, 0); button.setLayoutConfig(layoutConfig); button.setText("My name is Button."); button.setTextSize(50); ShapeElement background = new ShapeElement(); background.setRgbColor(new RgbColor(0, 125, 255)); background.setCornerRadius(25); button.setBackground(background); button.setPadding(10, 10, 10, 10); Button. SetClickedListener (new Component. ClickedListener () {@ Override / / increase in the components of a click event detection public void onClick (Component Component) {// Add the action to be performed when the button is clicked}}); directionalLayout.addComponent(button); // Add the layout as the root layout to the view tree super.setUICContent (Directionallayout); }}

After creating the components and layouts according to the above steps, the interface will look like Figure 1. Here, the code sample sets up a key callback for the component, and the application performs a custom action after the key is pressed.

In the code example, you can see that there are two ways to set the component size:

  • Set the width and height directly via setWidth/setHeight.
  • The width and height are set by setting the layout properties through the setLayoutConfig method.

The difference between these two approaches is that the latter can also add more layout property Settings, such as using “alignment” to set the horizontal alignment constraint. In addition, the width and height set by these two methods are the final result of the last set. They have the same value, which can be the following:

  • Specific values in pixels.
  • MATCH_PARENT: Indicates that the component size will expand to the maximum allowed by the parent, which will occupy the remaining size in the direction of the parent.
  • MATCH_CONTENT: Indicates that the component size is appropriate for the size range that its content occupies.

3. XML creates the layout

XML is a much simpler and more intuitive way to declare your layout. Most of the properties of each Component and ComponentContainer object can be set in XML, and each object has its own list of XML properties. Some properties apply only to certain components. For example, only Text supports the “text_color” property, but components that do not support it will ignore the property if it is added. A subclass of a Component that has an inheritance relationship will inherit the property list of its parent class. Component is the base class of the Component and has the properties commonly used by each Component, such as: ID, layout parameters, etc.

ID

ohos:id="$+id:text"

You use this format in XML to declare a developer-friendly ID, which is converted to a constant during compilation. In dependentLayout, in particular, components need to be described in relation to each other, with ID specifying the corresponding components.

Components in the layout typically have to be set to a separate ID so that they can be found in the program. If different components in the layout have the same ID, the first component found will be returned when you look up components by ID, so try to make sure that you set separate ID values for the components in the layout you are looking for to avoid problems that don’t match your expectations.

Layout parameters

ohos:width="20vp"ohos:height="10vp"

Similar to setting the width and height of a component in your code, in XML they can be:

  • Specific values: 10 (in pixels), 10Vp (in pixels per screen).
  • Match_parent: Indicates that the component size will expand to the maximum allowed by the parent, which will occupy the remaining size in the direction of the parent.
  • MATCH_CONTENT: Indicates that the component size is appropriate for the size range that its content occupies.

3.1 Create an XML layout file

  1. In the “Project” window of Deveco Studio, open “Entry > SRC > main > resources > base”, right-click on the “Layout” folder and select “New > layout Resource File”. Name it “first_layout”.

  2. Open the newly created first_layout.xml layout file and modify the contents to describe the properties and hierarchy of the layout and components.

    <? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:orientation="vertical" ohos:padding="32"> <Text ohos:id="$+id:text" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="horizontal_center" ohos:text="My name is Text." ohos:text_size="25fp"/> <Button ohos:id="$+id:button" ohos:margin="50" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="horizontal_center" ohos:text="My name is Button." ohos:text_size="50"/> </DirectionalLayout>

3.2 Loading the XML layout

You need to load the XML layout in your code and add it as a root layout or as a child Component of another layout.

package com.example.myapplication.slice; import com.example.myapplication.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.*; import ohos.agp.components.element.ShapeElement; public class ExampleAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); // Load the XML layout as the root layout super.setUICContent (ResourceTable. Layout_First_Layout); Button button = (Button) findComponentById(ResourceTable.Id_button); if (button ! = null) {// Set the component property ShapeElement background = new ShapeElement(); background.setRgbColor(new RgbColor(0, 125, 255)); background.setCornerRadius(25); button.setBackground(background); Button. SetClickedListener (new Component. ClickedListener () {@ Override / / increase in the components of a click event detection public void onClick (Component Component) {// Add the action to be performed when the button is clicked}}); }}}

More:

1, community: https://www.harmonybus.net/ HongMeng bus

2. Official Account: Harmonybus

3, technical exchange QQ group: 714518656

Lesson 4, video: https://www.chengxuka.com