#progress view

In SwiftUI Group Boxes can be used to combine related views. It has a predefined styling of a background with rounded corners. The content is automatically placed inside a VStack. In this tutorial a Groupbox is displayed with a label field and one with custom styling. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIGroupBoxTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { @State private var name = "" var body: some View { VStack { // 1. GroupBox(label: Label("Heart rate", systemImage: "heart.fill").font(.largeTitle)) { Text("69 BPM").font(.title) } // 2. GroupBox { Text("Enter your name").font(.title) TextField("name", text: $name) } Spacer() }.padding(.horizontal) } }

The Groupbox has a text label built in, for which the default formatting can be overridden.

The Groupbox can also be used without the prebuilt label to create own custom styling.

Go to the Preview to view the two different GroupBox Views.

A progress view is a view that shows the progress towards completion of a task. In this tutorial a progress view is displayed and where the progress can be incremented with a button. The progress view is introduced with SwiftUI 2.0 and requires Xcode 12, for which the Beta can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIProgressViewTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View { // 1. @State private var progress = 0.0 var body: some View { VStack(spacing: 30) { // 2. ProgressView("Progress", value: progress, total: 100) // 3. Button("Increment Progress") { if progress < 100 { progress += 10 } } // 4. Text("Current Progress: \(Int(progress))%") Spacer() } .padding(.all, 10) } }

A State property is declared which will represent the progress of the task

A progress view is displayed with the current progress, the total represents the completion of the task.

A buton is created which will increment the progress with steps of 10.

A text view is displayed which will contain the current progress.

Go to the Preview and select Live Preview. Increment the progress using the button to update the progress view.

With a progress view the progress of a task can be displayed. In this tutorial we will simulate the progress of a specific task. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSProgressViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard. Drag a button and a label to the main view. Give the button a name of "Start" and the label a name of "0 %". We will dynamically update this label later. Also drag a Progress View to the main view. The main View should look like this.

Select the Assistant Editor. Ctrl-click and drag from the Label to the ViewController class in the ViewController.swift file and create the following outlet

Ctrl-click and drag from the Progress View to the ViewController class in the ViewController.swift file and create the following outlet

Next, Ctrl-click and drag from the start button to the ViewController class and create the following action

Go to ViewController.swift and add the following property

let progress = Progress(totalUnitCount: 10)

The Progress object is used to keep track of the progress. This will be divided into 10 units, since we will update the bar with 10% until it reaches 100%. Next, implement the startCount(_:) method

@IBAction func startCount(sender: UIButton) { // 1 progressView.progress = 0.0 progress.completedUnitCount = 0 // 2 Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (timer) in guard self.progress.isFinished == false else { timer.invalidate() return } // 3 self.progress.completedUnitCount += 1 self.progressView.setProgress(Float(self.progress.fractionCompleted), animated: true) self.progressLabel.text = "\(Int(self.progress.fractionCompleted * 100)) %" } }

When the start button is clicked. the progress bar is reset to 0

Every second the progress bar will be updated, when finished the method returns

The progress bar will be incremented with 1 and the label will be incremented by 10%

Build and Run the project, press the Start button and the progress view will animate till it reaches 100%.