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

スクリーンショット 2020-10-28 1.40.44.png

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

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. スクリーンショット 2020-10-28 1.42.26.png

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. スクリーンショット 2020-10-28 9.00.30.png

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.

Recommended Posts

iOS app development: Timer app (2. Timer display)
iOS app development: Timer app (summary)
iOS app development: Timer app (4. Countdown implementation)
iOS app development: Timer app (1. Timer time setting)
iOS app development: Timer app (10. Create animation)
iOS app development: Timer app (6. Creation of setting screen)
iOS app development: Timer app (8. Implementation of progress bar)
iOS app development: Timer app (3. Start / Stop button, Reset button)
iOS app development: Timer app (7. Implementation of alarm sound selection)
iOS app development: Timer app (5. Implementation of alarm and vibration)
Complete self-study IOS app development diary
iOS App Development Skill Roadmap (Introduction)
iOS app development: Timer app (9. Customize the color of the progress bar)
iOS engineer starts Android development
Android app personal development kickoff
ROS app development on Android
Error Treatment Techniques Hit in iOS App Development ~ Xcode Edition ~
ATDD development on iOS (basic)
NoCode Glide's first app development
Creating a timer app with a muddy
Trial and error to display national holidays in Android app development. Part 2