鴻蒙OS應(yīng)用開(kāi)發(fā)實(shí)踐（三）

小嵌

鴻蒙OS應(yīng)用開(kāi)發(fā)實(shí)踐（三）, 經(jīng)過(guò)前兩篇的學(xué)習(xí)，我們了解了DevEco運(yùn)行一個(gè)程序的基本流程和一個(gè)鴻蒙OS應(yīng)用項(xiàng)目的代碼結(jié)構(gòu)。 用一句《三體》格式的話(huà)說(shuō)：跑得動(dòng)hello world，我們就是同志了。

這一篇，我們就自己手動(dòng)擼一個(gè)簡(jiǎn)單的鴻蒙交互程序：從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面。




（一）創(chuàng)建工程 先創(chuàng)建一個(gè)新的TV的empty java工程： 點(diǎn)finish后，發(fā)現(xiàn)這次從創(chuàng)建到項(xiàng)目環(huán)境加載完成，用了很短的時(shí)間，這是因?yàn)槌跏辑h(huán)境需要各種配置和下載，類(lèi)似我們初下完一個(gè)大型游戲，首次需要更新內(nèi)容一般。




（二）自定義布局 進(jìn)入界面后，默認(rèn)的IDE已經(jīng)創(chuàng)建了一個(gè)hello world程序，我們打開(kāi)entry -> src -> main ->resources -> base -> layout -> ability_main.xml 布局文件： 我們先清掉原本的布局，重新寫(xiě)入我們自己的布局： <?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=“你好，鴻蒙OS“         ohos:text_color=“white“         ohos:text_size=“32fp“/>     <Button ohos:id=“$+id:button“             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“/> </DependentLayout>


<DependentLayout>標(biāo)簽指定了這是一個(gè)相對(duì)位置布局，意思就是布局里的每個(gè)組件可以指定相對(duì)于其他同級(jí)組件的位置，也可以指定相對(duì)于父組件的位置。
<Button>標(biāo)簽表示了這里將會(huì)布局創(chuàng)建一個(gè)按鈕，大部分設(shè)置信息同Text。 按鈕的背景指定了“button_element”來(lái)顯示，這是另外一個(gè)布局文件，我們來(lái)手動(dòng)創(chuàng)建，在resources -> base ->graphic 目錄下，右鍵創(chuàng)建一個(gè)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（橢圓），通過(guò)不同的內(nèi)外邊距設(shè)定，就可以衍生出其他形狀：圓形，橢圓，正方，膠囊。 <corners>標(biāo)簽表示了圓角設(shè)定，將方形設(shè)定圓角，我們就可以得到一個(gè)圓角按鈕。 默認(rèn)的模版使用的是方向布局DirectionLayout（垂直或者橫向），這里我們修改使用DependentLayout相對(duì)位置布局，這樣可以更加方便的控制文本和按鈕的相對(duì)位置。 運(yùn)行效果：




（三）創(chuàng)建建跳轉(zhuǎn)頁(yè)面

當(dāng)然，當(dāng)前點(diǎn)擊跳轉(zhuǎn)按鈕不會(huì)有任何反應(yīng)，一方面我們還沒(méi)寫(xiě)交互邏輯，另一方面，我們要跳轉(zhuǎn)的頁(yè)面也還沒(méi)寫(xiě)。我們繼續(xù)下一步，寫(xiě)一個(gè)新的頁(yè)面。 在項(xiàng)目對(duì)應(yīng)的目錄下，創(chuàng)建一個(gè)空的FA（java），如下圖： 這里我們將新頁(yè)面命名為：NewPage 下面兩項(xiàng)不勾選，直接點(diǎn)finish。

創(chuàng)建后，目錄下除了剛才創(chuàng)建的newpage，還會(huì)自動(dòng)創(chuàng)建一個(gè)newpageslice在slice目錄下以及對(duì)應(yīng)的布局文件在layout目錄下：

之前在跑hello world的時(shí)候，我們說(shuō)過(guò)，ability是入口，邏輯代碼都在slice里，同樣，在這個(gè)newpage里，它也是將邏輯route到了slice類(lèi)中。 我們打開(kāi)ability_new_page.xml，簡(jiǎn)單修改下輸出文本：


（四）主頁(yè)面添加交互邏輯

到這里，我們的第二個(gè)頁(yè)面算是簡(jiǎn)單的創(chuàng)建完畢了，下一步，我們需要在主頁(yè)面下添加交互邏輯，讓它可以跳轉(zhuǎn)到這個(gè)新的slice頁(yè)面中來(lái)，在主頁(yè)面（
MainAbilitySlice）中去添加按鈕點(diǎn)擊的事件邏輯：

Button btn = （Button） findComponentById（ResourceTable.Id_button）; if （btn != null） {     //添加按鈕點(diǎn)擊事件監(jiān)聽(tīng)     btn.setClickedListener（new Component.ClickedListener（） {         @Override         public void onClick（Component component） {             Intent newpageIntent = new Intent（）;             //指定目標(biāo)頁(yè)面             Operation operation = new Intent.OperationBuilder（）                     .withDeviceId（““） .withBundleName（“com.qibiao.HarmonyOSdemo“） .withAbilityName（“com.qibiao.harmonyosdemo.NewPage“） .build（）;             newpageIntent.setOperation（operation）;             //啟動(dòng)目標(biāo)頁(yè)面             startAbility（newpageIntent）;         } }）; }

這里會(huì)要求import新的包，以提供組件模塊，不然上面的代碼輸完是會(huì)標(biāo)紅報(bào)錯(cuò)的。需要引入的包：
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;


解析下代碼：
findComponentById通過(guò)id來(lái)找到按鈕組件，然后這個(gè)id對(duì)應(yīng)的就是我們?cè)诓季治募�中設(shè)置的： ohos:id=“$+id:button“
onClick對(duì)應(yīng)按鈕的點(diǎn)擊事件，這個(gè)不是自定義函數(shù)，屬于事件觸發(fā)函數(shù)。
Intent上回說(shuō)過(guò)了，它是一個(gè)中間件，協(xié)助當(dāng)前頁(yè)面往新頁(yè)面通訊。 Operation operation = new Intent.OperationBuilder（）                     .withDeviceId（““） .withBundleName（“com.qibiao.harmonyosdemo“） .withAbilityName（“com.qibiao.harmonyosdemo.NewPage“） .build（）; 這串代碼指定了我們要跳轉(zhuǎn)的目標(biāo)頁(yè)面，需要指定目標(biāo)的包名，還有Ability名稱(chēng)（非slice）。 最后使用
startAbility（）接口啟動(dòng)那個(gè)頁(yè)面。




（五）運(yùn)行 再次運(yùn)行查看效果（先開(kāi)遠(yuǎn)程虛擬設(shè)備，再點(diǎn)運(yùn)行）： 效果出來(lái)了，點(diǎn)擊右側(cè)的返回，還能回到主界面。 本篇完。下篇見(jiàn)。