How to Use Hierarchical Styles in SwiftUI with Colors

SwiftUI has 5 different style categories. Hierarchical styles are one of the categories. They can be used with or without color.

Without color these hierarchical styles use variables of black and white (for light and dark modes). You have seen this with the default text, SF Symbol and Shape colors. They use the primary hierarchical style.

Well, you can also use variations of color, not just black and white.

Start by adding a color to the parent view using:
.foregroundStyle(Color.orange)

Then when you use one of these hierarchical styles, they will use a variation of that color:

• .primary


• .secondary


• .tertiary


• .quaternary

Take a look at the example:

How do you use foregroundStyle or background to add blur effects in SwiftUI?

In Xcode 13 you now have access to a variety of blur effects also known as "materials".

Materials are one of the 5 categories of styles that can be applied to views using modifiers such as foregroundStyle and background.

The 5 SwiftUI Styles Categories include:

1. Color


2. Gradients


3. Materials


4. Hierarchal


5. Semantic

When you apply a material to a view, you have a choice in how transparent and blurred the view is.

Here are 6 materials available to you:

1. ultraThinMaterial


2. thinMaterial


3. regularMaterial


4. thickMaterial


5. ultraThickMaterial


6. bar

Here are some examples of how to apply these materials to different views:

Text("Apply Styles To Text")
    .bold()
    .foregroundStyle(.thickMaterial)

RoundedRectangle(cornerRadius: 20)
    .padding()
    .foregroundStyle(.ultraThinMaterial)
    .overlay(Text("Shapes").bold())

Image(systemName: "paintpalette.fill")
    .font(.system(size: 150))
    .foregroundStyle(.regularMaterial)
    .overlay(Text("Images").bold())

Are you new to SwiftUI?
Go here to get a free SwiftUI Views Quick Start book.

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

How do use foregroundStyle to apply gradients to SwiftUI views?

In SwiftUI (Xcode 13) you can use the foregroundStyle modifier to apply gradients to views such as Text, Images, and Shapes.

RoundedRectangle(cornerRadius: 20)
    .foregroundStyle(.conicGradient(colors: [.green, .blue], 

                                    center: .center))

In this image, you can see foregroundStyle being used to apply the new conicGradient.

The conic gradient is a lot like angularGradient. 

What's different is you can adjust the angle with just one parameter.

Check it out:

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

What new colors are available in SwiftUI in iOS 15?

With the release of Xcode 13, we see that some new colors are now a part of SwiftUI.

These colors were previously a part of UIKit but were not native to SwiftUI yet.

The colors are:

1. Mint


2. Teal


3. Cyan


4. Indigo


5. Brown

So what do you think? See any colors you will be using?

Get your free SwiftUI Views Quick Start book.

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

How do you create a 2-way binding with controls in a SwiftUI list?

In iOS 15 you can use SwiftUI to bind controls in a list directly to your data source.

This means you can edit data in the list rows and your data source will get updated automatically.

It's all about the dollar signs ($).

Look at the image to see where exactly you need to add them:

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

How to make safeAreaInset work on Lists?

In SwiftUI in iOS15 you can use the safeAreaInset modifier to overlay another view that goes into the safe area like you see here.

This could be a bug but the last row of a List doesn't come up above it.

👉 The Fix: Change the List to a ScrollView.

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

How the 6 different SwiftUI list styles show section headers and footers

The 6 different #SwiftUI list styles in #iOS will actually present your section headers and footers differently.

Does anyone else see a footer that looks out of place? 🤔

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

What listStyle options are there for the List view in SwiftUI?

Here are 6 different list styles in #SwiftUI for #iOS.

I really wish iOS also got the alternate row backgrounds like macOS did.

Originally, I had all of these styles on separate pages. But when referring to them I found I was doing a lot of page flipping. This will help.

Note: These examples come from a book called SwiftUI Views Mastery which is a picture book reference of SwiftUI views and code that’s almost 1,000 pages.

Interested in beginning SwiftUI?

Start with the free SwiftUI Views Quick Start picture book!

Animating Popups - Zelda App (iOS, Xcode 8, Swift 3)

Here is the second part of popups using the Scene Dock:

Modal Popups using the Scene Dock - Zelda App (iOS, Xcode 8, Swift 3)

I have created videos on how to make modal popups in iOS before. But here is yet another way in which you can create popups.

Closures - Zelda App (iOS, Xcode 8, Swift 3)

You may not be creating closures all the time but it is good to know about them and how they work because you will be using them ALL the time.

Show Execution Time (Elapsed Time)

Sometimes you want to see how long it took some code to execute. Here is an example of one way you could do this.

 
func myLongRunningFunction() {
    let start = Date()

    // Do you work

    let end = Date()
    let elapsedTime = end.timeIntervalSince(start)
    print("Elapsed Time: \(elapsedTime)")
}
 

(Swift 3)

Timer in Apps (Swfit 3, Xcode 8, iOS)

In this example I start a timer as soon as I enter the second view controller after clicking the "START MY RANDOM WORKOUT" button. Here is the code for that second view:

 
import UIKit

class ExerciseVc: UIViewController {

    @IBOutlet weak var timerLabel: UILabel!
    
    @IBOutlet weak var icon: UIImageView!
    var timer: Timer!
    var timeLeft = 60
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Call setTimeLeft every 1 second
        timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: 
            #selector(self.setTimeLeft), userInfo: nil, repeats: true)
        icon.image = #imageLiteral(resourceName: "situp")
    }

    func setTimeLeft() {
        timeLeft -= 1 // Subtract one second
        
        if timeLeft == 0 {
            stop()
        }
        
        timerLabel.alpha = 1
        timerLabel.transform = CGAffineTransform(scaleX: 1.4, y: 1.4)
        
        UIView.animate(withDuration: 1, animations: {
            self.timerLabel.text = "\(self.timeLeft)"
            self.timerLabel.alpha = 0.3
            self.timerLabel.transform = .identity
        })
    }
    
    @IBAction func stop(_ sender: UIButton) {
        stop()
    }
    
    // Show a white status bar instead of the default black one
    override var preferredStatusBarStyle: UIStatusBarStyle {
        get {
            return UIStatusBarStyle.lightContent
        }
    }
    
    func stop() {
        timer.invalidate() // Stop the timer
        dismiss(animated: true, completion: nil)
    }
}
 

(Swift 3)

Side Scrolling UIPIckerView

The scrolling temperature is a UIPickerView rotated on its side. Here is what is happening here:

• Rotate the UIPickerView 90°
• Rotate the view inside each row 90°
• Reverse the data populated into the picker
• Resize the rotated picker so it extends beyond the view. This makes the horizontal scroller fill the entire width

Here's the code:

 
class ViewController: UIViewController {

    @IBOutlet weak var picker: UIPickerView!
    
    var data: [String] = ["60°", "61°", "62°", "63°", "64°", "65°","66°", "67°", "65°", "63°", "59°", "57°"]
    var times: [String] = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00","15:00", "16:00", "17:00", "18:00", "19:00", "20:00"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        picker.transform = CGAffineTransform(rotationAngle: 90 * (.pi/180))
        picker.frame = CGRect(x: -100, y: view.frame.height - 120, width: view.frame.width + 200, height: 100)

        data.reverse()
        times.reverse()
        
        picker.dataSource = self
        picker.delegate = self
        
        picker.selectRow(data.count - 3, inComponent: 0, animated: false)
    }

    override func viewDidLayoutSubviews() {
        for subview in picker.subviews{
            if subview.frame.origin.y != 0{
                subview.isHidden = true
            }
        }
    }
}

extension ViewController: UIPickerViewDataSource {
    // Like number of columns
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return data.count
    }
}

extension ViewController: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return data[row]
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 100
    }
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        
        let label = UILabel(frame: CGRect(x: 5, y: 0, width: view.frame.width, height: view.frame.height))
        label.text = data[row]
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 45, weight: UIFontWeightThin)
        view.addSubview(label)
        
        let time = UILabel(frame: CGRect(x: 0, y: 85, width: view.frame.width, height: 15))
        time.text = times[row]
        time.textAlignment = .center
        time.font = UIFont.systemFont(ofSize: 14, weight: UIFontWeightThin)
        view.addSubview(time)
        
        view.transform = CGAffineTransform(rotationAngle: -90 * (.pi/180))
        
        return view
    }
}
 

How to Make Animations Bounce (Spring Animations) (iOS, Xcode 8, Swift 3)

Learn some really simple and cool animations that you can do today to give your users a better experience in your app!

Basic UIPickerView Template

I am using extensions here just so you can see which functions belong to which protocols.

 
class ViewController: UIViewController {

    @IBOutlet weak var picker: UIPickerView!
    
    var data: [String] = ["Row 1", "Row 2", "Row 3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        picker.dataSource = self
        picker.delegate = self
    }
}

extension ViewController: UIPickerViewDataSource {
    // Like number of columns
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return data.count
    }
}

extension ViewController: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return data[row]
    }
}
 

(Swift 3)

Fun Animations with CGAffineTransform (Scale, Rotate, Reposition) Tutori...

In this video I will take you through and teach you how easy it is to do multiple animations using CGAffineTransform. I will even explain what "Affine" means. :D

How to Create Animation Chains - UIView.animate (iOS, Xcode 8, Swift 3)

Need to do multiple animations, one after another? This video will show you a pretty good way on how to accomplish this using UIView.animate with the completion block.

How to Save User Settings (iOS, Xcode 8, Swift 3)

Learn how to use UserDefaults to save data in your app.

How to make an Onboarding Screen (iOS, Xcode 8, Swift 3)

Show an onboarding (intro) screen the first time the user uses your app. Keep track if they saw it or not so you know if it should come first.