快速入門HarmonyOS的Java UI框架的教程
本文檔適用于HarmonyOS應(yīng)用開發(fā)的初學(xué)者。編寫兩個(gè)簡(jiǎn)單的頁面，實(shí)現(xiàn)在第一個(gè)頁面點(diǎn)擊按鈕跳轉(zhuǎn)到第二個(gè)頁面。
注意：運(yùn)行Hello World在創(chuàng)建工程時(shí)，設(shè)備類型和模板分別以Wearable和Empty Feature Ability(Java)為例，本文檔也基于相同的設(shè)備類型和模板進(jìn)行說明。
編寫第一個(gè)頁面
在Java UI框架中，提供了兩種編寫布局的方式：在XML中聲明UI布局和在代碼中創(chuàng)建布局。這兩種方式創(chuàng)建出的布局沒有本質(zhì)差別，為了熟悉兩種方式，我們將通過XML的方式編寫第一個(gè)頁面，通過代碼的方式編寫第二個(gè)頁面。
XML編寫頁面
在“Project”窗口，打開“entry > src > main > resources > base”，右鍵點(diǎn)擊“base”文件夾，選擇“New > Directory”，命名為“l(fā)ayout”。
鍵點(diǎn)擊“l(fā)ayout”文件夾，選擇“New > File”，命名為“main_layout.xml”。
在“l(fā)ayout”文件夾下可以看到新增了“main_layout.xml”文件。
打開“main_layout.xml”文件，添加一個(gè)文本和一個(gè)按鈕，示例代碼如下：
<?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>
上述按鈕的背景是通過“button_element”來顯示的，需要在“base”目錄下創(chuàng)建“graphic”文件夾，在“graphic”文件夾中新建一個(gè)“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>
說明：如果DevEco Studio提示xmlns字段錯(cuò)誤，請(qǐng)忽略，不影響后續(xù)操作。
加載XML布局
在“Project”窗口中，選擇“entry > src > main > java > com.example.helloworld > slice” ，打開“MainAbilitySlice.java”文件。重寫onStart()方法加載XML布局，示例代碼如下：
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);
}
}
效果如圖所示：
創(chuàng)建另一個(gè)頁面
創(chuàng)建Feature Ability
在“Project”窗口，打開“entry > src > main > java”，右鍵點(diǎn)擊“com.example.myapplication”文件夾，選擇“New > Ability > Empty Feature Ability(Java)”。配置Ability時(shí)，將“Page Name”設(shè)置為“SecondAbility”，點(diǎn)擊“Finish”。創(chuàng)建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。
代碼編寫界面
在上一節(jié)中，我們用XML的方式編寫了一個(gè)包含文本和按鈕的頁面。為了幫助開發(fā)者熟悉在代碼中創(chuàng)建布局的方式，接下來我們使用此方式編寫第二個(gè)頁面。
打開 “SecondAbilitySlice.java”文件，添加一個(gè)文本，示例代碼如下：
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);
// 設(shè)置布局大小
myLayout.setWidth(MATCH_PARENT);
myLayout.setHeight(MATCH_PARENT);
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(0, 0, 0));
myLayout.setBackground(element);
// 創(chuàng)建一個(gè)文本
Text text = new Text(this);
text.setText("Nice to meet you.");
text.setWidth(MATCH_PARENT);
text.setTextSize(55);
text.setTextColor(Color.WHITE);
// 設(shè)置文本的布局
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);
}
}
實(shí)現(xiàn)頁面跳轉(zhuǎn)
打開第一個(gè)頁面的“MainAbilitySlice.java”文件，重寫onStart()方法添加按鈕的響應(yīng)邏輯，實(shí)現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)到下一頁，示例代碼如下：
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) {
// 為按鈕設(shè)置點(diǎn)擊回調(diào)
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
Intent secondIntent = new Intent();
// 指定待啟動(dòng)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接口實(shí)現(xiàn)啟動(dòng)另一個(gè)頁面
}
});
}
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
再次運(yùn)行項(xiàng)目，效果如圖所示：
總結(jié)
到此這篇關(guān)于快速入門HarmonyOS的Java UI框架的文章就介紹到這了,更多相關(guān)HarmonyOS的Java UI框架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ThreadLocal數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)原理解析
這篇文章主要為大家介紹了ThreadLocal數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在Spring Boot中加載初始化數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了在Spring Boot中加載初始化數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Java枚舉類enum介紹,和其它普通類一樣,enum同樣可以有成員變量、方法、構(gòu)造器,也可以實(shí)現(xiàn)一個(gè)或多個(gè)接口,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄贛yBatis XML配置方法(全面了解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
springboot自動(dòng)裝配之@ComponentScan使用方式
@componentScan注解用于掃描指定路徑下的組件,并自動(dòng)將它們注冊(cè)為Spring?Bean,該注解支持多種過濾規(guī)則,可以自定義掃描過濾規(guī)則,Spring?Boot通過ConfigurationClassPostProcessor處理@ComponentScan注解,并在啟動(dòng)時(shí)創(chuàng)建和注冊(cè)BeanDefinition對(duì)象2025-01-01
SpringBoot使用Maven插件進(jìn)行項(xiàng)目打包的方法
這篇文章主要介紹了SpringBoot使用Maven插件進(jìn)行項(xiàng)目打包的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Java工作隊(duì)列代碼詳解，涉及Round-robin 轉(zhuǎn)發(fā)，消息應(yīng)答（messageacknowledgments），消息持久化（Messagedurability）等相關(guān)內(nèi)容，具有一定參考價(jià)值，需要的朋友可以了解下。2017-11-11
在idea中g(shù)it實(shí)現(xiàn)里查看歷史代碼方式
這篇文章主要介紹了在idea中g(shù)it里查看歷史代碼的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
spring mvc4中相關(guān)注解的詳細(xì)講解教程
這篇文章主要給大家介紹了關(guān)于spring mvc4中相關(guān)注解的相關(guān)資料，其中詳細(xì)介紹了關(guān)于@Controller、@RequestMapping、@RathVariable、@RequestParam及@RequestBody等等注解的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
JDK9對(duì)String字符串的新一輪優(yōu)化
這篇文章主要介紹了JDK9對(duì)String字符串的新一輪優(yōu)化,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03