Introduction to SwiftUI

Transcript

Intro

Have you ever wanted to build an app that lets you mix your own custom colors? Today, you’re going to do just that with SwiftUI by creating a Color Picker. You’ll start with some basic code and, step-by-step, transform it into a dynamic color-changing app.

Step 1: Understanding the Starter Code

This is our starting point:

struct ContentView: View {
  var body: some View {
    VStack {
      Image(systemName: "globe")
        .imageScale(.large)
        .foregroundStyle(.tint)
      Text("Hello, world!")
    }
    .padding()
  }
}

You see a globe icon, text saying ‘Hello, world!’, and some formatting.

Step 2: Introducing the Color Picker Concept

The goal is to replace this static content with a colorful rectangle the user can control. To do that, you must introduce a few variables: State variables and a Color variable.

The State variables let you store values that can change and trigger the interface to update. The Color variable lets you represent and display different colors.

Step 3: Adding State Variables

Start by adding state variables to hold the red, green, and blue components of your color. Importantly, you’ll also add the activeColor variable to directly store and display the currently selected color. Notice how these are initialized with starting values.

struct ContentView: View {
  @State private var redValue = 0.0
  @State private var greenValue = 0.0
  @State private var blueValue = 0.0
  @State private var activeColor = Color.gray
  // ... rest of the view code
}

Step 4: Creating the Color Display

You’re going to replace that globe and text with your dynamic color display. Start with a rounded rectangle and set the size so it’s nice and visible. You’ll use .frame(width: 300, height: 250).

This will be the canvas for your color. To make it show a color, use .foregroundStyle and connect it to your activeColor State variable. Finally, add a bit of spacing at the bottom with .padding(.bottom, 24).

// Inside the VStack of ContentView
RoundedRectangle(cornerRadius: 24.0)
  .frame(width: 300, height: 250)
  .foregroundStyle(activeColor)
  .padding(.bottom, 24)

Step 5: Introducing Sliders

Now, it’s time to add the controls that will let the user adjust the color. These will be your red, green, and blue sliders. Sliders are a perfect way for users to visually select values within a specific range.

First, create a label to indicate what this slider controls. Add some text that says “Red”. Now, create an HStack to hold the slider and its value. Use the HStack to lay out views horizontally, side-by-side.

Think of it like a shelf where you can neatly place items in a row. Inside the HStack brackets is where you’ll place your slider and the text to show the value. Sliders are perfect for letting the user adjust values.

Inside the HStack, add Slider(value: $redValue, in: 0...255). This line creates a slider element. Notice how it connects to the redValue State variable using the $ symbol. This creates a two-way binding, meaning any changes the user makes on the slider update the redValue, and vice versa.

Add .tint(.red) after the slider closure to make the slider track and thumb red. This lets you style the slider to match the color it controls.

Add Text("\(Int(redValue.rounded()))") to the right of the slider to display the current red value next to the slider. This text element shows the integer value rounded from redValue. It updates dynamically as the user moves the slider.

Repeat the same process of adding the label and HStack to arrange the green and blue sliders as well.

Notice how each slider gets linked to its color component (red, green, blue) using the $ symbol to create a two-way binding.

// Inside the VStack of ContentView
Text("Red")

HStack {
  Slider(value: $redValue, in: 0...255)
    .tint(.red)
  Text("\(Int(redValue.rounded()))")
}

Text("Green")

HStack {
  Slider(value: $greenValue, in: 0...255)
    .tint(.green)
  Text("\(Int(greenValue.rounded()))")
}

Text("Blue")

HStack {
  Slider(value: $blueValue, in: 0...255)
    .tint(.blue)
  Text("\(Int(blueValue.rounded()))")
}

Step 6: The “Set Color” Button

You’ve built the color display and the controls to adjust the red, green, and blue values. But how does the user apply those changes and see the updated color? That’s where the ‘Set Color’ button comes in!” You’ll place your button below the sliders. Type Button("Set color") { }.”

The text inside the quotes defines what appears on the button. The curly braces {} hold the code that will run when the user taps the button. This is called the button’s action.”

Inside the curly braces {} of the button action, add activeColor = Color(red: redValue / 255.0, green: greenValue / 255.0, blue: blueValue / 255.0).

This line is the magic behind updating the color! It creates a new Color object based on the current values of redValue, greenValue, and blueValue. You divide each value by 255.0 because color values in SwiftUI typically range from 0.0 to 1.0.”

By setting activeColor to this new Color object, you essentially tell the app to update the color displayed in the rounded rectangle.

After the closing curly brace } of the button action, add the .buttonStyle(.borderedProminent) and .padding(16.0) modifiers.

These lines are optional but can enhance the look and feel of the button. .buttonStyle(.borderedProminent) gives the button a thicker border and a more prominent appearance. .padding(16.0) adds some space around the button’s text, making it easier to tap.”

Button("Set color") {
  activeColor = Color(red: redValue / 255.0, green: greenValue / 255.0, blue: blueValue / 255.0)
}
.buttonStyle(.borderedProminent)
.padding(16.0)

Step 7: Testing Time!

Try it out! Move the sliders and see the color change instantly. Tap the “Set Color” button to lock those changes. You’ve built a Color Picker!

Outro

Amazing work!

You transformed basic code into a dynamic, interactive app. This is just the beginning — imagine the possibilities!