SwiftUI | Button | Tic-Tac-Toe Game

This is part 2 of the Tic-Tac-Toe Game series. In Part 1, we created a new project and understood the basic structure of SwiftUI project. There we designed a launch screen for our app and explored different ways to style Text views. In this article, we will learn more about the SwiftUI Button view.

Create a new SwiftUI file named PlayButtonView which will be used for Button view exploration. Many initializers/constructors are available for Button view, we will explore them in detail.

Constructors for Button view

1. Text-only Button

There are two initializers available for a text-only button which takes a plain string or localized string key:

(_ title: StringProtocol, action: () -> Void) and (_ titleKey: LocalizedStringKey, action: () -> Void)

title: the title is a plain string

action: perform something when a user taps on a button or it can be kept as empty closure if no action is expected.

Button(“First”, action: {})

• One button with the title “First” can be seen but it doesn’t perform any action. because of empty closure.
• The title is a plain string and very less modifiers are available for updating its appearance.

Button role

SwiftUI provides a button role for text-only buttons which adapts appearance as per the role. A button will take delete UI appearance once a role is given as destructive. This single parameter saves our multiline codes of applying font, color etc.

Button(“Delete”, role: .destructive) {}

At this moment there are only two roles: cancel and destructive provided by SwiftUI but we wish to see more in future.

One of the most basic restrictions we get here is that we cannot update the frame as per need.

2. Non-text-only Button

(action:label:)

This is the initializer for a non-text-only button where:

action: perform something when a user taps on a button or it can be kept as empty closure if no action is expected.

label: It’s visible property of a button which can be seen on the screen. It also updates or changes the button’s appearance when action is triggered.

This label allows us to have a button appearance as per need.

Same above eg can be changed to:

Button {} label: {
   Text(“One”)
      .frame(width: 200, height: 200, alignment: .center)
}.background(.red)
 .foregroundColor(.white)

label supports all view types like Text, List, VStack, HStack etc. We can have a Button as well but the subview’s action will get conflicted with the parent button action.

Let’s use this understanding of SwiftUI buttons to design the Play Game button.

Button {} label: {
   Text(“Play Game”)
}

Add modifiers to it for updating:

• Frame to 200*200 pixels.
• Background to green color.
• Text color to white.
• Font so that it will be more attractive.
• Make it a circle with a shadow of 15 pixels radius.

Button {} label: {
   Text(“Play Game”)
} .frame(width: 200, height: 200, alignment: .center)
  .background(.green)
  .foregroundColor(.white)
  .font(.largeTitle)
  .clipShape(Circle())
  .shadow(radius: 15)

Do check out my other articles in this series:

Text view styling

Navigation

Shapes

Drawing

Data Flow

List

Animation

If you liked this article then please appreciate it with claps and comments. This will encourage me to write more!!!!