Tagged with SwiftUI

• Control Sizing in SwiftUI

  David Caddy | Published October 23, 2022

  Especially when working on Mac apps, controlSize) is a handy property to know about that allows you to change the size of controls within a SwiftUI view. The default size is .regular, but there's also .large, .small, and .mini.

  You may have noticed that in the new System Settings app on macOS Ventura, the switch controls are smaller than they would be by default. This is because the control size has been set to .mini.

  As an example, let's say you have a view that contains a number of controls, like so:

  struct ControlsView: View {
      var label: String
      @State private var value = 3.0
      @State private var selected = 1
      @State private var active = true
  
      var body: some View {
          VStack {
              HStack {
                  Text(label)
                  Spacer()
              }
              .foregroundColor(.secondary)
              .italic()
              Picker("Selection", selection: $selected) {
                  Text("option 1").tag(1)
                  Text("option 2").tag(2)
              }
              Slider(value: $value, in: 1...10) {
                  Text("Slider")
              }
              HStack {
                  Toggle("Check box", isOn: $active)
                  Spacer()
                  Button("Button") { }
                  Spacer()
                  Toggle("Switch", isOn: $active)
                  .toggleStyle(SwitchToggleStyle())
              }
          }
      }
  }
  

  Then, sepcifying the control size is as simple as using the .controlSize() modifier on the view, along with the desired size:

  struct ControlSizeView: View {
      var body: some View {
          VStack {
              ControlsView(label: "Mini")
                  .controlSize(.mini)
              Divider()
              ControlsView(label: "Small")
                  .controlSize(.small)
              Divider()
              ControlsView(label: "Regular")
                  .controlSize(.regular)
              Divider()
              ControlsView(label: "Large")
                  .controlSize(.large)
          }
          .padding()
      }
  }
  

  The result running on macOS:

  

  • SwiftUI
  • Control Size
  • macOS

• Platform Conditional Modifiers in SwiftUI v3

  David Caddy | Published June 9, 2021

  SwiftUI version 3 (coming in iOS 15 & macOS Monterey) has brought with it many nice features, including the ability to use #if conditional statements for postfix member expressions and modifiers:

  Text("Title")
  #if os(iOS)
      .font(.title)
  #else
      .font(.headline)
  #endif
  

  • SwiftUI
  • WWDC
  • iOS 15

• Markdown in SwiftUI v3

  David Caddy | Published June 9, 2021

  SwiftUI version 3 (coming in iOS 15 & macOS Monterey) has brought with it many nice features, including the ability to easily work with Markdown. Text elements now support Markdown natively, like so:

  VStack {
      Text("Regular text")
      Text("*Italic text*")
      Text("**Bold text**")
      Text("~~Strikethrough text~~")
      Text("[Link](apple.com) text")
  }
  

  

  • SwiftUI
  • WWDC
  • iOS 15

• Load Images Asynchronously in SwiftUI v3

  David Caddy | Published June 9, 2021

  SwiftUI version 3 (coming in iOS 15 & macOS Monterey) has brought with it many nice features, including AsyncImage, which greatly simplifies the process of downloading and displaying remote images from the internet:

  let imageURL = URL(string: "<exampleURL>")
  //...
  AsyncImage(url: url) { image in
    image
      .resizable()
      .aspectRatio(contentMode: .fill)
  } placeholder: {
    Color.red
  }
  .frame(width: 200, height: 200)
  

  In the above example a red placeholder view is shown while the image is loading.

  

  • SwiftUI
  • WWDC
  • iOS 15