前 言
鴻蒙應用程式開發界面和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 ————————
碼字不易，如果您覺得這篇博客寫的比較好的話，可以贊賞一杯咖啡吧~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/58966.html
標籤：java