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 Hierarchical styles in SwiftUI?

In SwiftUI, starting with Xcode 13, you can now apply hierarchical styles to your UI.

These styles are meant to show importance to different levels of your UI by making them stand out more or by showing levels of depth.

You probably do this already in some way. You give UI views in the background less color or more transparency and UI views in the foreground have more opacity (solidity) and might use more color.

And finally, you have your accent color which stands out the most so users know that they can interact with these UI views, like buttons.

Now, you can use hierarchical styles to help you with this pattern.

There are 4 styles at this time:

1. Primary - More in the foreground
2. Secondary
3. Tertiary
4. Quaternary - More in the background

You apply these styles to views using modifiers such as:

• background
• foregroundStyle

Take a look at the image for example:

 

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 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 do you create a menu using a Picker in SwiftUI?

In SwiftUI (iOS 14+), you can apply the .pickerStyle(.menu) modifier to a Picker view to make it look like a menu when the user taps on the selected picker item button:

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!

Onboarding - SwiftUI Conditional Navigation and Transition Animation

Can you navigate to another view in #SwiftUI WITHOUT the NavigationLink?

Yes! Here's one way:

Onboarding - SwiftUI Conditional Navigation and Transition Animations