Post
Ask Question

SwiftUI Build Declarative User Interfaces In iOS 13

Introduction

 
SwiftUI, a new Swift Framework, and accompanying design tools, empower a whole new way to build user interfaces. Design tools in Xcode make it as easy as drag-and-drop to construct or edit your interface, all while instantly editing the exact same swift code file you can also edit by hand.
 
Xcode is constantly running your real app interface live to see how it behaves directly in the design canvas, or you can instantly preview your app on an attached device.
 

SwiftUI Includes

  • Design tools read and write the same code you edit by hand for a single source of truth
  • Declarative syntax defines your user interface as easy-to-read Swift code
  • Animations are built using a simple command that describes the action you want to see 
  • Library of controls and modifiers make it easy to design and build complex interfaces
  • Share common UI code across all Apple platforms, and add custom experiences for each OS
  • Preview show an exact rendering across various device types and accessibility settings
  • Interacts with your interface live in the design canvas, or on an attached device
  • Hot-swap your edits into a live view of your app to instantly see and interact with changes 
SwiftUI requires iOS 13, watchOS 6, tvOS 13, or macOS Catalina. To use the SwiftUI design canvas Xcode 11 must be running on macOS Catalina.
 

SwiftUI Benefits

 
SwiftUI has several important benefits,
  1. There's a new declarative UI structure that defines how our layouts look and work. 
  2. Updating the UI preview automatically generates new Swift Code, and changing the Swift code updates the UI preview.
  3. Any bindings in the Swift - e.g. outlets and actions, effectively - are now checked at compile time, so there's no more risk of UI failing by surprise at runtime. 
  1. import SwiftUI  
  2.   
  3. struct ContentView: View {  
  4.     var body: some View {  
  5.         VStack {  
  6.             MapView()  
  7.                 .edgesIgnoringSafeArea(.top)  
  8.                 .frame(height: 300)  
  9.             CircleImage()  
  10.                 .offset(y: -60)  
  11.                 .padding(.bottom, -60)  
  12.               
  13.             VStack(alignment: .leading) {  
  14.                 Text("Turtle Rock")  
  15.                     .font(.title)  
  16.                 HStack(alignment: .top) {  
  17.                     Text("Joshua Tree National Park")  
  18.                         .font(.subheadline)  
  19.                     Spacer()  
  20.                 }  
  21.                 }  
  22.                 .padding()  
  23.               
  24.              Spacer()  
  25.         }  
  26.     }  
  27. }  
  28. struct ContentView_Preview: PreviewProvider {  
  29.     static var previews: some View {  
  30.         ContentView()  
  31.     }  
  32. }  

Output

 
 

Native on All Apple Platforms

 
SwiftUI was built on decades of experience in creating the most innovative and intuitive user interfaces in the world. Everything users love about Apple ecosystems, such as controls and platform-specific experiences, us beautifully presented in your code.
 
SwiftUI is truly native, so your apps directly access the proven technologies of each platform with a small amount of code and an interactive design canvas.


Similar Articles