Frames And Shapes

Part of the Introduction to SwiftUI section of Coddy's Swift journey. Lesson 17 of 50.

SwiftUI has shape views: Circle, Rectangle, RoundedRectangle and Capsule. .fill colors a shape:

Circle()
    .fill(.blue)
    .frame(width: 80, height: 80)

A shape grows to fill the space it is offered. .frame(width:height:) gives it, or any other view, a fixed size in points.

A frame can also be flexible. maxWidth: .infinity lets a view stretch across the available width:

Text("Continue")
    .frame(maxWidth: .infinity)
    .padding()
    .background(.blue)

Challenge

Easy

Draw the avatar placeholder: a Circle filled with green, 100 points wide and 100 points tall.

Try it yourself

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction to SwiftUI

1Introduction

4Modifiers

7Lists

10Project - Coddy Coffee

2Showing Content

5State & Buttons

8Navigation

11Final Challenges

3Stacks & Layout

6User Input

9Sharing Data

Practice on your own: Swift playground