← All daysDay 8 of 49 · Part 3: Views and layout
Day 8

Text, images, and SF Symbols

These are the lesson notes for this day. Its build-along tutorial and flash cards have not been written yet.

Lesson 9

Text, images, and SF Symbols

Text shows a string and can format values itself: Text(price, format: .currency(code: "USD")) for money, similar forms for dates and numbers, Markdown inside string literals, and automatic localization of literal strings. Image shows pictures from the asset catalog and SF Symbols (Image(systemName:)). An image is drawn at its natural size until you add .resizable(), after which .scaledToFit() or .scaledToFill() decide how it fills its frame. Label pairs a title with an icon. AsyncImage loads a picture from a URL and shows a placeholder while it loads; as of iOS 27 it respects HTTP cache headers by default.

SF Symbols are Apple's vector icons. They scale with the surrounding text size and weight, come in several rendering modes, and can animate with symbol effects.

Exercise

Build one screen containing a title, a price and a date formatted by Text, an SF Symbol that matches the size of the text beside it, and a remote image in a 100 × 100 rounded frame with a placeholder.

After this lesson you should be able to answer
  1. Why does an Image ignore the frame you give it until you add .resizable()?
  2. How do you show a number as currency without building the string yourself?
  3. What does AsyncImage show while the image is loading, and how do you change that?
Resources