Hongmeng learning notes: creating layouts using XML

Preface

Commonly used  APP  The application will display a user interface on the screen , This interface is used to display all the contents that can be viewed and interacted by users . All user interface elements in the application are composed of  Component  and  ComponentContainer  Object composition .

• Component  It's an object drawn on the screen , Users can interact with it .

• ComponentContainer  It's one for holding other  Component  and  ComponentContainer  Object's container .

Java UI  Layout

Java UI In the frame , Provides two ways to write layouts ：

Create layout in code mode

and  

XML  Way statement

 UI  Layout .

XML  The way to declare the layout is simpler and more intuitive .  Every  Component  and  ComponentContainer  Most of the properties in the object are supported in  XML  Set in , They all have their own XML Property list .

Component As a base class for components , Have the common properties of each component , for example  ID、 Layout parameters, etc .

The way of creating layout in code mode is more troublesome , Need to be in  AbilitySlice  Create components and layouts in , And organize them .

This article talks about how to pass  XML  Create layout in

XML  Create a layout

XML  The way to create a layout is simple and intuitive . every last  Component  and  ComponentContainer  Most of the properties of the object are supported in  XML  Set in , They all have their own  XML  Property list . Some properties apply only to specific components , for example ： Only  Text  Support  “text_color”  attribute , Components that do not support this property, if this property is added , This property is ignored . Component subclasses with inheritance relationships inherit the property list of the parent class ,Component  As a base class for components , Have the common properties of each component , such as ：ID、 Layout parameters, etc .

First , stay  src\main\resources\base\layout  Under the table of contents  ,  Create layout file  ;

Right click on the  layout  Catalog  ,  Select from the pop-up menu  " New / Layout Resource File "  Options  ：

Add linear layout by default  DirectionLayout  As the root layout , The code is as follows ：

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<DirectionalLayout
 xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;
 ohos:height=&quot;match_parent&quot;
 ohos:width=&quot;match_parent&quot;
 ohos:orientation=&quot;vertical&quot;>

</DirectionalLayout>


Join in  Text  Child components

Text, seeing the name of a thing one thinks of its function , Text .

• Identity properties  : ohos:id="$+id:text" ,  Set the identity for this component  text ,  stay  Java  This can be used in the code  id  Identity acquisition  XML  Components defined in the layout  ;  among  +  The function of the number is if  id  If it doesn't exist, it generates  id  Constant  ,  If it's time to  id  If it exists, use the existing constant  ;  stay  Java  The generated constant can be used to obtain the component in the code  ;

• Width and height properties  :  The width fills the parent container  ohos:width=“match_parent” ;  High package content  ohos:height=“match_content” ;

• Text content properties  :  This is a  Text  Unique properties of components  , ohos:text=“ Custom layout  Text  Components ” ,  Show  "  Custom layout  Text  Components  "  written words  ;

• Text font size attribute  :  This is a  Text  Unique properties of components  , ohos:text_size=“100” ;

• Text alignment properties  :  This is a  Text  Unique properties of components  , ohos:text_alignment=“center”  In the middle  ;

The code is as follows ：

<Text
 ohos:id=&quot;$+id:text&quot;
 ohos:width=&quot;match_content&quot;
 ohos:height=&quot;match_content&quot;
 ohos:text_color=&quot;#FFDE1968&quot;
 ohos:text=&quot; Learn Hongmeng together &quot;
 ohos:text_size=&quot;40fp&quot;
 ohos:center_in_parent=&quot;true&quot;
 />


Join in  Button  Child components

 <Button
 ohos:id=&quot;$+id:button&quot;
 ohos:width=&quot;match_content&quot;
 ohos:height=&quot;match_content&quot;
 ohos:text=&quot; Click here for a surprise &quot;
 ohos:text_size=&quot;19fp&quot;
 ohos:text_color=&quot;#FF0C43CF&quot;
 ohos:top_padding=&quot;8vp&quot;
 ohos:bottom_padding=&quot;8vp&quot;
 ohos:right_padding=&quot;70vp&quot;
 ohos:left_padding=&quot;70vp&quot;
 ohos:center_in_parent=&quot;true&quot;
 ohos:below=&quot;$id:text&quot;
 ohos:margin=&quot;10vp&quot;/>


complete  XML  The documents are as follows ：

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<DependentLayout
 xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;
 ohos:width=&quot;match_parent&quot;
 ohos:height=&quot;match_parent&quot;
 ohos:orientation=&quot;vertical&quot;
 ohos:padding=&quot;32&quot;>

 <Text
 ohos:id=&quot;$+id:text&quot;
 ohos:width=&quot;match_content&quot;
 ohos:height=&quot;match_content&quot;
 ohos:text_color=&quot;#FFDE1968&quot;
 ohos:text=&quot; Learn Hongmeng together &quot;
 ohos:text_size=&quot;40fp&quot;
 ohos:center_in_parent=&quot;true&quot;
 />
 <Button
 ohos:id=&quot;$+id:button&quot;
 ohos:width=&quot;match_content&quot;
 ohos:height=&quot;match_content&quot;
 ohos:text=&quot; Click here for a surprise &quot;
 ohos:text_size=&quot;19fp&quot;
 ohos:text_color=&quot;#FF0C43CF&quot;
 ohos:top_padding=&quot;8vp&quot;
 ohos:bottom_padding=&quot;8vp&quot;
 ohos:right_padding=&quot;70vp&quot;
 ohos:left_padding=&quot;70vp&quot;
 ohos:center_in_parent=&quot;true&quot;
 ohos:below=&quot;$id:text&quot;
 ohos:margin=&quot;10vp&quot;/>


</DependentLayout>


establish  Ability

Right click on the file you want to create  Ability  The package name  ,  choice  New / Ability / Empty Page Ability ( Java )  Options :

Enter... In the pop-up dialog box  Ability  Class name ,  such as  

XMLAbility

 ,  Click on  Finish  Button  ;

Then it will automatically generate two  Java  file ：

XMLAbility.java

  and  

XMLAbilitySlice.java

, Pictured ：

Once created , The just created... Will also be automatically configured  XMLAbility, We will find that in the  config.json  Medium  “abilities”  Add the following under the label  XMLAbility  To configure  :

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


Set up  XMLAbility  To start  Ability ,  take  config.json  Should be  XMLAbility  The configuration is in  “abilities”: []  The first in the label  ,  Follow the configuration below  ,  Self defined  com.example.helloworld.XMLAbility  It is the first one displayed after the application starts  Ability,  At this point the complete  

config.json

  The 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"
 }
 ]
 }
}


XMLAbility  Load the layout file

Ability  Load layout file in  ,  stay  onStart  Call in  super.setUIContent ( )  Method  ,  Set the loaded layout file  ID ,  The code is 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 custom  ability_xml.xml  Layout file
 super.setUIContent(ResourceTable.Layout_ability_xml);
 }
}


Run code ：

summary

This article will learn how to use  XML  Write a page containing text and buttons , There may be many places that are not well written , The interface is also written at will , Not very beautiful .

But at least we created a page ourselves . Next, we will continue to learn other  Java UI  Common components in , Try to write a good-looking one as soon as possible, like the one used routinely  APP UI Interface . See you in the next article ！