SwiftUI
Einführung[Bearbeiten]
SwiftUI gilt als Nachfolger von Apples UIKit/AppKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte genutzt werden.
SwiftUI ist eine moderne Bibliothek, die speziell für die Entwicklung von Anwendungen unter iOS 13 und höher konzipiert wurde. Sie ist Teil des native iOS-Frameworks und ermöglicht es, das User Interface (UI) direkt in Code zu definieren und bietet eine Vielzahl von Steuerelementen und Funktionen, die es ermöglichen, das UI schnell und einfach zu gestalten.
SwiftUI kann somit erst ab iOS 13 verwendet werden. Wenn Sie eine Anwendung entwickeln, die auf älteren iOS-Versionen laufen soll, müssen Sie eine andere Methode zur Programmierung des UI wählen, wie zum Beispiel Interface Builder oder Auto Layout. Es ist jedoch wichtig zu beachten, dass Apple in der Regel nur die aktuellen und die zwei vorherigen Hauptversionen von iOS unterstützt. Das bedeutet, dass Geräte mit iOS 12 oder älter möglicherweise nicht mehr von Apple mit Sicherheitsupdates und neuen Funktionen versorgt werden und daher anfälliger für Sicherheitslücken und Probleme sein können. Wenn Sie eine Anwendung entwickeln, die auf älteren iOS-Versionen laufen soll, sollten Sie daher sicherstellen, dass sie auf diesen Versionen ordnungsgemäß funktioniert und dass sie keine Funktionen nutzt, die erst in neueren Versionen von iOS verfügbar sind.
Unterschiede[Bearbeiten]
Bei UIKit hat klassisch in MVC (Model View Controller) Manier programmiert. D.h. man hat einen Controller, der den Datenfluss zwischen der Datenhaltung und dem View also der Benutzeransicht gemanagt hat.
Bei SwiftUI erzeugt man Bindings zwischen Model und View und das System kontrolliert selbst den Datenfluss. Es kann also das Model automatisch aktualisieren wenn der Benutzer etwas tut. Oder es aktualisiert den View, wenn das Model es verlangt. Das spart eine Menge Programmierarbeit.
Links[Bearbeiten]
Swift (Programmiersprache)
Beispiele[Bearbeiten]
SwiftUI - Color Picker
//
// ContentView.swift
// ColorPicker
//
// Created by Stephan Schlegel on 20.12.22.
//
import SwiftUI
struct ContentView: View {
// state vars
// it's commonly good practice to make them private
// These vars are the "source of truth" meaning it
// owns the data. We need no other copy of the data.
@State private var r: Double = 239
@State private var g: Double = 141
@State private var b: Double = 82
var body: some View {
ZStack{
Rectangle()
.foregroundColor(Color(.systemFill))
.ignoresSafeArea()
VStack {
Rectangle()
.frame(width: 100, height: 100)
.foregroundColor(Color(red:r/255,green:g/255, blue:b/255))
.border(Color(.black),width:1)
// Passing in State Var Bindings to the Slider View.
// This way it can read and write from/to the vars
SliderView(label:"Red",value: $r)
SliderView(label:"Green",value: $g)
SliderView(label:"Blue",value: $b)
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//
// SliderView.swift
// ColorPicker
//
// Created by Stephan Schlegel on 20.12.22.
//
import SwiftUI
struct SliderView: View {
var label:String
@Binding var value:Double
var body: some View {
VStack{
Slider(value:$value, in: 0...255, step: 1)
Text("\(label): \(Int(value))")
}
}
}
struct SliderView_Previews: PreviewProvider {
static var previews: some View {
// For Preview we pass in label and value from Slider view
// value is not a real binding but at least we can
// see something in our preview to imagin where we go
SliderView( label: "Label",value:Binding.constant(0) )
.padding()
}
}
SwiftUI - Slot Machine
//
// ContentView.swift
// Slot Machine
//
// Created by Stephan Schlegel on 20.12.22.
//
import SwiftUI
struct ContentView: View {
@State private var symbols = ["apple","coin","cherry"]
@State private var symbolIndex = [0,1,2]
@State private var backgrounds = [Color.white,Color.green,Color.red]
@State private var credits:Int = 1000
private var betAmount:Int = 5
var body: some View {
ZStack{
Image("bg")
.resizable()
.ignoresSafeArea()
VStack{
Spacer()
// Title
HStack{
Image(systemName: "star.fill")
.foregroundColor(Color(red:253/255,green:240/255,blue:7/255))
Spacer()
Text("SLOT MACHINE")
.fontWeight(.black)
.foregroundColor(.white)
Spacer()
Image(systemName: "star.fill")
.foregroundColor(Color(red:253/255,green:240/255,blue:7/255))
}.font(.title)
.padding(.bottom)
Spacer()
// Credits
HStack{
Text("Credits: " + String(credits))
.padding(.all,10)
.background(.white.opacity(0.75))
.cornerRadius(20)
}
.padding(.bottom)
Spacer()
// Slots
HStack{
Spacer()
SlotView( symbolName:$symbols[symbolIndex[0]], background:$backgrounds[0] )
SlotView( symbolName:$symbols[symbolIndex[1]], background:$backgrounds[1] )
SlotView( symbolName:$symbols[symbolIndex[2]], background:$backgrounds[2] )
Spacer()
}
.padding(.bottom)
Spacer()
// Button
Button(
action: {
// reset background color
// self.backgrounds[0] = Color.white
// self.backgrounds[1] = Color.white
// self.backgrounds[2] = Color.white
// NOTE: We can use a map function on each element of the array instead:
self.backgrounds = self.backgrounds.map({ _ in Color.white})
// Change Inages randomly after click
// self.symbolIndex[0] = Int.random(in: 0...self.symbols.count-1)
// ...
self.symbolIndex = self.symbolIndex.map({
_ in Int.random(in: 0...self.symbols.count-1)
})
// Calc bet results
if self.symbolIndex[0] == self.symbolIndex[1] && self.symbolIndex[0] == self.symbolIndex[2] {
// Won
self.credits += self.betAmount * 10
// NOTE: we can strip the () after map here
self.backgrounds = self.backgrounds.map{_ in Color.green}
} else {
self.credits -= self.betAmount
}
},
label: {
Text("Spin")
.font(.title2)
.fontWeight(.medium)
.padding(.all,10)
.padding([.leading,.trailing],25.0)
.background(Color(hue: 0.107, saturation: 0.944, brightness: 0.818))
.foregroundColor(.white)
.cornerRadius(20)
})
Spacer()
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//
// SlotView.swift
// Slot Machine
//
// Created by Stephan Schlegel on 21.12.22.
//
import SwiftUI
struct SlotView: View {
@Binding var symbolName:String
@Binding var background:Color
var body: some View {
Image(symbolName)
.resizable()
.aspectRatio(1, contentMode: .fit)
.padding(.all,20)
.background(background.opacity(0.6))
.cornerRadius(20)
}
}
struct SlotView_Previews: PreviewProvider {
static var previews: some View {
SlotView(symbolName:Binding.constant("coin"),background:Binding.constant(Color.green))
}
}
