編寫第一個頁面
在Java UI框架中，提供了兩種編寫佈局的方式：在XML中宣告UI佈局和在程式碼中建立佈局。這兩種方式創建出的佈局沒有本質差別，為了熟悉兩種方式，我們將通過XML的方式編寫第一個頁面，通過程式碼的方式編寫第二個頁面。
XML編寫頁面在“Project”視窗，開啟“entry > src > main > resources > base”，右鍵點選“base”資料夾，選擇“New > Directory”，命名為“layout”。在“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_content" ohos:height="match_content" ohos:center_in_parent="true" ohos:text="Hello World" ohos:text_color="white" ohos:text_size="32fp"/> <Button ohos:id="$+id:button" ohos:width="match_content" ohos:height="match_content" ohos:text_size="19fp" ohos:text="Next" ohos:top_padding="8vp" ohos:bottom_padding="8vp" ohos:right_padding="80vp" ohos:left_padding="80vp" ohos:text_color="white" ohos:background_element="$graphic:button_element" ohos:center_in_parent="true" ohos:align_parent_bottom="true"/></DependentLayout>4.上述按鈕的背景是通過“button_element”來顯示的，需要在“base”目錄下建立“graphic”資料夾，在“graphic”資料夾中新建一個“button_element.xml”檔案。
“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>package com.example.myapplication.slice; import com.example.myapplication.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); super.setUIContent(ResourceTable.Layout_main_layout); // 載入XML佈局 } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}請參考應用執行，效果如圖所示：
程式碼編寫介面在上一節中，我們用XML的方式編寫了一個包含文字和按鈕的頁面。為了幫助開發者熟悉在程式碼中建立佈局的方式，接下來我們使用此方式編寫第二個頁面。
開啟 “SecondAbilitySlice.java”檔案，新增一個文字，示例程式碼如下：
package com.example.myapplication.slice; import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.colors.RgbColor;import ohos.agp.components.DependentLayout;import ohos.agp.components.DependentLayout.LayoutConfig;import ohos.agp.components.Text;import ohos.agp.components.element.ShapeElement;import ohos.agp.utils.Color; import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT; public class SecondAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); // 宣告佈局 DependentLayout myLayout = new DependentLayout(this); // 設定佈局大小 myLayout.setWidth(MATCH_PARENT); myLayout.setHeight(MATCH_PARENT); ShapeElement element = new ShapeElement(); element.setRgbColor(new RgbColor(0, 0, 0)); myLayout.setBackground(element); // 建立一個文字 Text text = new Text(this); text.setText("Nice to meet you."); text.setWidth(MATCH_PARENT); text.setTextSize(55); text.setTextColor(Color.WHITE); // 設定文字的佈局 DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT,MATCH_CONTENT); textConfig.addRule(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); }}package com.example.myapplication.slice; import com.example.myapplication.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.aafwk.content.Operation;import ohos.agp.components.*; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); 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 secondIntent = new Intent(); // 指定待啟動FA的bundleName和abilityName Operation operation = new Intent.OperationBuilder() .withDeviceId("") .withBundleName("com.example.myapplication") .withAbilityName("com.example.myapplication.SecondAbility") .build(); secondIntent.setOperation(operation); startAbility(secondIntent); // 通過AbilitySlice的startAbility介面實現啟動另一個頁面 } }); } } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}2.再次執行專案，效果如圖所示：
最新評論