Create Multiplatform Components in SwiftUI

Written by Team Kodeco

SwiftUI shines when it comes to creating UIs for different Apple platforms. With the same SwiftUI components, you can build interfaces that adapt natively to their environment, whether it’s an iPhone, iPad, Mac or even an Apple Watch or Apple TV. This section focuses on how to build components that seamlessly adapt across iOS and macOS.

As an example, let’s look at a simple SwiftUI view built with a TabView:

struct ContentView: View {
  var body: some View {
    TabView {
      Text("Tab 1")
        .tabItem {
          Label("Tab 1", systemImage: "1.circle")
        }
      
      Text("Tab 2")
        .tabItem {
          Label("Tab 2", systemImage: "2.circle")
        }
    }
  }
}

With an iPhone as your simulator, your preview should look like this:

Now change the simulator to My Mac and you’ll see the following:

In this example, you create a TabView with two tabs, each containing a Text view. On iOS, the TabView translates into a tab bar at the bottom of the screen. On macOS, it’s automatically adapted into tab controls at the top of the window, a more common pattern in many macOS applications. This platform-based adaptation applies to many other SwiftUI views, such as List, Button and so on.

Such adaptability is an advantage of SwiftUI that simplifies multiplatform development. You can write your UI code once and trust SwiftUI to adapt it appropriately for the target platform, creating a native and familiar experience for the user.