SF Symbols and List Styles

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.

swiftui-section3-1

Getting Started

Let's start off by creating a new file.

  • Press Cmd + N and select SwiftUI View
  • Name the file CourseRow and then, Create. Resume the preview and let's begin editing the file

swiftui-section3-2

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
//Image
.renderingMode(.original)
.imageScale(.large)

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

Text

  • From the Insert Menu, drag and drop the text modifier to the right of the icon
  • Since, we'd like to apply the font modifier to both the text and the icon, we'll be adding it to the HStack as follows:
HStack{
	//Image
  //Text
}
.font(.system(size: 34, weight: .light, design: .rounded))
swiftui-section3-4
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:

// Image
VStack {
		Text("SwiftUI")
				.font(.subheadline)
				.fontWeight(.bold)
		Text("Description")
				.font(.footnote)
				.foregroundColor(Color.secondary)
}
swiftui-section3-5

Alignment

  • 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
swiftui-section3-6

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

swiftui-section3-7

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()

swiftui-section3-8

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()
}
swiftui-section3-9

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

swiftui-section3-10

List Styles


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

  • To the List, add in listStyle modifier as follows:
//list
.listStyle(List Style)

  • 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
.listStyle(InsetGroupedListStyle())

swiftui-section3-11