天天看點
傳回

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

  「​​本文正在參加星光計劃3.0--夏日挑戰賽」​​

前言

   小夥伴們，木棉花又更新了！

   在序言的内容中，筆者向大家展示了數獨小遊戲項目的效果圖。而從這一期開始，我将把此項目的設計思路與相關代碼逐期分享給大家，希望能給學鴻蒙的小夥伴們提供幫助與靈感。

  序言内容的傳送門——>> ​​https://ost.51cto.com/posts/12863​​

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

正文

在本期的分享中，筆者将介紹如何搭建基礎的頁面架構（為之後的開發做準備），以及應用圖像和标簽的修改、應用的全屏化。

 建立新的項目

 打開DevEco Studio，建立一個新的Empty Ability，将其命名為project，相關勾選如下：（Device type至少要勾選phone選項）

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

建立6個新的AbilitySlice

通常情況下，一個應用是包含若幹個AbilitySlice的，每個AbilitySlice都有獨一無二的業務功能，而不同的AbilitySlice由互不幹擾的互動邏輯互相聯系，他們共同組成一個有機的應用架構。我們之是以要建立6個新的AbilitySlice，無疑是因為要搭建整個項目的頁面基礎。

如圖，打開entry>src>main>Java>com.example.project>slice，右擊slice>建立>Java類，然後為這個建立的AbilitySlice命名。因為我們的目的是建立6個新的AbilitySlice，是以本操作執行6次，輸入的名稱分别為——GameAbilitySlice，SelectAbilitySlice，RecordAbilitySlice，HowToPlayAbilitySlice，TeamAbilitySlice，

InitialAbilitySlice。

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

完成後的效果圖如下：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

經過這些操作後，我們就成功建立了6個空白頁面。加上項目自帶的MainAbilitySlice，這個項目一共由七個頁面組成，在之後的内容中，我們會在每個AbilitySlice中寫入不同的功能，并且建立頁面與頁面之間的跳轉路由。這7個頁面之間的頁面路由的概念圖如下：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

當然，這張圖看起來很抽象，而這些頁面的具體邏輯關系筆者将在後文詳細闡述。

設計首頁面（MainAbilitySlice）的UI界面

設計Button元件的背景元素

首先，我們需要合理設計Button元件的背景元素，這些我們将通過Graphic檔案來實作。

打開entry>src>main>resource>base>graphic>background_ability_main.xml，将代碼修改為如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="120"/>  //設定圓角
    <stroke
        ohos:color="#007CFD"
        ohos:width="3vp"/> 
    <solid
        ohos:color="#007CFD"/>  //設定背景色
</shape>

然後，打開entry>src>main>resource>base>graphic，右擊graphic>建立>Graphic Resource File，建立一個新的Graphic檔案，并命名為button:

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

建立完成後，打開這個建立Graphic檔案，将代碼修改為如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="120"/>  //設定圓角
    <stroke
        ohos:color="#007CFD"
        ohos:width="3vp"/>  //設定邊框的厚度與顔色
    <solid
        ohos:color="white"/>  //設定背景色
</shape>

這樣之後，我們就得到了兩個Graphic檔案，每份檔案都定義了不同的Button元件樣式，它們在xml布局時可以被引用。

通過XML布局設計首頁面的UI

首先，複制如下圖檔，然後打開entry>src>main>resource>base>media，将已複制的圖檔粘貼到media目錄中，并命名為game8，這張圖檔将在XML檔案中的Image元件中被引用：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

接着，打開entry>src>main>resource>base>layout>ability_main.xml，将代碼修改為如下：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Image
        ohos:height="220vp"
        ohos:width="365vp"
        ohos:image_src="$media:game8"
        ohos:horizontal_center="true"
        ohos:above="$id:Game"
        ohos:margin="20vp"
        />
    
    
    <Button
        ohos:id="$+id:Game"
        ohos:center_in_parent="true"
        ohos:height="50vp"
        ohos:width="250vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="white"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="開始遊戲"
        ohos:margin="14vp"
        />

    <Button
        ohos:id="$+id:record"
        ohos:below="$id:Game"
        ohos:horizontal_center="true"
        ohos:height="50vp"
        ohos:width="250vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#007CFD"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="遊戲記錄"
        ohos:margin="14vp"
        />

    <Button
        ohos:id="$+id:HowToPlay"
        ohos:below="$id:record"
        ohos:horizontal_center="true"
        ohos:height="50vp"
        ohos:width="250vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#007CFD"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="遊戲規則"
        ohos:margin="14vp"
        />


    <Button
        ohos:id="$+id:Team"
        ohos:below="$id:HowToPlay"
        ohos:horizontal_center="true"
        ohos:height="50vp"
        ohos:width="250vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#007CFD"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="關于我們"
        ohos:margin="14vp"
        />



</DependentLayout>

在這個XML檔案中，我們使用的容器元件是依賴布局，是以筆者為每個元件都設定了ID号，并通過below的的關系垂直排布這些元件。

打開Previewer，便可檢視效果

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

當然，讀者們也可以随心所欲地設計Button元件的樣式。如果想要得到一份得體美觀的UI界面，那麼設計的過程難免會花比較多的時間。筆者在設計這個UI界面時，也是投入了不少時間打磨的。在首頁面中，筆者設定了四個Button元件，它們用于聯系其他的AbilitySlice。

設計進入應用時的歡迎界面

在生活中我們不難發現，當我們打開手機内的一款App時，手機會優先顯示這個應用的歡迎界面，然後才會彈出應用的主界面。通常情況下，歡迎界面會帶有開發公司的logo，甚至還可能顯示一段廣告。顯然，合理設計的歡迎界面能為這個應用的UI互動錦上添花。

在數獨小遊戲的頁面架構中，筆者也設計了歡迎界面。其中，InitialAbilitySlice用于承載歡迎界面的内容，MainAbilitySlice用于承載首頁面的内容。打開數獨小遊戲後，InitialAbilitySlice會顯示一小段時間，接着系統會将頁面跳轉至MainAbilitySlice。

首先，我們為InitialAbilitySlice定制一個xml檔案，用于承載InitialAbilitySlice需要的界面元素。

打開entry>src>main>resource>base>layout>ability_main.xml，然後右擊ability_main.xml并選擇複制，将已複制的檔案粘貼在layout的目錄下，并重命名為initial.xml（這裡我們通過複制後重命名的方式得到新xml檔案，因為此操作的難度相對較小）；

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

接着，打開剛剛得到的initial.xml，将代碼修改為如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:image_src="$media:media1"/>

</DirectionalLayout>

這裡的Image元件引用的資源為media1，是一張木棉花的logo圖檔，筆者在此就不分享這個圖檔資源了。讀者們可以使用自己想用的圖檔，隻要将自己喜歡的圖檔粘貼在media目錄下并命名為media1即可。

然後，打開InitialAbilitySlice，将代碼修改為如下：

package com.example.project.slice;

import com.example.project.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

import java.util.Timer;
import java.util.TimerTask;


public class InitialAbilitySlice extends AbilitySlice {   //繼承AbilitySlice



    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_initial);  //将此頁面的UI資源與initial.xml檔案綁定

        TimerTask task = new TimerTask() {      //定義一個計時器任務
            @Override
            public void run() {

                present(new MainAbilitySlice(),new Intent());   //設定一個任務——将頁面導航到MainAbilitySlice
            }
        };
        Timer timer = new Timer();    //建立新的計時器對象
        timer.schedule(task, 3000);    //将任務的執行時間設定為3秒後


    }



    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    protected void onBackground() {   //AbilitySlice的背景态
        super.onBackground();
        terminate();   //頁面進入背景後啟動頁面銷毀，減少記憶體占用
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }


}

在InitialAbilitySlice中，我們先是讓InitialAbilitySlice繼承AbilitySlice類，并寫入相應的回調函數，之後在onStart中寫入了TimerTask與Timer。這個代碼的原理是——調用系統的計時器并設定3秒的時間間隔，當計時器走完這個時間間隔後，系統便執行相應的任務——從InitialAbilitySlice導航至MainAbilitySlice（即從歡迎頁面導航至主界面）。

最後，打開entry>src>main>Java>com.example.project>MainAbility，将代碼修改為如下：

package com.example.project;

import com.example.project.slice.InitialAbilitySlice;   //導入InitialAbilitySlice的類

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;


public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(InitialAbilitySlice.class.getName());   //将預設顯示的首頁面由MainAbilitySlice改為InitialAbilitySlice
    }
}

此操作的目的是把應用預設顯示的頁面由MainAbilitySlice改為InitialAbilitySlice。這樣之後，打開應用時我們将看到的第一個頁面就是InitialAbilitySlice（歡迎頁面）了。

打開支援API6的手機模拟器，即可檢視緩沖頁面的效果。

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

應用的全屏化與修改應用的圖示和标簽

毋庸置疑，設計應用項目最基礎的就是修改應用的圖示和标簽，以便展示應用的簡單基本資訊。

打開entry>src>main>resource>zh.element>string.json，将字元串”entry_MainAbility”的value值改為“數獨”（這個字元串顯示的資訊就是應用的标簽資訊）；

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

接着，将如下圖檔放置在media目錄中，并命名為img.png：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

然後，打開config.json檔案，下滑找到“icon”，并将其内容改為"$media:img"，效果圖如下：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

打開手機模拟器，并将模拟機的頁面切換到桌面，我們就能看到改動後的應用圖示與标簽：

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

最後，我們需要實作全屏化，也就是把圖中那個黑框框去掉；

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

打開config.json檔案，下滑到檔案底部，并将代碼修改為如下:

......
 "launchType": "standard"
      }
    ],
    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
          "extra": ""
        }
      ]
    }
  }
}

完成這部操作後，應用的頁面便可實作全屏化，讀者可以打來模拟機檢視效果。

結尾

本期的内容就先分享到這裡，更多關于數獨小遊戲項目精彩的内容我将在下期繼續為大家揭曉。

【木棉花】#夏日挑戰賽# 鴻蒙小遊戲項目——數獨Sudoku（1）

​​想了解更多關于開源的内容，請通路：​​

​​51CTO 開源基礎軟體社群​​

​​https://ost.51cto.com/#bkwz​​

木棉花 鴻蒙
上一篇: #DAYU200體驗官# 起司播客App主題
下一篇: #夏日挑戰賽#初識OpenHarmony藍牙子產品1. 簡介2. 基礎知識3. 源碼分析4. 藍牙接口說明5. 藍牙部分業務應用場景

繼續閱讀