New-Bullseye

Posted on
Words count in article: 5.3k | Reading time ≈ 23

New-Bullseye

之前我写过一片博客来搭建一个很简单的 Bullseye游戏。但是由于XCode版本更新的缘故，现在我们再重新创建一个Bullseye。重复的语法问题我们就不再做探讨了，我们现在着重来学习一下软件架构的建立、软件的单元测试，以及软件界面的再优化。

因为之前已经写过这个游戏了，因此我们直接从基本功能都已实现开始学习。

Intro to App Architecture

之前我们的这个游戏的代码都放在一个ContentView.swift的文件里，导致代码很多，可读性极差。因此规划一下代码的组织架构是很必要的。

首先，ContentView Struct只是负责内容呈现，不负责游戏性。然后创建一个新的结构叫做 Game ,用来实现随机目标、轮次、计算分数这些功能。

我们要知道一个实例的背后是一个struct模型。比如说ContentView就是View的一个实例。而要创建一个Game结构，也需要一个对应的Model。这个关系就好比是java中的object与class的关系。

架构清楚明了之后，对于代码的维护、测试都会比较方便。

因此我们要创建一些group(文件夹)： Model用来存放模型，Views用来存放实例，App则存放app文件。

需要注意的是，在将info.plist 移到App中去之后，我们需要到 Bullseye的Build Settings中修改其路径。否则会报错。

Create a Model

现在我们来创建 Game Model：这个Model现在很简单，只有3个变量，之后可以向里面添加一些方法 

1
2
3
4
5
6
7
8
9
10
11
import Foundation

struct Game {
    var target: Int = 42
    var score: Int = 0
    var round: Int = 1
  
    func points(sliderValue: Int) -> Int {
        return 999
    }
}

那么怎么在ContentView中创建这个模型的实例呢？

很简单：@State private var game : Game = Game()

然后，当需要引用Game中的成员变量时，可以这么写：Text(String(game.target))

当需要引用 Game中的方法时，可以这么写：Text("You scored\(self.game.points(sliderValue: roundedValue)) points this round.")

都是用 . 来引用变量或方法。

Intro to Unit Testing

众所周知，一个app要上线肯定是要经过无数次测试的。有些是手动测试，就是把app装到自己的手机里然后运行找bug，还有一种叫做unit testing，就是让我们用测试代码来检查另一部分代码。

写一个测试文件需要有以下几步：

  1. Create Test Case
1
2
3
class YourTestCaseName : XCTestCase {

}
  1. Add Set Up / Tear Down

对于每一个Case我们都要设计两个方法，一个是Set up,也就是为测试做一些准备，Tear down则是在测试结束之后要做的事情。

1
2
3
4
5
6
7
8
9
class YourTestCase Name : XCTestCase{
	override func setUpWithError() throws {
		//Your Code Here
	}
	
	override func tearDownWithError() throws {
		//Your Code Here
	}
}
  1. Add Tests

最后一步就是正式写测试了

1
2
3
4
5
6
7
8
9
10
11
12
13
class YourTestCase Name : XCTestCase{
	override func setUpWithError() throws {
		//Your Code Here
	}
	
	override func tearDownWithError() throws {
		//Your Code Here
	}
	
	func yourTestName() throws {
		//Your Code Here
	}
}
  1. Add Asserts

在我们写自己的测试代码的时候，同时也需要用到XCode中的内置方法，用来显示测试结果与理想结果之间的对比。这些方法就叫Asserts

1
2
3
4
XCTAssertTrue
XCTAssertEqual
XCTAssertGreatThan
....

现在我们来给Bullseye写测试程序。首先创建单元测试文件：

然后我们来写这个文件 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import XCTest
@testable import Bullseye

class BullseyeTests: XCTestCase {

    var game : Game!
    
    override func setUpWithError() throws {
        game = Game()
    }

    override func tearDownWithError() throws {
        game =  nil
    }

    func testExample() throws {
        XCTAssertEqual(game.points(sliderValue: 50),999)
    }   
}

我们的目标就是，输入50以后，得到的值为999.

可以直接在测试菜单中点击右边的运行来执行测试文件，也可以上拉Product菜单-Test执行

测试成功的表现

测试失败的结果

Intro to Test Driven Development

现在我们来介绍一种测试驱动开发的策略。也就是我们先写测试再写代码。

这样做有什么好处呢？

  1. 它能强迫我们在开发的前期认真思考
  2. 能保证我们不会漏掉测试
  3. 能提升代码质量
  4. 能提高开发速率

比如说我要实现一个计算分数的功能，要写一个points方法。那么我就可以先写几个这个方法的测试

1
2
3
4
5
6
7
8
9
10
11
func testScorePositive(){
    let guess = game.target+5;
    let score = game.points(sliderValue: guess)
    XCTAssertEqual(score, 95)
}

func testScoreNegative(){
    let guess = game.target-5;
    let score = game.points(sliderValue: guess)
    XCTAssertEqual(score, 95)
}

现在运行肯定是错的，但是我们可以根据我们的测试要求来实现我们的方法: 

1
2
3
4
5
6
7
8
func points(sliderValue: Int) -> Int {
   var difference: Int = self.target - sliderValue
   if difference < 0 {
       difference = difference * -1
   }
   var awardedPoints : Int = 100 - difference
   return awardedPoints
 }

写好方法以后我们就能根据测试来调整代码并最后通过测试。

Polishing The App

Dark Mode

现在的手机、电脑都有深色模式，那么可不可以让我们的游戏也搞一个深色模式呢？首先我们要搞一张深色模式的背景。我们到Assets文件中创建背景颜色。然后将Appearance从Any改成Any,Dark。并设置Dark Appearance的颜色。

接着我们到ContentView.swift中，在预览模式中多添加几个ContentView()

我这边添加了4个，分别是竖版白天模式，横版白天模式；竖版黑夜模式，横版黑夜模式。

1
2
3
4
5
6
7
8
9
10
11
12
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
    ContentView()
        .previewLayout(.fixed(width: 568, height: 320))
    ContentView()
        .preferredColorScheme(.dark)
    ContentView()
        .previewLayout(.fixed(width: 568, height: 320))
        .preferredColorScheme(.dark)
  }
}

Challenge- Colors and Dark Mode

我们接下来要给字体不同的颜色。因为在明亮模式下我们不希望字是全黑的(黑色背景为#191919)

然后给需要的字体设置foregroundColor(Color("TextColor"))属性即可

Extract Views

还是回到代码重构的问题上来，虽然我们把一部分代码分给了 Game Struct，但是 ContentView上还是有很长的代码。不过，Xcode给我们提供了很多重构工具。

比如说，我们可以把 target 数字抽象出来，成为一个View类型的实例。如下：

现在我们来实操一下。首先创建一个TextViews.swift文件，用来专门存放对文本的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
struct InstructionText: View {
    var text: String
    var body: some View {
        Text(text.uppercased())
          .bold()
          .kerning(2.0)
          .multilineTextAlignment(.center)
          .lineSpacing(4.0)
          .font(.footnote)
          .foregroundColor(Color("TextColor"))
    }
}

struct BigNumberText: View {
    var target: String
    var body: some View {
        Text(target)
          .kerning(-1.0)
          .font(.largeTitle)
          .fontWeight(.black)
          .foregroundColor(Color("TextColor"))
    }
}

在设置字体大小的时候我们用到了.font(.footnote) 这边的.footnote其实对应了一种大小。我们可以在这个网站找到字体大小以及与其对应的名字。

然后，我们在ContentView中可以直接调用这些结构。需要注意的是，在结构中我们定义了成员变量，因此在调用的时候需要传入需要被渲染的文本。如下：

1
2
3
4
5
6
7
VStack {
       InstructionText(text: "🎯🎯🎯\nPut the Bullseye as close as you can to")
           .padding(.leading, 30.0)
           .padding(.trailing, 30.0)
       BigNumberText(target:String(game.target))
       //...
}

但是这样我们仍然觉得不够结构化。我们还可以将这一部分抽象出来组成一个struct

1
2
3
4
5
6
7
8
9
10
11
struct InstructionView: View{
  	@Binding var game : Game //这边要定义一个Game类型的game，用来和传入的实例绑定
    var body: some View{
        VStack{
            InstructionText(text: "🎯🎯🎯\nPut the Bullseye as close as you can to")
                .padding(.leading, 30.0)
                .padding(.trailing, 30.0)
            BigNumberText(target:String(game.target))
        }
    }
}

这里要注意了，因为我们引用了game.target,而game是在ContentView这个结构中定义的。因此我们要利用绑定的技巧，向该结构传入一个 Game()实例。

1
2
3
4
 VStack {
        InstructionView(game: $game)
        //...
}

同理，我们对slider以及button也做这样的重构。最终结构如下，ContentView瘦身巨大。整个代码的结构看起来也十分整洁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

struct ContentView: View {

  @State private var alertIsVisible = false
  @State private var sliderValue = 50.0
  @State private var game = Game()

  var body: some View {
    ZStack {
        Color("BackgroundColor")
        .edgesIgnoringSafeArea(.all)
      VStack {
        InstructionView(game: $game)
        SliderView(sliderValue: $sliderValue)
        HitMeButton(game: $game, alertIsVisible: $alertIsVisible, sliderValue: $sliderValue)
      }
    }
  }
}


struct InstructionView: View{
    @Binding var game : Game
    var body: some View{
        VStack{
            InstructionText(text: "🎯🎯🎯\nPut the Bullseye as close as you can to")
                .padding(.leading, 30.0)
                .padding(.trailing, 30.0)
            BigNumberText(target:String(game.target))
        }
    }
}

struct SliderView: View{
    @Binding var sliderValue : Double
    var body: some View{
        HStack{
            SliderLabelText(target: "1")
            Slider(value: $sliderValue, in: 1.0...100.0)
            SliderLabelText(target: "100")
                .padding()
        }
    }
}

struct HitMeButton: View{
    @Binding var game : Game
    @Binding var alertIsVisible : Bool
    @Binding var sliderValue : Double
    var body: some View{
        VStack{
            Button(action: {
              print("Hello, SwiftUI!")
              alertIsVisible = true
            }) {
              Text("Hit me".uppercased())
                .bold()
                .font(.title3)
            }
              .padding(20.0)
              .background(
                ZStack {
                  Color("ButtonColor")
                  LinearGradient(gradient: Gradient(colors: [Color.white.opacity(0.3), Color.clear]), startPoint: .top, endPoint: .bottom)
                }
              )
              .foregroundColor(Color.white)
              .cornerRadius(21.0)
              .alert(isPresented: $alertIsVisible, content: {
                let roundedValue = Int(sliderValue.rounded())
                return Alert(title: Text("Hello there!"),
                             message: Text("The slider's value is \(roundedValue).\n" + 
                                           "You scored \(game.points(sliderValue: roundedValue)) points this round."), 
                             dismissButton: .default(Text("Awesome!")))
              })
        }
    }
}
//....

Fill and Stroke Shapes

现在我们来学习关于形状的知识——如何画形状？如何对边框进行操作？

fill

fill顾名思义就是填充的意思。比如下面这段代码，用fill可以将圆形填充为蓝色

1
2
3
4
5
6
7
8
9
10
struct Shapes: View {
    var body: some View {
        VStack{
            Circle()
                .fill(Color.blue)
                .frame(width: 200, height: 100)
        }
        .background(Color.green)
    }
}

stroke

和fill不一样, storke是设置边线的样式。比如说这里我设置了变线的颜色和宽度。

1
2
3
4
5
6
VStack{
            Circle()
                .stroke(Color.blue,lineWidth: 20)
                .frame(width: 200, height: 100)
        }
        .background(Color.green)

但是这个边框很丑，长出去了一截，我们可以通过两种方法让其缩回去

  1. .inset(by: 10.0) ，因为边框长20，中点是刚好在框架上的.那么就可以让这个圈缩回去10，就刚好在边框里面了
  2. 直接用另一个方法.strokeBorder(Color.blue,lineWidth:20.0) 这个方法中不管设置宽为多少，圆始终在边框里

other shape

除了单纯的圆形，还有圆角矩形，椭圆形，胶囊形等形状。

HitButton边框

我们想给Hit Button设计一个白色的边框，以让其在黑色背景下更为突出。可以再按钮的样式中写：

1
2
3
4
5
6
.foregroundColor(Color.white)
.cornerRadius(21.0)
.overlay(
  RoundedRectangle(cornerRadius: 21.0)
      .strokeBorder(Color.white ,lineWidth: 2.0)
)

这个overlay方法，就是在原有的元素上添加样式。这里我添加了一个白色，宽度为2.0的边框线。效果如下：

SF Symbols

现在我希望在app的顶部放置两个按钮，如下图所示：

左边的按钮代表重新开始，右边的是关于游戏的介绍。这两个按钮在白昼模式和黑夜模式下式不一样的。

那么这种小图标去哪里找呢？Apple为我们提供了很多实用美观的图标，我们可以拿来直接用。我们可以到SF Symbols官网 上去下载app，现在已经出到第三版了。

当我们想用的时候，只需要这样就可以了：Image("square.and.arrow.up.fill") 就可以显示了。

我这里选中的两个图标是： arrow.counterclockwise 和 list.dash

接着，我们创建一个RoundViews.swift的文件，用来存放不同类型的图标：

为了实现图标的样式，我们需要3中特定的颜色：边线颜色、背景填充情况下背景的颜色、背景填充情况下的图标颜色。

ButtonStrokeColor: 浅色背景为淡蓝色，深色背景为白色

ButtonFilledBackgroundColor: 浅色背景为黑色，深色背景为白色

ButtonFilledTextColor: 浅色背景为白色，深色背景为黑色

比如说，下面是一个没有背景的图标样式(浅色模式下使用的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

struct RoundedImageStroked: View {
    var systemName: String
    
    var body: some View {
        Image(systemName: systemName)
            .font(.title)
            .foregroundColor(Color("TextColor"))//设置前景颜色(字体颜色)
            .frame(width: 56.0, height: 56.0)
      			// 设置覆盖元素，是一个环
            .overlay(
                Circle()
                    .strokeBorder(Color("ButtonStrokeColor"),lineWidth: 2.0)
            )
    }
}

struct RoundedImageViewFilled: View {
    var systemName: String
    
    var body: some View {
        Image(systemName: systemName)
            .font(.title)
      		// 设置字体颜色
            .foregroundColor(Color("ButtonFilledTextColor"))
            .frame(width: 56.0, height: 56.0)
      		// 设置背景
            .background(
                Circle()
                    .fill(Color("ButtonFilledBackgroundColor"))
            )
    }
}

struct PreviewView:View {
    var body: some View {
        VStack{
            RoundedImageStroked(systemName: "arrow.counterclockwise")
            RoundedImageStroked(systemName: "list.dash")
            RoundedImageViewFilled(systemName: "arrow.counterclockwise")
            RoundedImageViewFilled(systemName: "list.dash")
        }
    }
    
}

Put it All Together

现在我们来设计一个 BackgroundView 用来存放背景、上面写的按钮以及底部的分数、轮次信息。效果如图所示：

为了实现下面这行现实的内容(Score,Round),我们需要再写两个struct：

  • TextViews:
1
2
3
4
5
6
7
8
9
10
struct LabelText: View {
    var title : String
    var body: some View{
        Text(String(title))
            .bold()
            .font(.caption)
            .kerning(1.5)
            .foregroundColor(Color("TextColor"))
    }
}
  • RoundViews
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
struct RoundedRectTextView: View {
    var systemName: String
    var body: some View {
        Text(String(systemName))
            .font(.title3)
            .bold()
            .foregroundColor(Color("TextColor"))
            .frame(width: 68.0, height: 56.0)
            .overlay(
                RoundedRectangle(cornerRadius: 21.0)
                    .strokeBorder(Color("ButtonStrokeColor"),lineWidth: 2.0)
                    .foregroundColor(Color("ButtonStrokeColor"))
            )
    }
}

最后在background中将它们都联合起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import SwiftUI

struct BackgroundView: View {
    @Binding var game : Game
    
    var body: some View {
        VStack{
            TopView(game: $game)
            Spacer()
            BottomView(game: $game)
        }
        .padding()
        .background(
            Color("BackgroundColor")
                .edgesIgnoringSafeArea(.all)
        )
    }
}
struct TopView: View {
    @Binding var game : Game
    
    var body: some View {
        HStack{
            RoundedImageStroked(systemName: "arrow.counterclockwise")
            Spacer()
            RoundedImageViewFilled(systemName: "list.dash")
        }
    }
}
struct NumberView: View {
    var title : String
    var text : String
    
    var body: some View {
        VStack{
            LabelText(title: title)
            RoundedRectTextView(systemName: text)
        }
    }
}

struct BottomView: View {
    @Binding var game : Game
    
    var body: some View {
        HStack{
            NumberView(title: "Score", text: String(game.score))
            Spacer()
            NumberView(title: "Round", text: String(game.round))
            
        }
    }
}



struct BackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        BackgroundView(game: .constant(Game()))
    }
}

A Custom Alert

现在我们已经实现了计算分数(包括Bonus)、Start Over按钮的功能，我们再来美化一下背景，以及美化一下弹出窗口。效果如下：

Draw the Rings

那么背景的圆环怎么画呢？

我们可以用ForEach语句来实现。

首先来说说 ForEach ，其格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
let numberWords = ["one", "two", "three"]
for word in numberWords {
    print(word)
}
// Prints "one"
// Prints "two"
// Prints "three"

numberWords.forEach { word in
    print(word)
}
// Same as above

我们想要的一系列圆环是呈同心圆分布的，且中间到外围越来越透明。要达到这种渐变的效果，有两种方法：

这里我们使用辐射型渐变，从100开始向外辐射到500未知。

Todo List：

  • Create a color in the Asset Catalogue
  • Apply a fill modifier to your circle shape
  • Put a radial gradient inside the fill modifier
  • Start Color: The color you set up ,but with opacity = 0.8 * 3
  • End Color: The color you set up, but with opacity = 0
  • Start Radius = 100 ; End Radius = 300
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
struct RingsView: View {
    var body: some View {
        ZStack{
            Color("BackgroundColor")
                    .edgesIgnoringSafeArea(.all)
            ForEach(1..<5) { ring in
                // 一共五个换，从100直径开始，到500直径结束
                //CGFloat是浮点值的基本类型,更加精确。这样就可以放在frame里面
                let size  =  Float(ring * 100)
                Circle()
                    .stroke(lineWidth: 20.0)
                    .fill(
                        RadialGradient(gradient: Gradient(colors:  [Color("RingsColor").opacity(0.3*0.8), Color("RingsColor").opacity(0)]), 
                                       // 上面是设置渐变色段，我们这是同一个颜色的渐变。
                                       center: .center, 
                                       startRadius: 100, 
                                       endRadius: 300)
                    )
                    .frame(width: size, height: size)
            }
        }
    }
}

Environment Property Wrapper

我们看白昼模式下好像还挺正常的，但是一旦到了黑暗模式下，画风就变得很奇怪：

很显然，这是因为在黑暗模式下，我们不可以将透明度设置成0.3那么高，一般0.1就足够了。那么怎么适配呢？这就需要用到 Environment Property Wrapper 了。

如果一个属性被@Environment 属性包装器修饰了，那么我们就可以通过这个属性来获得当前环境的一些信息。

比如说我定义了：@Environment(\.colorScheme) var colorScheme

那么，现在的colorScheme就能反映出当前环境信息。

于是，我们就可以定义一个opacity变量，若是白昼模式则设其为0.3,黑夜模式则设为0.1

1
let opacity = colorScheme == .dark ? 0.1 : 0.3

这里我们采用了调减运算符来定义透明度 。结果如下：

Center the Slider

虽然现在看起来已经有模有样了，但是现在有一个大无语事件就是这个滑动条的中心好像没有位于圆圈的中心。怎么修改呢？

我们可以将原来放在 ContentView-VStack 中的slider移动到ZStack中。因为放在ZStack中的组件会默认放在整个页面的居中位置。

然后，由于放到ZStack之后，Instruction和HitME Button之间的空隙就变短了，因此我们还需要在里面加上一些间距。

1
2
3
4
5
6
7
8
9
10
11
12
var body: some View {
    ZStack {
        BackgroundView(game: $game)
      VStack {
        InstructionView(game: $game)
            .padding(.bottom,100)
        HitMeButton(game: $game, alertIsVisible: $alertIsVisible, sliderValue: $sliderValue)
      }
        SliderView(sliderValue: $sliderValue)
    }
  }
}

Challenge- More Text Styles

现在我们为这个提示设计更多的文本样式：

这个弹出式窗口一共有四种文本样式。前两种都是现成可以拿来使用的，后面两种需要我们创建一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
struct AlertBodyText: View {
    var title : String
    var body: some View{
        Text(String(title))
            .font(.subheadline)
            .fontWeight(.semibold)
            .multilineTextAlignment(.center)
            .lineSpacing(10.0)
    }
}

struct AlertButtonText: View {
    var title : String
    var body: some View{
        Text(String(title))
            .bold()
            .padding()
            .font(.callout)
            .foregroundColor(.white)
            .frame(maxWidth:.infinity)//这边我们令宽度为整个屏幕的宽度。边距另外再加
            .background(Color.accentColor)
            .cornerRadius(12.0)
    }
}

Display a Custom Alert

答案：

1
2
3
4
5
6
7
8
9
10
11
VStack{
           InstructionText(text: "THE SLIDER'S VALUE IS")
           BigNumberText(target: "50")
           AlertBodyText(title: "You Scored 82 Points\n🎉🎉🎉")
           AlertButtonText(title: "Start New Round")
       }
       .padding()
       .frame(maxWidth:300)
       .background(Color("BackgroundColor"))
       .cornerRadius(21.0)
       .shadow(radius: 10, x: 5,y: 5)

我自己写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
VStack{
          InstructionText(text: "THE SLIDER'S VALUE IS")
          BigNumberText(target: "50")
          AlertBodyText(title: "You Scored 82 Points\n🎉🎉🎉")
          AlertButtonText(title: "Start New Round")
      }
      .padding()
      .frame(width: 350, height: 220, alignment: .center)
      .background(
          RoundedRectangle(cornerRadius: 25.0)
              .fill(Color("BackgroundColor"))
              .shadow(radius: 20)
      )

其实效果是差不多的，但是我们如果不做图标的话，没必要用一个RoundedRectangle区表示边角弧度，而可以直接用.cornerRadius() 来设置边角弧度。

那怎么呈现这个Alert呢？首先要把原来的默认Alert去掉。然后做一个 if-else case。如果当前flag为真，那么就显示刚才写好的PointsView, 同时隐藏掉移动条和点击按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ZStack {
    BackgroundView(game: $game)
  VStack {
    InstructionView(game: $game)
        .padding(.bottom,alertIsVisible ? 0 : 100)
    if  alertIsVisible{
        PointsView()
    }else{
        HitMeButton(game: $game, alertIsVisible: $alertIsVisible, sliderValue: $sliderValue)
    }
  }
    if(!alertIsVisible){
        SliderView(sliderValue: $sliderValue)
    }
}

但是现在这个button的按钮功能还没有显示出来。同样的得到的分数也没有渲染上去。完整的结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
struct PointsView: View {
    @Binding var game : Game
    @Binding var alertIsVisible : Bool
    @Binding var sliderValue : Double
    
    var body: some View {
        let rounded = Int(sliderValue.rounded())
        let points = game.points(sliderValue: roundedValue)
        VStack{
            InstructionText(text: "THE SLIDER'S VALUE IS")
            BigNumberText(target: "\(roundedValue)")
            AlertBodyText(title: "You Scored \(points) Points\n🎉🎉🎉")
            Button(action: {
                alertIsVisible = false
                game.startNewRound(points:points)
            }, label: {
                AlertButtonText(title: "Start New Round")
            })
        }
        .padding()
        .frame(width: 350, height: 220, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
        .background(
            RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/)
                .fill(Color("BackgroundColor"))
                .shadow(radius: 20)
        )
        
    }
}

Intro to SwiftUI Animation

但是iOS的特点是动画流畅 ，我们现在的弹出窗口非常生硬，那么怎么做的更流畅一点呢？

我们要做的就是设计一些动画。SwiftUI中，设计动画是很简单的。我们先拿Shapes结构练练手：

首先我们创建一个@State修饰的变量用来启动动画@State private var wideShapes = true

我们的设计思路是：当我点击按钮Animate的时候，形状由宽到窄，再按一下恢复。同时原本的环形会以动画的形式消失。我们要做的只是在wideShapes不同时设置两个不同尺寸的形状，然后用withAnimation() 将点击后的形变用动画联系起来即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 			
if !wideShapes {
            Circle()
                .strokeBorder(Color.blue, lineWidth: 20.0)
                .frame(width: 200, height: 100.0)
  // 透明淡出，此外还有.slide(滑出)
                .transition(.opacity)
        }
      RoundedRectangle(cornerRadius: 20.0)
        .fill(Color.blue)
        .frame(width: wideShapes ? 200 : 100, height: 100.0)
      Capsule()
        .fill(Color.blue)
        .frame(width: wideShapes ? 200 : 100, height: 100.0)
      Ellipse()
        .fill(Color.blue)
        .frame(width: wideShapes ? 200 : 100, height: 100.0)
        Button(action: {
            withAnimation{
                wideShapes.toggle()//即取反
            }
        }, label: {
            Text("Animate")
        })

现在我们为自定义的alert动画，逻辑如下图所示：

首先要将两个按钮(Hit Me和Start New Round) 设置为withAnimation

然后给几个View都加上动画：PointsView、HitMeButton、SliderView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 var body: some View {
    ZStack {
      BackgroundView(game: $game)
      VStack {
        InstructionsView(game: $game)
          .padding(.bottom, alertIsVisible ? 0 : 100)
        if alertIsVisible {
          PointsView(alertIsVisible: $alertIsVisible, sliderValue: $sliderValue, game: $game)
            .transition(.scale)
        } else {
          HitMeButton(alertIsVisible: $alertIsVisible, sliderValue: $sliderValue, game: $game)
            .transition(.scale)
        }
      }
      if !alertIsVisible {
        SliderView(sliderValue: $sliderValue)
          .transition(.scale)
      }
    }
  }
}

Avoid Magic Numbers

我们在编程的过程中，有些数字是要重复使用的。比如说按钮的宽为56.0，按钮的边角弧度为21.0，这样不但难记而且显得很hard coding 因此，我们可以创建一个文件来将它们固定下来。

我们在Models中创建一个文件，用枚举结构来存放这些常量：

1
2
3
4
5
6
7
8
9
10
11
12
import Foundation
import UIKit

enum Constants {
    enum General {
        public static let strokeWidth = CGFloat(2.0)
        public static let roundedViewLength = CGFloat(56.0)
        public static let roundRectViewWidth = CGFloat(68.0)
        public static let roundRectViewHeight = CGFloat(56.0)
        public static let roundRectCornerRadius = CGFloat(21.0)
    }
}

需引用时，只要 Constants.General.XXX 即可

Intro to Xcode Shortcuts

快捷键 功能
Command+B Build your app
Command+R Run your app
Command+U Unit test your app
Option+Command+p Preview your app in SwiftUI Canvas
Option+Command+[ Move a line of code up
Option+Command+] Move a line of code down
Option+Command+0 打开/关闭 右侧栏
Command+0 打开/关闭 左侧栏
Shift+Command+O 快速定位/ 类似VSCode中的comman+p
Command+ ,(逗号) 打开preference

A Second Screen

Challenge- Create a Leaderboard View

这个部分我们要做一个新的页面，叫做Leaderboard View，里面是一个记录着最高记录的列表。

设计思维： 首先我们要实现一个小组件，也就是分数栏。这一行可以通过HStack来实现。然后通过VStack将分数栏叠放。

Intro to Size Classes

Display a Second Screen

Intro to Swift Arrays

Challenge- Leaderboard Data Model

Connect the Leaderboard

-------------本文结束，感谢您的阅读-------------