SwiftUI

SwiftUI gilt als Nachfolger von Apples UIKit zum Erstellen von Benutzeroberflächen (UserInterface). Es kann sowohl für Desktop als auch für Mobile Geräte genutzt werden.

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.

Beispiele

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))
    }
}