Introducing SwiftUI. A declarative way to create User Interfaces with Swift.

Overview

SwiftUI - Landmarks

Introducing SwiftUI. A declarative way to create User Interfaces with Swift.

SwiftUI was introduced at WWDC 2019 by Apple. It is their declarative platform for create user interfaces for apps across their platforms. It can be seen as similar to React-Navtive or Flutter without being cross-platform at the moment, hopefully with Swift being open-sourced it can be in the future. With SwiftUI there isn't an existing Storyboard or View Controller present. SwiftUI views are constructed and can be composed of other SwiftUI views. Those views are rendered as code as written automatically via a Live View or Static View . So far SwiftUI is being heavily pushed by the Apple team and heading into the fall's release of iOS 13 to production SwiftUI will be fully ready for production as well.

SwiftUI is the following:

  • Declarative
  • Automatic
  • Compositional
  • Consistent

Vocabulary

  • View protocol
  • PreviewProvider protocol
  • Resume
  • body property
  • structured editing popover
  • stacks
  • VStack
  • HStack
  • ZStack
  • Spacer
  • embed views e.g emben in VStack
  • padding
  • UIViewRepresentable - a view that represents a UIKit view
  • static preview (fully renders SwiftUI views)
  • live view (to fully render UIKit views)

Readings

struct ContentView : View {
    var body: some View {
        Text("Hello San Jose, Welcome to WWDC 2019")
    }
}

For debugging in preview

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Customizing the Text View

struct ContentView : View {
    var body: some View {
        Text("Turtle Rock")
        .font(.title)
        .color(.orange)
    }
}

Combine Views using Stacks

The body property only returns a single view.

struct ContentView : View {
  var body: some View {
    VStack (alignment: .leading) {
      Text("Turtle Rock")
        .font(.title)
        .color(.green)
      HStack {
        Text("Joshua Tree National Park")
          .font(.subheadline)
        Spacer()
        Text("California")
          .font(.subheadline)
      }
    }
    .padding()
  }
}

Create a Custom Image View

import SwiftUI

struct CircleImage : View {
    var body: some View {
        Image("turtlerock")
          .clipShape(Circle())
          .overlay(Circle().stroke(Color.white, lineWidth: 4))
          .shadow(radius: 10)
    }
}

#if DEBUG
struct CircleImage_Previews : PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
#endif

Using UIView and SwiftUI together

struct MapView : View, UIViewRepresentable {
  func updateUIView(_ view: MKMapView, context: UIViewRepresentableContext<MapView>) {
    let coordinate = CLLocationCoordinate2D(
      latitude: 34.011286, longitude: -116.166868)
    let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
    let region = MKCoordinateRegion(center: coordinate, span: span)
    view.setRegion(region, animated: true)
  }
  
  func makeUIView(context: Context) -> MKMapView {
    MKMapView(frame: CGRect.zero)
  }
}

#if DEBUG
struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
#endif

Compose the Detail View

struct ContentView : View {
  var body: some View {
    VStack {
      MapView()
        .edgesIgnoringSafeArea(.top)
        .frame(height: 300)
      CircleImage()
        .offset(y: -130)
        .padding(.bottom, -130)
      VStack (alignment: .leading) {
        Text("Turtle Rock")
          .font(.title)
          .color(.green)
        HStack {
          Text("Joshua Tree National Park")
            .font(.subheadline)
          Spacer()
          Text("California")
            .font(.subheadline)
        }
      }
      .padding()
      
      Spacer()
    }
  }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
  static var previews: some View {
    ContentView()
    
    //ContentView()
  }
}
#endif
You might also like...
iOS App by which the user can display a list of characters from the Harry Potter Movies.

iOS App by which the user can display a list of characters from the Harry Potter Movies. They can display a list of all characters, students, staff or view characters by house.

An App that gives a nice interface where the user can type in their start location and destination

SixtCarSummoner What it does We developed an App that gives a nice interface where the user can type in their start location and destination. The user

Weather forecast app that allows the user to either look for weather at their current location based on the GPS data or search for another city manually.
Weather forecast app that allows the user to either look for weather at their current location based on the GPS data or search for another city manually.

⛅️ Cloudy Weather forecast app that allows the user to either look for weather at their current location based on the GPS data or search for another c

Conveniently getting the User Agent through WKWebView

WebKit User Agent Requirements iOS 9.0+ macOS 10.11+ Installation See the subsec

MovieAppSwiftUI - The Application is using TMDB API and Server API to reduce user searching movies resources time with search engine
MovieAppSwiftUI - The Application is using TMDB API and Server API to reduce user searching movies resources time with search engine

MovieAppSwiftUI The Application is using TMDB API and Server API to reduce user searching movies resources time with search engine.This Application is

Stocks-App - App that allows the user to track stocks of their choice
Stocks-App - App that allows the user to track stocks of their choice

Stocks-App App that allows the user to track stocks of their choice (Coming soon

An iOS app that lets user quickly jot down thoughts with Markdown support
An iOS app that lets user quickly jot down thoughts with Markdown support

Thoughtless An iOS app that lets user quickly jot down thoughts with Markdown support. Description Perhaps you are often in a situation where you want

SFUserFriendlySymbols - This is user-friendly SF Symbols
SFUserFriendlySymbols - This is user-friendly SF Symbols

SFUserFriendlySymbols This is USER-FRIENDLY SF Symbols. You can use SF Symbols i

IMC - App developed to show the user's BMI
IMC - App developed to show the user's BMI

IMC Swift Aplicativo que o usuário digita seu peso e sua idade e tem como result

Owner
Alex Paul
Software Engineer at New York Times. Community iOS Advisor at pursuit.org.
Alex Paul
SwiftUI sample code for Apple's WWDC18 talk "Designing Fluid Interfaces".

Fluid Interfaces SwiftUI SwiftUI sample code for Apple's WWDC18 talk "Designing Fluid Interfaces". What is Fluid Interfaces? Fluid Interfaces is a new

 Frad LEE 32 Oct 7, 2022
Learn how to structure your iOS App with declarative state changes using Point-Free's The Composable Architecture (TCA) library.

Learn how to structure your iOS App with declarative state changes using Point-Free's The Composable Architecture (TCA) library.

Tiago Henriques 0 Oct 2, 2022
A mobile application that presents the news received via NewsAPI to the user. Built with SwiftUI.

?? SwiftUI News App with NewsAPI A mobile application that presents the news received via NewsAPI to the user. Built with SwiftUI. ✅ Features The data

Doğancan Mavideniz 5 Nov 15, 2021
Native iOS app built in SwiftUI, displays a collection of user's books.

Native iOS app built in SwiftUI, displays a collection of user's books.

Matthew Eilar 1 May 23, 2022
Create a weather app from scratch with this SwiftUI Crash Course

"Create a weather app from scratch with this SwiftUI Crash Course" https://youtu

Alexey Saechnikov 0 Dec 17, 2021
Seaglass is a truly native macOS client for Matrix. It is written in Swift and uses the Cocoa user interface framework.

Seaglass is a truly native macOS client for Matrix. It is written in Swift and uses the Cocoa user interface framework.

null 1 Jan 17, 2022
GitHub-User is an iOS native application, written in Swift programming language.

#GitHub-User GitHub-User is an iOS native application, written in Swift programming language. This project is an interview take home project. The arch

Zeljko Lucic 1 Mar 25, 2022
An iOS app that generates random activities for the user to do. And can be personalized by setting the categories.

RandomActivityApp An iOS app that generates random activities for the user to do. And can be personalized by setting the categories. Created by: Pedro

Pedro Esli 2 Jul 4, 2022
A Meetings app where the user is presented with the number of meetings created , join any them , edit the varied details also keeping the track of the history of the meetings.

Meetings A Meetings app where the user is presented with the number of meetings created , join any them , edit the varied details also keeping the tra

Devang Papinwar 1 Oct 18, 2021
‪‪An app that stores and displays the information entered by the user‬‬

To do list :‬‬ ‪‪An app that stores and displays the information entered by the user‬‬ ‪‪The user can : Add, delete one or clear all , Edit, Show the

null 0 Nov 4, 2021