100 Days of SwiftUI – Day 21 – Design

We’ve arrived at day 21 of our 100 Days of SwiftUI. Yesterday, we learned about stacks, colors, gradients and more. Today, we’re diving deeper into the design of our apps, learning even more ways to style our apps the way we want to, while leaving all functionality we’ve already programmed intact.

Stacking and styling buttons in SwiftUI

Using VStack, which we learned about yesterday, we can stack buttons on top of each other and add proper spacing.

SwiftUI also features multiple ways to style buttons. We’ve already seen adding backgrounds, but there’s a lot more we can do. For example, we can change a buttons shape, the font size of the text or add shadows.

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack(spacing: 30) {
                Button {
                    
                } label: {
                    Text("First button")
                        .buttonStyle(.borderedProminent)
                        .tint(.white)
                        .background(.cyan)
                        .font(.largeTitle)
                        .clipShape(Capsule())
                        .shadow(radius: 5)
                }
                
                Button {
                    
                } label: {
                    Text("Second button")
                        .buttonStyle(.borderedProminent)
                        .tint(.purple)
                        .background(.black)
                        .font(.subheadline)
                }
                
                Button {
                    
                } label: {
                    Text("Third button")
                        .buttonStyle(.borderedProminent)
                        .tint(.gray)
                        .background(.indigo)
                }
            }
        }
    }
}

These same techniques are used in the Guess the Flag project, to style the flags, for example.

Guess the Flag design

The design for our Guess the Flag app consists of a lot of various design elements. It will take time for all of these to sync in, but it’s clear that SwiftUI allows you to create modern looking apps quite rapidly.

The code below is in large lines as designed by Paul, with a few minor tweaks I added because I thought they looked better. We really flew through these when going through the course, so it’s important I make sure to play around with everything we’ve learned to create great UI’s.

//
//  ContentView.swift
//  GuessTheFlag
//
//  Created by Darryl Soerdjpal on 16/07/2022.
//

import SwiftUI

struct ContentView: View {
    @State private var showingScore = false
    @State private var scoreTitle = ""
    
    
    @State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()
    
    @State private var correctAnswer = Int.random(in:0...2)
    
    var body: some View {
        ZStack {
            RadialGradient(stops: [
                .init(color: Color(red: 0.1, green: 0.2, blue: 0.45), location: 0.3),
                .init(color: Color(red: 0.76, green: 0.15, blue: 0.3), location: 0.3)
            ], center: .top, startRadius: 200, endRadius: 700)
            .ignoresSafeArea()
            
            VStack {
                Spacer()
                Text("Guess the Flag")
                    .font(.largeTitle.bold())
                    .foregroundColor(.white)
                Spacer()
                Spacer()
                VStack(spacing: 15) {
                    VStack {
                        Text("Tap the flag of")
                            .foregroundStyle(.secondary)
                            .font(.subheadline.weight(.heavy))
                        Text(countries[correctAnswer])
                            .font(.largeTitle.weight(.semibold))
                    }
                    
                    ForEach(0..<3) { number in
                        Button {
                            flagTapped(number)
                        } label: {
                            Image(countries[number])
                                .renderingMode(.original)
                                .clipShape(Capsule())
                            .shadow(radius: 5)                    }
                    }
                }
                
                .frame(maxWidth: .infinity)
                .padding(.vertical, 20)
                .background(.ultraThinMaterial)
                .clipShape(RoundedRectangle(cornerRadius: 20))
                
                Spacer()
                Spacer()
                
                Text("Score: ???")
                    .foregroundColor(.white)
                    .font(.title.bold())
                
                Spacer()
                
            }
            .padding()
        }
        .alert(scoreTitle, isPresented: $showingScore) {
            Button("Continue", action: askQuestion)
        } message: {
            Text("Your score is ???")
        }
    }
    
    func flagTapped(_ number: Int) {
        if number == correctAnswer {
            scoreTitle = "Correct"
        } else {
            scoreTitle = "Wrong"
        }
        
        showingScore = true
    }
    
    func askQuestion() {
        countries.shuffle()
        correctAnswer = Int.random(in: 0...2)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

That was it for day 21! Tomorrow, we’ll wrap up this project and more importantly, we’ll face a few challenges to improve upon the current iteration of our app as well as make sure that we’ve been taught has really hit home. Time to recharge and get ready again!