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.
Name the file CourseRow and then, Create. Resume the preview and let’s begin editing the file
SF Symbols
It’s time to finally work with SF Symbols.
Firstly, replace the text modifier with an image one
Image(systemName:String)
Next, head over to the SF Symbols app and select Multicolor. You can simply copy the icon by pressing Shift + Cmd + C. Go back to the image modifier and paste it as follows:
Image(systemName:"paperplane.circle.fill")
To make it bigger, add in the the imageScale modifier
//Image .imageScale(.large)
Lastly add in the renderingMode modifier. This is necessary when you’re using multicolor option
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.
From the insert menu, drag and drop the text modifier above the first one
Replace the font modifier value as follows:
//HStack
//Image
//VStack
//Text
//Text
.font(.subheadline)
Since, we only want to apply the above modifier to the text layers, do the following:
To align the elements to the left. Select the VStack and in the Inspector, set Alignment to Left
Next, give the VStack a Spacing value of 4
Lastly, set the alignment for the HStack to top
Frame
In this step, we’ll make the frame of the icon bigger and then, add some modifiers to it.
Select Image and head over to the Inspector. Set the width as well as the height in Frame to 48
In the Inspector, add in the background modifier and the clipShape modifier
Since, both the image and the background are blue, add in the foregroundColor modifier to change the color of the icon. Set its value to white
Change the value of Rendering Mode to Template to make the icon appear white
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
Press Cmd + N and select SwiftUI View. Name it CoursesView and then, Create
In CoursesView, replace the text modifier with:
var body: some View{ CourseRow()
}
List Layout
In this step, we’ll create a list layout. To do so:
Cmd + Click CourseRow and in the contextual menu, select Embed in List
You can change the list value from 5 to any number you’d prefer. To be able to scroll down in the preview, click on the first option on top of the preview
List Styles
Here, we’ll apply some styles to the list.
To the List, add in listStyle modifier as follows:
//list .listStyle(ListStyle)
To know what styling options are available, Option + Click the modifier and then, click on ListStyle to head to the in-built documentation. Apply the following as the list style