鴻蒙開發-撰寫應用程式第一個界面

前 言

鴻蒙應用程式開發界面和Android一樣有兩種實作方式，一種是在XML中宣告UI布局，另一種是在Java代碼中創建布局，那么下面我們就來看這兩種方式是如何實作界面布局的，

XML撰寫頁面

• 首先打開開發工具DevEco Studio創建一個專案，然后在“Project”目錄節點，打開“entry > src > main > resources > base”，右鍵點擊“base”檔案夾，選擇“New > Directory”，命名為“layout”，如下圖所示，

• 接著右鍵點擊“layout”檔案夾，選擇“New > File”，命名為“main_layout.xml”，并點擊“OK”創建XML布局界面檔案，如下圖所示，

在“layout”檔案夾目錄下可以看到剛剛創建的“main_layout.xml”布局檔案，如下圖所示，

• 打開創建好的“main_layout.xml”布局檔案，添加一個文本和一個按鈕控制元件，示例代碼如下，

<?xml version="1.0" encoding="utf-8" ?>
<DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:background_element="#000000">

    <Text
            ohos:id="$+id:text"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:center_in_parent="true"
            ohos:text="你好，_彼岸雨敲窗_"
            ohos:text_color="white"
            ohos:left_margin="10vp"
            ohos:right_margin="10vp"
            ohos:text_size="30fp"/>

    <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="18fp"
            ohos:text="點擊跳轉至下一頁"
            ohos:top_padding="15vp"
            ohos:bottom_padding="15vp"
            ohos:right_padding="15vp"
            ohos:left_padding="15vp"
            ohos:text_color="white"
            ohos:background_element="$graphic:button_element"
            ohos:center_in_parent="true"
            ohos:bottom_margin="20vp"
            ohos:align_parent_bottom="true"/>

</DependentLayout>

布局代碼分析：Text是屬于文本控制元件，用來顯示一段文字，和Android的TextView控制元件作用一樣，控制元件中的ohos:id="$+id:text"是設定該控制元件的id，和Android中的給控制元件設定id的android:id="@+id/text"類似，ohos:width="match_parent"和ohos:height="match_content"分別給該控制元件設定寬和高，它們和Android中的給控制元件設定寬高android:layout_width="match_parent"和android:layout_height="match_parent"類似，ohos:width和ohos:height可以設定為“match_parent”（作用類似于Android中的match_parent）和“ohos:height=“match_content”（作用類似于Android中的wrap_content）兩個值，ohos:text的作用是給控制元件設定文本的內容，Button是屬于按鈕控制元件，和Android中的Button作用一樣，還有，在鴻蒙中給控制元件設定大小單位使用“vp”表示（和Android中使用“dp”表示有所區別），設定文本的大小單位使用“fp”表示（和Android中使用“sp”表示有所區別），

• 在“main_layout.xml”布局檔案中的Button按鈕的背景是通過“button_element”來顯示的，需要在“base”目錄下創建“graphic”檔案夾，在“graphic”檔案夾中新建一個“button_element.xml”檔案，如下圖所示，

“graphic”檔案目錄類似于Android工程中的“drawable”檔案目錄，都是用來存放一些可繪制的檔案或者圖片，

創建的“button_element.xml”檔案的示例代碼如下，

<?xml version="1.0" encoding="utf-8"?>
<shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="oval">
    <solid
            ohos:color="#007DFF"/>
</shape>

示例代碼中的ohos:shape=“oval"是設定為橢圓，ohos:color=”#007DFF"是設定背景顏色，

加載XML布局

• 首先在“Project”目錄節點，選擇“entry > src > main > java > com.example.testdemo01 > slice” ，打開“MainAbilitySlice.java”檔案，并在onStart()生命周期方式中通過super.setUIContent()來加載XML布局，示例代碼如下，

import com.example.testdemo01.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class MainAbilitySlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 加載XML布局
        super.setUIContent(ResourceTable.Layout_main_layout);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

代碼中的super.setUIContent(ResourceTable.Layout_main_layout)就是用來加載XML布局的，它和Android中加載布局XML檔案使用setContentView(R.layout.activity_main)是一樣的，

• 運行程式到TV模擬器上截圖如下圖所示，

創建另一個界面

• 首先在“Project”目錄節點，打開“entry > src > main > java”，右鍵點擊“com.example.testdemo01”檔案夾，選擇“New > Ability > Empty Feature Ability(Java)”，配置Ability時，將“Page Name”設定為“SecondAbility”，點擊“Finish”，創建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”檔案，如下圖所示，

需要注意的是，創建一個新的“SecondAbility”如果“config.json（~\entry\src\main\config.json）”檔案中如果沒有自動添加配置資訊的話必須要手動添加，config.json和Android中的AndroidManifest.xml類似，都是專案一些需要注冊和配置的資訊，配置資訊如下，

"abilities": [
      {
       ...
      },
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "landscape",
        "formEnabled": false,
        "name": "com.example.testdemo01.SecondAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "TestDemo01",
        "type": "page",
        "launchType": "standard"
      }
    ]

代碼撰寫布局界面

在第一個界面是使用XML中宣告UI布局，那么接下使用Java代碼中創建布局看看，打開 “SecondAbilitySlice.java”檔案，添加一個文本，示例代碼如下，

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;

public class SecondAbilitySlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 宣告布局
        DependentLayout myLayout = new DependentLayout(this);
        // 設定布局大小
        myLayout.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        myLayout.setHeight(DependentLayout.LayoutConfig.MATCH_PARENT);
        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(0, 0, 0));
        myLayout.setBackground(element);

        // 創建一個文本
        Text text = new Text(this);
        text.setText("你好，你好，_彼岸雨敲窗_，我是第二個界面，");
        text.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        text.setTextSize(30);
        text.setTextColor(Color.WHITE);
        // 設定文本的布局
        DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_CONTENT,
                DependentLayout.LayoutConfig.MATCH_CONTENT);
        textConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
        text.setLayoutConfig(textConfig);
        myLayout.addComponent(text);
        super.setUIContent(myLayout);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

代碼分析：首先宣告一個DependentLayout布局，并設定該布局相關的屬性，接著創建一個Text文本控制元件并設定該控制元件的相關屬性，然后把該文本控制元件添加到該布局中，最后通過super.setUIContent(myLayout)來加載該布局，

實作界面之間的跳轉

• 打開第一個界面的“MainAbilitySlice.java”檔案代碼，在onStart()方法添加按鈕的點擊事件，并實作點擊按鈕跳轉到下一個界面的代碼邏輯，示例代碼如下，

import com.example.testdemo01.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends AbilitySlice {

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 加載XML布局
        super.setUIContent(ResourceTable.Layout_main_layout);
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        if (button != null) {
            // 為按鈕控制元件設定點擊事件
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    Intent intent = new Intent();
                    Operation operation = new Intent.OperationBuilder()
                            .withDeviceId("")
                            .withBundleName("com.example.testdemo01")
                            .withAbilityName("com.example.testdemo01.SecondAbility")
                            .build();
                    intent.setOperation(operation);
                    startAbility(intent);
                }
            });
        }
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

代碼分析：首先通過findComponentById(ResourceTable.Id_button)找到該按鈕控制元件，類似于Android的中通過findViewById(R.id.button)找到控制元件id類似，接著通過button.setClickedListener()來設定該按鈕的點擊事件，最后實作界面之間的跳轉邏輯，通過new Intent()實體一個“意圖”，再實體指定待啟動FA的bundleName和abilityName標簽，abilityName標簽填寫下一個界面的注冊資訊，再通過intent.setOperation(operation)添加到Intent，通過startAbility(intent)來啟動這個“意圖”動作啟動下一個界面，
有Android原生應用的開發者對這段代碼應該不是很陌生，button.setClickedListener()設定點擊事件和Android中設定點擊事件一樣，啟動下一個界面在Android中也是通過new Intent()一個“意圖”動作的方式，鴻蒙的啟動加載下一個界面通過startAbility(intent)方式來啟動，這和Android中通過startActivity(intent)來啟動下一個界面類似，

• 點擊界面一中的“點擊跳轉至下一頁”按鈕后跳轉到下一個界面截圖如下圖所示，

———————— The end ————————

碼字不易，如果您覺得這篇博客寫的比較好的話，可以贊賞一杯咖啡吧~~