SF Symbols and List Styles

Using SF Symbols 2 and the new list styles in iOS 14

In this section, you’ll learn how to work with SF Symbols. We’ll be adding multicolor icons to our app, it is a new icon category introduced by Apple with SF Symbols 2. In addition to this, we’ll also be adding a list layout.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Resources

Before we begin, please make sure to have the SF Symbols app downloaded. Provided below is the link to the app as well as a link to the Apple Developer app. The latter contains resources that you can use to stay updated.

Getting Started

Let’s start off by creating a new file.

SF Symbols

It’s time to finally work with SF Symbols.

Image(systemName: String)


Image(systemName: "paperplane.circle.fill")


//Image
.imageScale(.large)


//Image
.renderingMode(.original)
.imageScale(.large)

Note: If you use font properties on the icon, you will not be able to use the multicolor option.

Text

HStack{
//Image
//Text
}

.font(.system(size: 34, weight: .light, design: .rounded))

Note: You’ll notice that the renderingMode modifier is no longer working. As mentioned above, that is because we’re using the font properties on the icon.

VStack

Let’s add in another layer of text beneath the existing one, this automatically creates a VStack.

//HStack

//Image

//VStack

//Text

//Text

.font(.subheadline)


// Image

VStack {
Text("SwiftUI")
.font(.subheadline)
.fontWeight(.bold)
Text("Description")

.font(.footnote)
.foregroundColor(Color.secondary)
}

Alignment

Frame

In this step, we’ll make the frame of the icon bigger and then, add some modifiers to it.

Spacer

Now, let’s add in a Spacer to make sure that the elements take the full width. After the VStack, add in the Spacer as follows:

//VStack
Spacer()

CoursesView

var body: some View {
CourseRow()

}

List Layout

In this step, we’ll create a list layout. To do so:

List Styles


Here, we’ll apply some styles to the list.

//list
.listStyle(List Style)

.listStyle(InsetGroupedListStyle())