【木棉花】#夏日挑战赛# 鸿蒙小游戏项目——数独Sudoku（1） 原创 精华

  「本文正在参加星光计划3.0--夏日挑战赛」

前言

   小伙伴们，木棉花又更新了！

   在序言的内容中，笔者向大家展示了数独小游戏项目的效果图。而从这一期开始，我将把此项目的设计思路与相关代码逐期分享给大家，希望能给学鸿蒙的小伙伴们提供帮助与灵感。

  序言内容的传送门——>> https://ost.51cto.com/posts/12863

正文

在本期的分享中，笔者将介绍如何搭建基础的页面框架（为之后的开发做准备），以及应用图像和标签的修改、应用的全屏化。

 

 创建新的项目

 打开DevEco Studio，创建一个新的Empty Ability，将其命名为project，相关勾选如下：（Device type至少要勾选phone选项）

创建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。

   

完成后的效果图如下：

经过这些操作后，我们就成功创建了6个空白页面。加上项目自带的MainAbilitySlice，这个项目一共由七个页面组成，在之后的内容中，我们会在每个AbilitySlice中写入不同的功能，并且创建页面与页面之间的跳转路由。这7个页面之间的页面路由的概念图如下：

当然，这张图看起来很抽象，而这些页面的具体逻辑关系笔者将在后文详细阐述。

设计主页面（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:

创建完成后，打开这个新建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组件中被引用：

接着，打开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，便可查看效果

当然，读者们也可以随心所欲地设计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文件，因为此操作的难度相对较小）；

接着，打开刚刚得到的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的手机模拟器，即可查看缓冲页面的效果。

应用的全屏化与修改应用的图标和标签

毋庸置疑，设计应用项目最基础的就是修改应用的图标和标签，以便展示应用的简单基本信息。

 

打开entry>src>main>resource>zh.element>string.json，将字符串”entry_MainAbility”的value值改为“数独”（这个字符串显示的信息就是应用的标签信息）；

接着，将如下图片放置在media目录中，并命名为img.png：

然后，打开config.json文件，下滑找到“icon”，并将其内容改为"$media:img"，效果图如下：

打开手机模拟器，并将模拟机的页面切换到桌面，我们就能看到改动后的应用图标与标签：

最后，我们需要实现全屏化，也就是把图中那个黑框框去掉；

打开config.json文件，下滑到文件底部，并将代码修改为如下:

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

完成这部操作后，应用的页面便可实现全屏化，读者可以打来模拟机查看效果。

结尾

本期的内容就先分享到这里，更多关于数独小游戏项目精彩的内容我将在下期继续为大家揭晓。