“This is my 33rd day of participating in the First Challenge 2022. For details: First Challenge 2022”

preface

A typical APP displays a user interface on the screen that displays all the content the user can view and interact with. All user interface elements in an application are made up of Component and ComponentContainer objects.

  • Component is an object drawn on the screen that the user can interact with.
  • ComponentContainer is a container that holds other Component and ComponentContainer objects.

Java UI layout

In the Java UI framework, there are two ways to write a layout: code to create a layout and XML to declare a UI layout.

XML declares the layout in a simpler and more intuitive way. Most of the properties in each Component and ComponentContainer object can be set in XML, and each has its own LIST of XML properties.

Component, as the base class of components, has properties commonly used by each Component, such as ID, layout parameters, and so on.

To create a layout in code, you need to create components and layouts separately in AbilitySlice and organize them together.

This article looks at how to create a layout in XML

XML create layout

XML is an easy and intuitive way to create layouts. Most of the properties of each Component and ComponentContainer object can be set in XML, and each has its own LIST of XML properties. Some attributes are only applicable to specific components. For example, only Text supports the “text_color” attribute. Components that do not support this attribute will ignore it if it is added. Component subclasses inherit the property list of their parent class. Component is the base class of the Component and has properties commonly used by each Component, such as ID and layout parameters.

First, create a layout file in the SRC \main\ Resources \ Base \layout directory.

Right-click the Layout directory and choose the “New/Layout Resource File” option from the pop-up menu:

Add linear layout DirectionLayout as the root layout by default as follows:


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

</DirectionalLayout>
Copy the code

Add the Text child component

Text.

  • Id attribute: oHOs :id=”$+ ID :text”, set the id for the component text, in Java code can be used to identify the component defined in the XML layout; Where the + sign is used to generate id constants if the ID does not exist, and to use existing constants if the ID does exist. The component can be retrieved from the generated constant in Java code;
  • Ohos :width= “match_parent”; Ohos :height= “match_content”;
  • Text content property: this property is unique to the Text component. Ohos: Text = “custom layout Text component”, display “custom layout Text component” Text;
  • Text font size property: this property is unique to the Text component, oHOs :text_size= “100”;
  • Text alignment property: This property is unique to the Text component. Ohos :text_alignment= “Center”;

The code is as follows:

<Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_color="#FFDE1968"
        ohos:text="Learn Hongmeng Together"
        ohos:text_size="40fp"
        ohos:center_in_parent="true"
        />
Copy the code

Add the Button child component

 <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Click here for surprises."
        ohos:text_size="19fp"
        ohos:text_color="#FF0C43CF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"/>
Copy the code

The complete XML file is as follows:


      
<DependentLayout
    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:text_color="#FFDE1968"
        ohos:text="Learn Hongmeng Together"
        ohos:text_size="40fp"
        ohos:center_in_parent="true"
        />
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Click here for surprises."
        ohos:text_size="19fp"
        ohos:text_color="#FF0C43CF"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:right_padding="70vp"
        ohos:left_padding="70vp"
        ohos:center_in_parent="true"
        ohos:below="$id:text"
        ohos:margin="10vp"/>


</DependentLayout>
Copy the code

Create the Ability

Right click on the package name that you want to create Ability and select New/Ability/Empty Page Ability (Java) option:

Enter the Ability class name in the pop-up dialog box, for exampleXMLAbility, click Finish button;

Two Java files are then automatically generated: XMLAbility. Java and XMLAbilitySlice. Java, as shown:

After it is successfully created, XMLAbility will also be automatically configured. We will see the following XMLAbility configuration added under the “abilities” TAB in config.json:

{
        "orientation": "unspecified"."name": "com.example.helloworld.XMLAbility"."icon": "$media:icon"."description": "$string:xmlability_description"."label": "$string:entry_XMLAbility"."type": "page"."launchType": "standard"
      }
Copy the code

Set XMLAbility to enable Ability and set the XMLAbility configuration in config.json to “abilities” : [] tag in the first, according to the following configuration, custom com. Example. The helloworld. XMLAbility is applied in display since the start of the first Ability, at this time the full config. The json code is as follows:

{
  "app": {
    "bundleName": "com.example.helloworld"."vendor": "example"."version": {
      "code": 1000000."name": "1.0.0"}},"deviceConfig": {},
  "module": {
    "package": "com.example.helloworld"."name": ".MyApplication"."mainAbility": "com.example.helloworld.MainAbility"."deviceType": [
      "phone"]."distro": {
      "deliveryWithInstall": true."moduleName": "entry"."moduleType": "entry"."installationFree": true
    },
    "abilities": [{"orientation": "unspecified"."name": "com.example.helloworld.XMLAbility"."icon": "$media:icon"."description": "$string:xmlability_description"."label": "$string:entry_XMLAbility"."type": "page"."launchType": "standard"
      },
      {
        "skills": [{"entities": [
              "entity.system.home"]."actions": [
              "action.system.home"]}],"orientation": "unspecified"."name": "com.example.helloworld.MainAbility"."icon": "$media:icon"."description": "$string:mainability_description"."label": "$string:entry_MainAbility"."type": "page"."launchType": "standard"}}}]Copy the code

XMLAbility loads the layout file

To load the layout file in Ability, call the super.setuicontent () method in onStart and set the ID of the loaded layout file as follows:

package com.example.helloworld;

import com.example.helloworld.slice.XMLAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class XMLAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
// super.setMainRoute(XMLAbilitySlice.class.getName());
        // Displays a custom ability_xml.xml layout file
        super.setUIContent(ResourceTable.Layout_ability_xml); }}Copy the code

Run code:

conclusion

In this article, you learned how to write a page with text and buttons in XML. There are probably a lot of things that are not very well written, and the interface is arbitrary and not very beautiful.

But at least it’s a page we created ourselves. Next, we will continue to learn other common Java UI components and try to write a nice APP UI interface that looks like normal use. See you in the next article!