2

【木棉花】鸿蒙小游戏项目——数独Sudoku(1)-开源基础软件社区-51CTO.COM

 2 months ago
source link: https://ost.51cto.com/posts/14383
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【木棉花】鸿蒙小游戏项目——数独Sudoku(1) 原创 精华

前言

   小伙伴们,木棉花又更新了!

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

  序言内容的传送门——>> 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)-开源基础软件社区

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK