Frame modifier in iOS Swift

Introduction

The frame modifier lets you set the size and position of a view. It helps control how big or small a view is and where it sits on the screen.

When you want a button to have a fixed width and height.

When you want to center a text inside a specific area.

When you want to limit an image size to fit nicely in your layout.

When you want to add space around a view by changing its frame size.

Syntax

iOS Swift

view.frame(width: CGFloat?, height: CGFloat?, alignment: Alignment = .center)

You can set width, height, or both. Use nil to keep the original size for that dimension.

Alignment controls how the view is placed inside the frame if the frame is bigger than the view.

Examples

This sets the text view to be 100 points wide and 50 points tall.

iOS Swift

Text("Hello")
  .frame(width: 100, height: 50)

This sets the image width to 50 points but keeps the original height.

iOS Swift

Image(systemName: "star")
  .frame(width: 50, height: nil)

This makes a 100x100 frame and places the text at the top-left corner inside it.

iOS Swift

Text("Hi")
  .frame(width: 100, height: 100, alignment: .topLeading)

Sample App

This app shows two text views inside a vertical stack. The first text has a blue background and fixed size. The second text has a green background, bigger frame, and is aligned to the bottom right inside its frame.

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello Frame")
        .frame(width: 150, height: 50)
        .background(Color.blue)
        .foregroundColor(.white)
      
      Text("Aligned Text")
        .frame(width: 150, height: 100, alignment: .bottomTrailing)
        .background(Color.green)
        .foregroundColor(.black)
    }
  }
}

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

Important Notes

If you don't set a frame, the view sizes itself based on its content.

Using frame can help with layout but too many fixed sizes can make your UI less flexible on different screen sizes.

Combine frame with other modifiers like padding and background for better design control.

Summary

The frame modifier sets the size and alignment of a view.

You can set width, height, or both, and control where the content sits inside the frame.

It helps make your UI look neat and organized by controlling view sizes.