How to create and use toggle in SwiftUI

A toggle in SwiftUI is a control which can go between on and off states and it’s equivalent to UISwitch in UIKit. In this tutorial we’re going to learn how to create a toggle and use it in various examples. We’re going to update a view (show/hide an image) based on a toggle state, create custom … 

 

SwiftUI NavigationView tutorial with examples

NavigationView in SwiftUI is a container view which allows you to manage other views in a navigation interface. Learn how to customize navigation bar with a title (large or small), add leading and trailing buttons to the navigation bar, and implement a master-detail flow where you can push detail view on top of the master … 

 

How to build a circular progress bar in SwiftUI

In this tutorial we’re going to learn how to design and build a circular progress bar in SwiftUI using stacks, Circle shapes and view modifiers. The sample app will include a circular progress bar and a button underneath it, which will increment the progress. The final product will look like this: Start by creating a new single … 

 

How to make custom view modifiers in SwiftUI

SwiftUI lets you modify the appearance or behavior of views by applying view modifiers to them. A view modifier takes a given view, modifies it, and returns a brand new view. This is really important to understand. Besides using the existing SwiftUI modifiers, you can create your own view modifier by conforming to the ViewModifier protocol … 

 

How to use switch statement with enum in Swift

Swift language provides a switch statement which allows you to compare a given value against multiple possible matching options and perform respective action. In its simplest form, a switch statement looks and works like that: let frameworkName = “SwiftUI” switch frameworkName { case “UIKit”: print(“Using UIKit”) case “SwiftUI”: print(“Using SwiftUI”) default: print(“Framework undefined”) } Given … 

 

How to present new sheet view from navigationBarItems button in SwiftUI

In this tutorial we’re going to learn how use NavigationView’s navigationBarItems button to present a new sheet view modally. In order to accomplish this, we’re going to follow these steps: Create a NavigationView Add a button to the NavigationView Create a new sheet view which we wish to present Add action to the button to present … 

 

How to expand SwiftUI views to span across entire width or height of screen

Learn how to use frame() modifier to expand SwiftUI views to take full width or height of screen. When applied to your view, the frame() modifier positions it within another view (frame) with specified dimensions. By manipulating the maximum width and/or height of the new frame, we’ll be able to achieve the desired effect of … 

 

How to pick a random element from an array in Swift

Swift Standard Library provides a randomElement() method to return a random element from an array or nil if the array is empty. If you know that your array is not empty, then go ahead and force unwrap the result of randomElement() method: let array = [“Swift”, “SwiftUI”, “UIKit”, “Foundation”] let randomElement = array.randomElement()! print(randomElement) However, … 

 

How to add borders to SwiftUI views

Learn how to add borders to SwiftUI views including: Text view, Stack view, Image view, and Button. Create rectangular or rounded-corners borders using .border() or .overlay() modifiers respectively. Create solid line or dashed borders. Add default, rectangular border to a Text view using .border() modifier: Text(“SwiftUI Tutorials”) .font(.largeTitle) .padding() .border(Color.black) Add rectangular border to a … 

 

Advanced SwiftUI button styling and animation

Learn how to style SwiftUI buttons using ButtonStyle protocol and .buttonStyle() modifier by creating reusable button styles. Using ButtonStyle protocol allows you to create advanced button styles and introduce animations to the button style when it is being pressed. Let’s start with a simple button: Button(action: { print(“Button action”) }) { HStack { Image(systemName: “bookmark.fill”) Text(“Bookmark”) …