Frame modifier in SwiftUI

Frame modifier is used to size views in SwiftUI. Frame is one of the most used modifier.

Today, we will explore frame in SwiftUI.

Let’s setup an example.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Learn iOS Development")
                Text("with DevTechie")
            }
            .navigationTitle("DevTechie")
        }
    }
}

We can use frame to set fixed size for views.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Learn iOS Development")
                Text("with DevTechie")
            }
            .frame(width: 50)
            .navigationTitle("DevTechie")
        }
    }
}

Frame takes width and height parameters to set size of the view.

.frame(width: 50, height: 100)

Frame takes alignment as an argument which helps us set the alignment for the content within the frame, if the space is available to do so.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Learn iOS Development")
                Text("with DevTechie")
            }
            .frame(width: 300, height: 400, alignment: .top)
            .background(.orange, in: RoundedRectangle(cornerRadius: 20))
            .navigationTitle("DevTechie")
        }
    }
}

Alignment has a few values to choose from so let’s put some of them in use with our example.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("SwiftUI")
                    .frame(width: 200, height: 100, alignment: .topLeading)
                    .padding()
                    .background(.orange, in: RoundedRectangle(cornerRadius: 20))
                Text("Swift")
                    .frame(width: 200, height: 100, alignment: .leading)
                    .padding()
                    .background(.indigo, in: RoundedRectangle(cornerRadius: 20))
                Text("UIKit")
                    .frame(width: 200, height: 100, alignment: .trailing)
                    .padding()
                    .background(.pink, in: RoundedRectangle(cornerRadius: 20))
                Text("iOS")
                    .frame(width: 200, height: 100, alignment: .topTrailing)
                    .padding()
                    .background(.mint, in: RoundedRectangle(cornerRadius: 20))
                Text("Machine Learning")
                    .frame(width: 200, height: 100, alignment: .bottom)
                    .padding()
                    .background(.teal, in: RoundedRectangle(cornerRadius: 20))
            }
            .foregroundStyle(.white)
            .navigationTitle("DevTechie")
        }
    }
}

Frame is useful for consistent view sizing behavior. Some views take only the required space to render content vs other views take as much space as available. So in order to add consistency, we can choose to set frame for views, which will help us resize the view with expected results.

Text view is an example of the view which only takes needed space to render content on the other hand, Color view takes as much space as possible. For our example, we will set frame for both so they look consistent.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("SwiftUI")
                    .frame(width: 200, height: 100, alignment: .bottom)
                    .background(.orange, in: RoundedRectangle(cornerRadius: 20))
                Color.teal
                    .frame(width: 200, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 20))
            }
            .foregroundStyle(.white)
            .navigationTitle("DevTechie")
        }
    }
}

Frame modifier goes beyond fixed size. With the help of minWidth, minHeight, maxWidth and maxHeight, we can make our views adjustable.

For example, we can say that our Color can be 200x200 maxWidth and height.

.frame(maxWidth: 200, maxHeight: 200)

Or our Text view will be 200x300 at minimum.

.frame(minWidth: 200, minHeight: 300)

With the help of maxWidth and maxHeight, we can make our view to take over all the available space.

Let’s set our Text view to cover entire width of the screen.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("SwiftUI")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity)
                    .background(.orange)
                Color.teal
                    .frame(maxWidth: 200, maxHeight: 200)
                    .clipShape(RoundedRectangle(cornerRadius: 20))
            }
            .foregroundStyle(.white)
            .navigationTitle("DevTechie")
        }
    }
}