鴻蒙開發-編寫應用程序第一個界面

前言

鴻蒙應用程序開發界面和Android同樣有兩種實現方式，一種是在XML中聲明UI佈局，另外一種是在Java代碼中建立佈局。那麼下面咱們就來看這兩種方式是如何實現界面佈局的。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」佈局文件。以下圖所示。android

打開建立好的「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」表示有所區別）。json

在「main_layout.xml」佈局文件中的Button按鈕的背景是經過「button_element」來顯示的，須要在「base」目錄下建立「graphic」文件夾，在「graphic」文件夾中新建一個「button_element.xml」文件。以下圖所示。

「graphic」文件目錄相似於Android工程中的「drawable」文件目錄，都是用來存放一些可繪製的文件或者圖片。ide

建立的「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相似，都是項目一些須要註冊和配置的信息。配置信息以下。
ui

"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」文件，添加一個文本，示例代碼以下。this

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)來加載該佈局。spa

實現界面之間的跳轉

打開第一個界面的「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 ————————

碼字不易，若是您以爲這篇博客寫的比較好的話，能夠讚揚一杯咖啡吧~~