项目布景

最近因为疫情空闲在家,在浏览网络信息的时分发现一款“电子木鱼App”悄然爆红网络。无需购买实体的木鱼,只需求下载App,经过不断点击App按钮,即可完结“自我救赎”,乃至还有不同的敲击声响能够挑选。在饶有兴趣地查阅相关文章后,不仅觉得“有点意思”,莫非这是释教在做数字化转型?

一笑而过后,当静下来却心里有些慨叹。

想起儿时也曾想遁入空门不理世事,做一个和尚追求心中的崇奉,过简单朴素的日子。而现在在社会营生,敷衍复杂人性,每天拖着疲惫的身体经常深夜回家,这真的是我想要的吗?

慨叹之后,想想“电子木鱼”这个事例也挺有意思,不如也测验做下教程,也算是一种另类的解压。

项目剖析

首要咱们来先行剖析“电子木鱼”App的功能点,如下图所示:

电子木鱼主要功能点为点击木鱼本体宣布敲击声响,每逢敲击一下,在界面大将出现“积德行善+1”的字样,且顶部计算敲击的次数。再深入些,咱们还能够支持自定义提示文字,比方“开心+1”、“财富+1”等等提示文字。

全体项目莫非不大,下面咱们来一步一步完结它。

项目预备

首要创立一个新的SwiftUI项目,命名为DigitalWoodfish。如下图所示:

在ContentView文件中,挑选模拟器预览示例代码作用,如下图所示:

然后,咱们需求导入一张“木鱼”的图片作为项目的资料,在Assets文件中,咱们拖入一张网络上下载的木鱼图片。

为了更好的出现作用,建议下载的图片布景色彩为通明,因为笔者运用的是iphone,在新版的iOS中能够提取图片中的元素出来,很简单就取得了一张没有布景色彩的图片,能够运用此办法取得项目资料。

资料整理好后,拖入到Assets文件中,如下图所示:

回到ContentView文件中,咱们开端搭建UI样式部分。

敲击主体:电子木鱼

第一步,咱们先搭建木鱼的主体展现部分,能够运用Image图片组件,先删除示例代码中VStack中的代码,然后在顶部工具栏右上角挑选“+”按钮,在Library中,点击Media栏目,能够看到在Assets导入的所有资料。

点击woodfish资料,拖动到VStack代码中,如下图所示:

拖入完结后,咱们就得到了带有woodfish资料的Image组件代码,如下图所示:

因为导入的图片尺度等原因,资料超出了屏幕鸿沟范围,这时分需求对Image图片进行修饰,依旧是点击顶部工具栏右上角“+”按钮,在Library挑选Modifiers修饰符栏目,找到Image的修饰符,挑选Image Resizable图片可调整巨细修饰符,如下图所示:

将Image Resizable图片可调整巨细修饰符加到Image图片上,如此,修饰符便可作用到控件上,如下图所示:

同理为了确保图片尺度不变形,还需求拖入Aspect Ratio调整长宽比修饰符,设置为fit自适应。最终运用Frame尺度框架修饰符调整其巨细。如此,便得到了一个木鱼主体视图。如下代码所示:

Image("woodfish")
	.resizable()
	.aspectRatio(contentMode: .fit)
	.frame(maxWidth: 180, maxHeight: 180)

大家或许注意到了一点,和之前直接运用代码编程的方法不同,本章运用的方法更类似于UI规划方法。是的,在推出SwiftUI之后,苹果这一声明式语言最大的特点就是经过“描绘性语言”来“创立一个事物”。

上述的编程方法中,咱们类似于日常描绘一样,创立了一个图片和描绘这个图片:

  1. 添加一个来自资料库的图片;
  2. 这个图片太大超出鸿沟了,期望它的巨细是能够调整的;
  3. 调整后尺度变形了,期望它能保持本来的宽高比;
  4. 还是有点大/小,期望调整它最大是多大;

完结“木鱼”主体后,为了杰出木鱼本体,能够将整个页面布景设置为黑色,和上述方法共同,能够在Library拖入Views栏目中的Depth Stack仓库视图,并将上述的代码剪切到里边,代码如下:

ZStack {
    VStack {
        Image("woodfish")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(maxWidth: 180, maxHeight: 180)
    }
    .padding()
}

布景色彩部分,能够在Library的Views栏目拖入Color色彩,拖入到ZStack仓库视图中,并设置色彩值为.black黑色。如下图所示:

因为视图安全区域的原因,咱们能够看到App页面上下都留有一片白色的区域。这时为Color色彩设置修饰符,让其疏忽安全区域。

在Library的Modifiers修饰符栏目中挑选Edges Ignoring Safe Area疏忽安全区域,将该修饰符加到Color上,如下代码所示:

ZStack {
    Color(.black)
        .edgesIgnoringSafeArea(.all)
    VStack {
        Image("woodfish")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: 180, maxHeight: 180)
    }
    .padding()
}

标题文字:积德行善值 10086

完结木鱼主体内容后,咱们给这个视图加个标题。在Library的Modifiers修饰符栏目中挑选Navigation Title导航标题,将其加到VStack纵向视图中,如下图所示:

咱们看到并没有出现想要的导航栏标题,这是因为咱们并没有创立导航栏视图,导致在主体视图上添加的修饰符无效。

要是用Navigation相关的修饰符,需求做在全体视图外层包裹一层NavigationView导航视图,在Library的Views栏目中拖入Navigation Stack导航仓库视图,并把ZStack仓库视图的内容剪切在里边,如下图所示:

特别说明:Navigation Stack导航仓库视图是SwiftUI在2022年推出在iOS16版别新增的特性,如果是低版别的设备或许会出现不适用的状况,能够运用NavigationView代替。

完结后咱们发现还是看不到导航标题的内容,这是因为全体布景因为Color色彩和ZStack仓库视图将界面色彩填充为黑色,而Navigation Title导航标题文字色彩为默以为黑色,导致色彩不行见。

这时,能够运用修饰符栏目中的Preferred Color Scheme首选配色计划,将首选配色设置为夜间形式,如此SwiftUI将会将标题由本来的黑色主动转为白色,如下代码所示:

NavigationStack{
    ZStack {
        Color(.black)
            .edgesIgnoringSafeArea(.all)
        VStack {
            Image("woodfish")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 180, maxHeight: 180)
        }
        .padding()
        .navigationTitle("Title")
        .preferredColorScheme(.dark)
    }
}

标题的文字部分,需求展现积德行善总数,并在每次敲击的时分添加总数。除了根底的“积德行善数”之外,还能够设置“静心值”、“开心值”等,因而标题部分需求动态设置文本值。

声明2个参数作为标题的内容,如下代码所示:

@State var gameType:String = "积德行善值"
@State var totalNumber:Int = 10086

上述代码中,gameType为虔诚求取的内容,类型为String字符串类型,示例:积德行善值。totalNumber为总数,统计敲击的次数,因为需求每次 敲击的时分进行累加,因而设置为Int数值类型,示例:10086。

声明参数后,设置Navigation Title导航标题文字内容为声明的变量的组合,如下代码所示:

.navigationTitle(gameType+":"+String(totalNumber))

因为totalNumber总数为Int类型,而Navigation Title导航标题文字内容需求为String字符串类型的文字,因而在运用字符串拼接的时分,需求将Int类型转换为String类型,SwiftUI能够直接运用类型包裹进行类型转换。

提示文字:积德行善值+1

下面咱们来完结敲击动作,每逢咱们敲击/点击木鱼的时分,木鱼会显现提示文字,示例:积德行善值+1。

咱们能够先创立文字部分,在Library的Views栏目中拖入Text文字控件,设置文字内容为“积德行善值+1”,如下代码所示:

Text("积德行善值+1")

提示文字部分,依据文字结构能够拆分为求拜的内容(与gameType保持共同),和敲击时添加的数量。求拜的内容能够直接运用gameType参数,咱们还需求声明每次添加的值的参数,如下代码所示:

@State var number:Int = 1

声明好参数,需调整Text组件展现的文字的内容,如下代码所示:

Text(gameType+"+"+String(number))

交互动画:敲击木鱼

下面来完结敲击木鱼的交互动作,当咱们点击木鱼视图时,Navigation Title导航标题文字的“积德行善值”总数会添加,咱们能够给木鱼主体视图添加一个点击动作。

在Library的Modifiers修饰符栏目中挑选On Tap Gesture点击手势修饰符,将它加到Image控件上。当每次点击时,让totalNumber总积德行善值加上每次点击的number的值,如下代码所示:

.onTapGesture {
	totalNumber += number
}

其中,totalNumber += number相当于totalNumber = totalNumber+number。

如此,在每次点击木鱼的时分,积德行善值总数都会添加。

接下来,咱们给木鱼点击添加交互动作。电子木鱼点击时,每次点击木鱼都会有一个收缩的动画带来点击作用,且提示文字为每次点击时才出现,然后消失。这都给用户发明一种点击的反馈,而动画正是SwiftUI优秀之处。

关于上述的交互动作,咱们能够运用Bool运算逻辑,完结敲击木鱼的时分木鱼缩小,缩小后再康复原状。亦敲击木鱼的时分提示文字出现,然后消失。

首要声明一个Bool类型的变量,如下代码所示:

@State var isTap:Bool = false

然后给Text文字加一个if判别,当isTap为true,即木鱼被点击时才展现Text提示文字,如下代码所示:

if isTap {
	Text(gameType+"+"+String(number))
}

然后给木鱼Image图片添加缩放的修饰符,在Library的Modifiers修饰符栏目中挑选Scale Effect缩放修饰符,添加到Image控件的Frame修饰符之后,如下代码所示:

.scaleEffect(isTap ? 0.99 : 1.0)

Scale Effect缩放修饰符依据isTap的状况,展现缩放比例,因为isTap默认状况为false,因而当isTap为ture时Scale Effect缩放比例为0.99,为false时则默以为1.0。判别条件逻辑说明如下:

参数 ? 为ture时的状况 : 为false时的状况

最终,咱们需求在点击木鱼的时分修正isTap的状况,但修正后还需求主动康复本来的状况。因而咱们能够在切换isTap状况的同时,在主线程执行一个相反的逻辑,以到达康复的作用,如下代码所示:

if !isTap {
	self.isTap.toggle()
	DispatchQueue.main.asyncAfter(deadline: .now()+0.1) {
		self.isTap.toggle()
	}
}

上述代码中,咱们给木鱼Image图片控件点击时间中添加了一个逻辑:当isTap没有被点击的时分,切换isTap的状况,标明,木鱼被点击,木鱼被点击切换isTap状况后,在主线程等候0.1秒后,主动切换isTap状况,康复到木鱼未敲击时的状况。

项目作用预览

Xcode右侧的预览窗口测验点击木鱼看看作用,如下图所示:

iShot_2022-11-09_18.21.18.gif

项目小结

这是一款很风趣的App,玩法简单但不失乐趣,似乎间感受到自身被净化了。其实想了想,这款App之所以能够火起来,或许是现代打工人对自己的自嘲吧,经过发明一些没什么用的,来让这个国际更风趣一些。

以往的项目或许用的最多的是直接编程的形式,记住基本的控件的运用,记住这些控件能运用的修饰符,记住控件能运用的交互动画。似乎,作为一个程序员不老老实实写代码就不算程序员。

SwiftUI供给了一种新式的开发形式,这种声明式语法就好像咱们在“告诉”计算机,咱们要什么东西,以及它应该长成什么样。因而,这次的事例测验从SwiftUI自身出发,以“拖拽组件”的方法出现一种编程方法,期望大家也能有所收成。

别的,电子木鱼App还没有完善,下一章节,咱们将完结敲击时的声响以及更改敲击木鱼祈祷的内容,请保持期待吧。

版权声明

本文为稀土技术社区首发签约文章,14天内制止转载,14天后未获授权制止转载,侵权必究!