dasukoの技術ブログ

現役エンジニアのブログです。

【SwiftUI】TextFieldの使い方

はじめに

この記事ではSwiftUIのTextFieldの使い方について説明します。

TextFieldはその名の通り読み書き可能(編集可能)なテキストを出力します。

  TextField には文字列のバインドを指定し、ユーザがテキストフィールド内のテキストを編集する度に

文字列の変更通知を受け取ることができます。

 

ちなみにSwiftUIの導入方法についてはこちらで説明しています。

dasuko.hatenadiary.jp

    VStackHStackについてはこちらを見てみてください!

dasuko.hatenadiary.jp

単純な実装

ラベルと文字列へのバインドだけを渡すシンプルなテキストフィールドを使ってみます。

import SwiftUI

struct ContentView: View {
    @State private var userName = ""
    
    var body: some View {
        VStack {
            TextField("UserName", text: $userName)
            Text(userName)
        }
    }
}

 

↓プレビューはこんな感じになります。

gyazo.com

テキストの変更通知を受け取る

以下は3つ目の引数には編集中通知を受け取った時に変更通知を受け取り、

編集中かどうかでテキストの色を変更するサンプルです。

今回はわかりやすいようにuserNamemailに初期値を設定し、それぞれのTextFieldを配置してみました。

import SwiftUI

struct ContentView: View {
    @State private var userName = "User"
    @State private var mail = "Mail"
    
    @State private var isEditingUserName = false
    @State private var isEditingMail = false

    var body: some View {
        VStack {
            TextField(
                "UserName",
                text: $userName)
            { isEditing in
                self.isEditingUserName = isEditing
            } onCommit: {
                validate(name: userName)
            }

            TextField(
                "Mail",
                text: $mail)
            { isEditing in
                self.isEditingMail = isEditing
            } onCommit: {
                validate(name: userName)
            }

            Text(userName)
                .foregroundColor(isEditingUserName ? .red : .blue)
        }
    }
    
    func validate(name: String) {
        // validate
    }
}

 

↓プレビューはこんな感じになります。

他のViewにフォーカスがうつったときにisEditingfalseになっているのが分かりますね。

gyazo.com

 

Modfier

disableAutocorrection

自動修正を無効にするかどうかを指定します。

無効にした場合は、キーボードが自動修正システムが入力を提案したり、上書きしようとしたりしません。

import SwiftUI

struct ContentView: View {
    @State private var userName = "User"
    @State private var isEditing = false

    var body: some View {
        VStack {
            TextField(
                "UserName",
                text: $userName)
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                validate(name: userName)
            }
            .disableAutocorrection(true)

            Text(userName)
        }
    }
}

border

テキストフィールドの枠線を指定できます。

以下の例ではテキストフィールドの枠線を青色に指定しています。

import SwiftUI

struct ContentView: View {
    @State private var userName = ""
    @State private var isEditing = false

    var body: some View {
        VStack {
            TextField(
                "UserName",
                text: $userName)
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                validate(name: userName)
            }
            .border(Color.blue)
        }
    }
    
    func validate(name: String) {
        // validate
    }
}

  ↓プレビューはこんな感じになります。

f:id:dasuko:20210302225847p:plain

keyboardType

キーボードタイプを指定します。

keyboardTypeには以下のような定義があります。

名前 説明
default デフォルトのキーボード
asciiCapable ASCII文字を表示するキーボード
numbersAndPunctuation 数字と句読点を表示するキーボード
URL URL入力用のキーボード
numberPad PIN入力用のテンキー
phonePad 電話番号入力用のキーパッド
namePhonePad 人の名前または電話番号入力のためのキーパッド
emailAddress メールアドレス入力用キーボード
decimalPad 数字と小数点付きキーボード
twitter Twitterテキスト入力用キーボード(@や#に簡単にアクセスできる)
webSearch Web検索用語とURL入力用キーボード
asciiCapableNumberPad ASCII数字のみを出力するテンキー
alphabet アルファベット入力用キーボード

  以下の例ではキーボードタイプにURLを指定しています。

import SwiftUI

struct ContentView: View {
    @State private var url = ""
    @State private var isEditing = false

    var body: some View {
        VStack {
            TextField(
                "URL",
                text: $url)
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                validate(url: url)
            }
            .keyboardType(.URL)
        }
    }
    
    func validate(url: String) {
        // validate
    }
}

autocapitalization

自動大文字化するかどうかを設定します。

引数にはUITextAutocapitalizationTypeを指定します。

UITextAutocapitalizationTypeには以下のようなタイプがあります。

プロパティ 説明
text 現在のサーチバーに入力されているテキスト
placeholder テキストフィールドに何も入力していないときに表示される文字列
searchBarStyle 検索バーのスタイル
autocapitalizationType テキストの自動大文字化するかどうかの制御

 

autocapitalizationTypewordsを指定すると、自動的に各単語の最初の文字が大文字化されます。

sentencesを指定すると、各文毎に、先頭が大文字化されます。

noneを指定すると、自動的に大文字化されません。

 

以下の例ではautocapitalizationwordsを指定しています。

import SwiftUI

struct ContentView: View {
    @State private var name = ""
    @State private var isEditing = false

    var body: some View {
        VStack {
            TextField(
                "Name",
                text: $name)
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                validate(name: name)
            }
            .autocapitalization(.words)
        }
    }
    
    func validate(name: String) {
        // validate
    }
}

 

↓プレビューはこんな感じです。

words指定しているので、最初の文字は大文字になります。

gyazo.com

textContentType

テキストフィールドの入力領域ののコンテンツタイプを指定します。

引数にはUITextContentTypeを指定します。

UITextContentTypeの定義には以下のようなものがあります。

名前 期待される入力
URL URL
addressCity 都市名
addressCityAndState 州名と都市名
addressState 状態名
countryName 国または地域名
creditCardNumber クレジットカード番号
emailAddress 電子メールアドレス
familyName 苗字
fullStreetAddress 場所を完全に識別する番地
givenName 名前(ファーストネーム
jobTitle 職業名
location 場所、住所
middleName ミドルネーム
name 名前
namePrefix Drなどのプレフィックス
nameSuffix Jrなどのサフィックス
nickname ニックネーム
organizationName 組織名
postalCode 郵便番号
streetAddressLine1 番地の最初の行
streetAddressLine2 番地の2行目
sublocality サブローカリティ。自治体名
telephoneNumber 電話番号
username アカウントまたはログイン名
password パスワード
newPassword 新しいパスワード
oneTimeCode ワンタイムコード

UITextContentTypeを指定してもビューに特に変化はありません。

UITextContentTypeを指定する場合は、だいたいキーボードタイプも指定します。

 

multilineTextAlignment

真ん中に寄せたり、右に寄せたりなど、テキストの配置を指定します。

import SwiftUI

struct ContentView: View {
    @State private var name = ""
    @State private var isEditing = false

    var body: some View {
        VStack {
            TextField(
                "Name",
                text: $name)
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                validate(name: name)
            }
            .multilineTextAlignment(.center)
        }
    }
    
    func validate(name: String) {
        // validate
    }
}

 

↓真ん中に指定するとこんな感じです。

f:id:dasuko:20210302233712p:plain

最後に

TextFieldでは複数行の入力を受け付けることができないので、

複数行の入力を受付けたい場合はTextEditorを使います!  

 

参考になったという方や、ここ間違っているよ!という方は

ぜひコメントしていただけると嬉しいです!!!!

 

SwiftUIを一から極めたいという人は本を買ってみるといいかも!

SwiftUIを本気でやろうとしていない人にはお勧めしません。

 

 

参考

Apple Developer Documentation