An overview of the
Since its launch, HarmonyOS has played with it in bits and pieces, and this is the first step in getting the system started.
coding
Install HUAWEI DevEco Studio, configure the environment, and create a new Empty Feature Ability(Java) with Device as Phone. Click all the way to create a blank project. Check the project and find that some files have been created automatically. For example, Entry package is similar to Android app package, MyApplication is similar to Android Application, and MainAbility and MainActivity are also much worse.
1. Write the XML layout
Ability_main.xml is automatically created, and this article is modified on ability_main.
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#ffffff">
<Text
ohos:id="$+id:text"
ohos:height="match_content"
ohos:width="match_content"
ohos:center_in_parent="true"
ohos:text="The XML layout"
ohos:text_color="# 000000"
ohos:text_font="monospace"
ohos:text_size="20fp"/>
<Button
ohos:id="$+id:button"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button"
ohos:below="$id:text"
ohos:bottom_padding="8vp"
ohos:horizontal_center="true"
ohos:left_padding="32vp"
ohos:right_padding="32vp"
ohos:text="Next step"
ohos:text_color="#ffffff"
ohos:text_size="20fp"
ohos:top_margin="32vp"
ohos:top_padding="8vp"/>
</DependentLayout>
Copy the code
DependentLayout is a DependentLayout similar to a RelativeLayout. If you have a large number of child elements, use an ID to locate them. The background_button referenced by the background_element is a rounded rectangle drawn separately, otherwise simply setting the color to a rectangle with corners of 90°. Fp is generally used as the unit of text size. If the unit is not added, the default unit is PX. Using PX on different devices may lead to a large deviation in layout. The distance unit is usually vp, similar to FP, sp and DP in Android.
2. Create a click event for button
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
Button button = (Button) findComponentById(ResourceTable.Id_button);
button.setClickedListener(component -> {
Intent intent0 = new Intent();
Operation operation = (Operation) new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.harmonyos.helloworld")
.withAbilityName(".SecondAbility") .build(); intent1.setOperation(operation); startAbility(intent1); }); }...Copy the code
Find the BUTTON in the XML by Id_button and set the click event. WithDeviceId is set to “” because the device ID is automatically obtained when” “is set. Json file. The bundleName file is the same as the package name. Json is also configured. If the target name coincides with the bundleName package name, the package name can be left blank, just like “.secondability “above. The next step is to create the SecondAbility layout.
3. Coding layout
SecondAbility Layout Is used here. XML layout and encoding layout are essentially the same, just different in form. Draw the page using encoding in SecondAbilitySlice in the created SecondAbility
@Override
public void onStart(Intent intent) {
super.onStart(intent);
// Create parent container
DependentLayout dependentLayout = new DependentLayout(this);
// Specify the height of the parent container
dependentLayout.setWidth(MATCH_PARENT);
dependentLayout.setHeight(MATCH_PARENT);
// Sets the background color of the parent container
ShapeElement shapeElement = new ShapeElement();
shapeElement.setRgbColor(new RgbColor(244.255.255));
dependentLayout.setBackground(shapeElement);
// Create a text container
Text text = new Text(this);
// Specify the width and height of the container as the contents of the package
text.setWidth(MATCH_CONTENT);
text.setHeight(MATCH_CONTENT);
// Set the font color
text.setTextColor(Color.BLACK);
// Set the content
text.setText("Code layout");
// Set the font size
text.setTextSize(20, Text.TextSizeType.FP);
// Sets the text container to be centered in the parent container
DependentLayout.LayoutConfig layoutConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT, MATCH_CONTENT);
layoutConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
text.setLayoutConfig(layoutConfig);
// Add text to the parent container
dependentLayout.addComponent(text);
// Set the parent container to the page layout of the page
super.setUIContent(dependentLayout);
}
Copy the code
-
Create a parent container – DependentLayout, specifying the size, shape, and background of the parent container.
-
Create text, set text copy, and specify font color and size.
-
Configure the layout properties of the text, the wrap content (how big the content is, how big the container is), and the center parent container.
-
Adds the created text to the parent container.
-
Set the parent container to be the layout container for the page.
4. Compile and run
The main page shows the XML layout and the Next button. Click Next to go to the Encoding layout.
conclusion
- The purpose of this article is to familiarize yourself with the basic configuration of the HarmonyOS project and write a small demo as a first step.
- HarmonyOS is a HarmonyOS app for Android developers who are familiar with Android and can find HarmonyOS controls, usage, files, etc. While the coding is similar, and even the user experience may be similar, HarmonyOS is definitely not a shell of Android. HarmonyOS is definitely ahead of the curve in terms of overall planning, distribution, connectivity, and security.