How to implement all the different Text view types in SwiftUI

Text

This is a view used for presenting one or more strings of read only text in the display for the users. .i.e output texts that can not be modified by the end users.

Display Text

The code to the right displays some strings of text, using the Text view.

struct TextExample: View {
    var body: some View {
        Text("Say what you mean, and mean what you say!")
    }
}

Text Modifiers

You can use the list of available modifiers to control the look of the text presented on screen. i.e, font, color, weight and many more.

We called the foregroundColor modifier with a red color choice.
We called the font modifier with a predefined title font size.
finally update the font weight to bold using the bold modifier.

struct TextExample: View {
    var body: some View {
        Text("Say what you mean, and mean what you say!")
            .foregroundColor(.red)
            .font(.title)
            .bold()
    }
}

TextField

This is a control view used for displaying editable text on the screen for users, to enter and edit texts. To create a TextField, the textfield view requires a binding value variable. This variable is used for storing values entered by the user, the variable is simultaneously updated as the user enter or remove text from the textfield and this is only True for string type values.

TextField Example

The example code shows a TextField that accepts string text from a user and bounds the value from the textfield to the fullName variable.

We added a border modifier to make the border color of the textfield stand out from the background.
We also added a Text below the TextField and use it to simultaneously display the value of the bound variable fullName to the screen back to the user as they type.

struct TextFieldExample: View {
    @State private var fullName = ""
    var body: some View {
        TextField("Enter full name:", text: $fullName)
            .border(.secondary)
        
        Text("Full Name: \(fullName)")
    }
}

Note

For NONE string types changes are committed to the binding variable when the user. press enter or return key

TextField Modifiers

There are so many predefined modifiers that come build with TextField we can use to control how the appearance and functions of the TextFiled. i.e. focused, onSubmit, textFieldStyle and many more.

We called the onSubmit modifier and used it to listen for when the field is submitted and then update the color of Text.
We also removed the border and replaced it with a predefined textFieldStyle (roundedBorder)

struct TextFieldExample: View {
    @State private var fullName = ""
    @State private var textFiledIsSubmitted: Bool = false
    var body: some View {
        TextField("Enter full name:",text: $fullName)
            .onSubmit {
                textFiledIsSubmitted.toggle()
                print("Data base updated!!")
            }
            .textFieldStyle(.roundedBorder)
        
        Text("Full Name: \(fullName)")
            .font(.system(size: 20, weight: .black, design: .rounded))
            .foregroundColor(textFiledIsSubmitted ? .pink : .primary)
    }
}

SecureFiled

This is a view used to securely accept private text from users in the screen. i.e passwords, credit card or other sensitive information. It accepts a variable of type string which is bound to the field and, is simultaneously updated while the user enter or removes texts in the field. It also accepts a trailing closure that executes immediately after field is committed by the user, i.e pressing the done button.

SecureField Example

The example shows a two SecureFields views, one that accepts credit card number, and the other that accepts password from the user.

struct SecureFieldExample: View {
    @State private var creditCardNumber = ""
    @State private var password = ""
    var body: some View {
        SecureField("Enter Card Number:", text: $creditCardNumber)
        SecureField("Enter Password:", text: $password)
    }
}

Handing SecureField Data

You can handle the data provided by the user by accessing the bound variable in the trailing closure immediately after the user commits the SecureField.

we wrote moc function verify, which we used to print out the value entered by the user.

struct SecureFieldExample: View {
    @State private var creditCardNumber = ""
    @State private var password = ""
    var body: some View {
        SecureField("Enter Card Number:", text: $creditCardNumber) {
            verify(for: creditCardNumber)
        }
        SecureField("Enter Password:", text: $password) {
            verify(for: password)
        }
    }
    
    func verify(for value: String) {
        print("\(value): is correct")
    }
}

SecureField Modifiers

Like TexField and Text, we can use lots of predefined modifiers and many other that are SecureField specific.

We used the textfield modifier to control the look of the fields on the screen.
We applied textContentType modifier to both fields to help constraints the users for the type of texts that can be entered in the field, i.e letters and numbers for password types and numbers only for credit card filed. There many other available textContentType available for different use cases.

struct SecureFieldExample: View {
    @State private var creditCardNumber = ""
    @State private var password = ""
    var body: some View {
        SecureField("Enter Card Number:", text: $creditCardNumber) {
            verify(for: creditCardNumber)
        }
        .textFieldStyle(.roundedBorder)
        .textContentType(.creditCardNumber)
        
        SecureField("Enter Password:", text: $password) {
            verify(for: password)
        }
        .textFieldStyle(.roundedBorder)
        .textContentType(.password)
    }
    
    func verify(for value: String) {
        print("\(value): is correct")
    }
}

TextEditor

The TextEditor is used for presenting and editing long string of text, that span multiple lines and can be scrolled by default, such note, messages, email etc. The view can binds to a variable of type string which is simultaneously updated as the user add or remove text from the field.

TextEditor Example

The following example creates a TextEditor view instance and a corresponding binding variable note, which stores the values entered by user in the editor.

struct TextEditorExample: View {
    @State private var note = ""
    var body: some View {
        TextEditor(text: $note)
    }
}

TextEditor Modifiers

The example shows how we applied different modifiers to the previous example to modify how the content of the TextEditor is presented in the user interface.

We applied a foregroundColor modifier, to change the color of the text.
We also applied a font modifier to increase the size of text in the TextEditor.

struct TextEditorExample: View {
    @State private var note = ""
    
    var body: some View {
        TextEditor(text: $note)
            .foregroundColor(.teal)
            .font(.system(.title, design: .rounded))
    }
}

How to Implement All the Different Text View Types in SwiftUI

CONTENTS

Text

Display Text

Text Modifiers

TextField

TextField Example

TextField Modifiers

SecureFiled

SecureField Example

Handing SecureField Data

SecureField Modifiers

TextEditor

TextEditor Example

TextEditor Modifiers

SERIES

SwiftUI Views