鴻蒙OS應(yīng)用開發(fā)實踐（三）
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
經(jīng)過前兩篇的學(xué)習(xí)，我們了解了DevEco運行一個程序的基本流程和一個鴻蒙OS應(yīng)用項目的代碼結(jié)構(gòu)。
用一句《三體》格式的話說：跑得動hello world，我們就是同志了。
這一篇，我們就自己手動擼一個簡單的鴻蒙交互程序：從一個頁面跳轉(zhuǎn)到另一個頁面。
(一)創(chuàng)建工程
先創(chuàng)建一個新的TV的empty java工程：
點finish后，發(fā)現(xiàn)這次從創(chuàng)建到項目環(huán)境加載完成，用了很短的時間，這是因為初始環(huán)境需要各種配置和下載，類似我們初下完一個大型游戲，首次需要更新內(nèi)容一般。
(二)自定義布局
進入界面后，默認(rèn)的IDE已經(jīng)創(chuàng)建了一個hello world程序，我們打開entry -> src -> main ->resources -> base -> layout -> ability_main.xml 布局文件：
我們先清掉原本的布局，重新寫入我們自己的布局：
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:width="match_parent"
- ohos:height="match_parent"
- ohos:background_element="#000000">
- ohos:id="$+id:text"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:center_in_parent="true"
- ohos:text="你好，鴻蒙OS"
- ohos:text_color="white"
- ohos:text_size="32fp"/>
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="20fp"
- ohos:text="跳轉(zhuǎn)"
- ohos:left_margin="50vp"
- ohos:bottom_margin="50vp"
- 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"/>
<Button>標(biāo)簽表示了這里將會布局創(chuàng)建一個按鈕，大部分設(shè)置信息同Text。
按鈕的背景指定了“button_element”來顯示，這是另外一個布局文件，我們來手動創(chuàng)建，在resources -> base ->graphic 目錄下，右鍵創(chuàng)建一個File，命名為：button_element.xml
在button_element.xml添加如下代碼：
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:shape="rectangle">
- <corners
- ohos:radius="10"/>
- <solid
- ohos:color="#FF007DFF"/>
- </shape>
目前鴻蒙官方提供形狀：rectangle(方形)和oval(橢圓)，通過不同的內(nèi)外邊距設(shè)定，就可以衍生出其他形狀：圓形，橢圓，正方，膠囊。
默認(rèn)的模版使用的是方向布局DirectionLayout(垂直或者橫向)，這里我們修改使用DependentLayout相對位置布局，這樣可以更加方便的控制文本和按鈕的相對位置。
運行效果：
(三)創(chuàng)建建跳轉(zhuǎn)頁面
當(dāng)然，當(dāng)前點擊跳轉(zhuǎn)按鈕不會有任何反應(yīng)，一方面我們還沒寫交互邏輯，另一方面，我們要跳轉(zhuǎn)的頁面也還沒寫。我們繼續(xù)下一步，寫一個新的頁面。
在項目對應(yīng)的目錄下，創(chuàng)建一個空的FA(java)，如下圖：
這里我們將新頁面命名為：NewPage
下面兩項不勾選，直接點finish。
創(chuàng)建后，目錄下除了剛才創(chuàng)建的newpage，還會自動創(chuàng)建一個newpageslice在slice目錄下以及對應(yīng)的布局文件在layout目錄下：
之前在跑hello world的時候，我們說過，ability是入口，邏輯代碼都在slice里，同樣，在這個newpage里，它也是將邏輯route到了slice類中。
我們打開ability_new_page.xml，簡單修改下輸出文本：
(四)主頁面添加交互邏輯
到這里，我們的第二個頁面算是簡單的創(chuàng)建完畢了，下一步，我們需要在主頁面下添加交互邏輯，讓它可以跳轉(zhuǎn)到這個新的slice頁面中來，在主頁面(MainAbilitySlice)中去添加按鈕點擊的事件邏輯：
- Button btn = (Button) findComponentById(ResourceTable.Id_button);
- if (btn != null) {
- //添加按鈕點擊事件監(jiān)聽
- btn.setClickedListener(new Component.ClickedListener() {
- @Override
- public void onClick(Component component) {
- Intent newpageIntent = new Intent();
- //指定目標(biāo)頁面
- Operation operation = new Intent.OperationBuilder()
- .withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build();
- newpageIntent.setOperation(operation);
- //啟動目標(biāo)頁面
- startAbility(newpageIntent);
- } });
- }
這里會要求import新的包，以提供組件模塊，不然上面的代碼輸完是會標(biāo)紅報錯的。需要引入的包：
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
解析下代碼：
findComponentById通過id來找到按鈕組件，然后這個id對應(yīng)的就是我們在布局文件中設(shè)置的：
ohos:id="$+id:button"
onClick對應(yīng)按鈕的點擊事件，這個不是自定義函數(shù)，屬于事件觸發(fā)函數(shù)。
Intent上回說過了，它是一個中間件，協(xié)助當(dāng)前頁面往新頁面通訊。
Operation operation = new Intent.OperationBuilder()
.withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build();
這串代碼指定了我們要跳轉(zhuǎn)的目標(biāo)頁面，需要指定目標(biāo)的包名，還有Ability名稱(非slice)。
最后使用startAbility()接口啟動那個頁面。
(五)運行
再次運行查看效果(先開遠(yuǎn)程虛擬設(shè)備，再點運行)：
效果出來了，點擊右側(cè)的返回，還能回到主界面。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
