SwiftUI | Text view styling | Tic-Tac-Toe Game

Published in

Globant

5 min readJul 11, 2022

This is part 1 of the Tic-Tac-Toe Game series. We will implement Tic-Tac-Toe Game and at the same time, we will learn SwiftUI usage in depth.

Just in case you’re wondering what’s SwiftUI, go through SwiftUI's introduction and roam around this wiki to know more about the tic-tac-toe game.

Create a new project and name it TicTacToeGame. On a successful launch, we will be able to see ‘Hello, world!’ on a simulator. In this article, we will design a launch screen for our app and explore Text View.

Xcode creates two SwiftUI files for us <ProjectName>App (TicTacToeGameApp) and ContentView. The default structure of SwiftUI project says that:

@main
struct TicTacToeGameApp: App {
   var body: some Scene {
      WindowGroup {
         ContentView()
      }
   }
}

@main indicates the entry point to the application.
TicTacToeGameApp is an app structure which confirms App protocol and needs to implement a mandatory property body.
body returns one or more content for display on the main window.

struct ContentView: View {
   var body: some View {
      Text(“Hello, world!”)
         .padding()
    }
}

ContentView struct confirms View protocol and implements mandatory property body.
Here, body returns one Text view which will show “Hello, world!”.

To design a launch screen, create a new SwiftUI file named DashboardView by following these simple steps:

Styling Text view

After file creation, DashboardView has the same code which we had seen in ContentView. Text view is having padding modifier added to it with the default value of 16 points at all four edges.

SwiftUI uses modifiers for changing any view's appearance. The order in which we apply modifiers matters.

For example, let’s change the Text content and add modifiers to change the font and have a border:

struct DashboardView: View {
   var body: some View {
   Text("Hello, everyone")
      .font(.largeTitle)
      .padding()
      .border(.green, width: 5)
   }
}

Here, first padding will be applied, then a green border of width 5 pixels will be drawn. If we change the sequence of modifiers then their sequence gets swapped as well.

Font modifier will have the same impact on Text added at any time. SwiftUI has a vast list of modifiers available at Apple documentation.

Modifiers applied to any view get reflected in its whole content. SwiftUI provides Text view concatenation similar to string concatenation in swift. We can style our substrings using text view concatenation as:

var textConcatenation: Text {
   return Text(“Welcome to “)
      .font(.system(.title, design: .rounded))
      .foregroundColor(.red)
   + Text(“Medium article”)
      .foregroundColor(.green)
      .italic()
   + Text(“ on “)
      .foregroundColor(.red)
   + Text(“SwiftUI”)
      .font(.title)
      .foregroundColor(.blue)
      .underline(true, color: .gray)
      .bold()
}

We just need to add textConcatenation inside the body of the presentable view.
modifiers like lineSpacing, multilineTextAlignment and padding will be applied to all 4 Text view of textConcatenation.
Multiple previews can be seen for each instance of body’s Text views, whereas simulator shows the expected result.
Add VStack to achieve simulator behaviour on preview.

struct DashboardView: View {
   var body: some View {
      VStack {
         Text(“Hello, everyone”)
         ...

SwiftUI Inspector

Are you wondering where is xcode Inspector?? Don’t worry, SwiftUI have its inspector and using is much easier since you can see applied modifiers at the same time.

In the above video, we can see that the same result can be achieved with just a few clicks. We just need to tap on Text view either in the code panel or on Preview then we will get a suggested list of modifiers for that particular view. Isn’t it amazing!!!

Markdown support

Wondering what’s markdown then here’s the definition straight from markdown org:

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.
If you want to know more of markdown then do visit their website.

var markdownSupport: Text {
   return Text(“[SwiftUI](https://developer.apple.com/documentation/swiftui/) supports **markdown** 😄”)
}

We can even apply SwiftUI modifiers on the markdown and have the benefits of both. In the above example, first markdown text is computed and then SwiftUI modifiers are applied.

AttributedString

If you’re a fan of styling string with range then don’t get disheartened because SwiftUI does have AttributedString support as well.

Markdown and all the keys of NSAttributedString are supported with AttributedString.

var attributedText: AttributedString = “In this series of Medium article, we will learn SwiftUI concepts while playing\n Tic-Tac-Toe game\n\n Let’s get started!!”let attributes = AttributeContainer
   .foregroundColor(.orange)
   .font(.system(size: 20))attributedText.setAttributes(attributes)

First, attributedText is declared with the plain text as AttributedString type. We have attributes for setting text color and its font, SwiftUI has AttributeContainer for that. These attributes are set to attributedText with setAttributes(_) function. To style substrings, we can capture its range and then apply attributes to it as:

if let range = attributedText.range(of: “Let’s get started!!”) {
   attributedText[range].foregroundColor = .blue
   attributedText[range].underlineColor = .blue
   attributedText[range] .underlineStyle = .single
}