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

发布于 2022-7-5 18:06
浏览
2收藏

  「本文正在参加星光计划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)-开源基础软件社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-7 16:11:23修改
6
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐