iOS app development: Timer app (2. Timer display)

Contents

The points for creating a timer app are posted in multiple articles. In this article, I will show you how to display the timer part, which is the main function.

environment

• OS: macOS 10.15.7 (Catalina) --Editor: Xcode 12.1 --Language: Swift --Main library used: SwiftUI

Git repository

You can see the sample code from the URL of the Git repository below. https://github.com/msnsk/Qiita_Timer.git

procedure

1. Create a TimerView
2. Create a MainView
3. Place PickerView and TimerView in MainView

1. Create a TimerView

Create a new file named TimerView.swift and prepare a struct for View with the same name.

TimerView.swift

import SwiftUI

struct TimerView: View {
    var body: some View {
    }
}

Next, prepare the necessary properties. This TimerView also always refers to the value of the Published property of the TimeManager class, so create an instance timeManager of the TimeManager class and add the keyword @EnvironmentObject before var, just like when creating PickerView.

Also, since the size of the text component to be displayed as a timer is specified based on the screen size as in the case of PickerView, the properties to acquire the width and height of the screen are prepared as screenWidth and screenHeight, respectively.

TimerView.swift

struct TimerView: View {
    @EnvironmentObject var timeManager: TimeManager

    let screenWidth = UIScreen.main.bounds.width
    let screenHeight = UIScreen.main.bounds.height

    var body: some View {
    }
}

The return value of the displayTimer method already prepared in the TimeManager class is the display time of the timer.

Since we want to change the character size depending on the time display format, this is also conditional branched with the if statement according to the value of the displayedTimeFormat property already prepared in the TimeManager class.

The font size is specified by screen size x magnification.

TimerView.swift

struct TimerView: View {
    //(Property omitted)
    
    var body: some View {
        //Conditionally branch the character size of the timer according to the time display format of hours, minutes, and seconds
        //The display format is"time"in the case of
        if self.timeManager.displayedTimeFormat == .hr {
            Text(self.timeManager.displayTimer())
                //Font size screen size x 0.Designated as 15
                .font(.system(size: self.screenWidth * 0.15, weight: .thin, design: .monospaced))
                //Just in case, specify the number of lines as one line
                .lineLimit(1)
                //Add default margins
                .padding()
        //The display format is"Minutes"in the case of
        } else if self.timeManager.displayedTimeFormat == .min {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.23, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        //The display format is"Seconds"in the case of
        } else {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.5, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        }
    }
}

See what it looks like on Canvas. Below is the preview code.

struct TimerView_Previews: PreviewProvider {
    static var previews: some View {
        TimerView()
            .environmentObject(TimeManager())
            .previewLayout(.sizeThatFits)
    }
}

The created TimerView should look like the image below if it is Canvas.

2. Create a MainView

Prepare another Swift file named MainView. This View will be the main screen as a countdown timer app.

Again, we always refer to the value of the TimeManager class property, so we'll create an instance of the TimeManager class with the @EnvironmentObject property wrapper in front of var.

MainView.swift

import SwiftUI

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

    var body: some View {
        
    }
}

3. Place PickerView and TimerView in MainView

Here, just add the PickerView and TimerView created earlier in the body. Later, depending on whether the countdown timer is running, which View is displayed is conditional.

MainView.swift

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

    var body: some View {
            PickerView()
            TimerView()
    }
}

Since it has not been described in the conditional if statement yet, both views are displayed overlapping, so it looks like the image below, but this is not a problem for now.

Next time, we'll create properties that show the status of the start, pause, and reset buttons, and timers that change in value when you press those buttons.