テキストの表示・入力

Published by @SoNiceInfo at 6/24/2020

テキストを表示するにはText()を使います。
テキストを入力するにはTextField(), SecureField()を使います。

基本的な使い方はこの様になっています。
入力ではbindした値を渡してあげる必要があるので$マークを付けています。
(データの扱いはProperty Wrappersを理解するで詳しく紹介しています。)

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        Text("SwiftUIへの道")
        TextField("Placeholder", text: $text)
        SecureField("", text: $text)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

スタイルを変更する

テキストのスタイルを変更する主なメソッドが標準で8種類用意されています。
forgroundColor()(文字色を変更する)
background()(背景を変更する。背景は画像を挿入することも可能です。)
bold()(太字にする)
italic()(イタリック体にする)
strikethrough()(取り消し線をつける)
underline()(下線をつける)
tracking()(文字の間隔を変える)
があります。

以下の例ではそれぞれのメソッドを使って「SwiftUIへの道」というテキストのスタイルを変更しています。

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
        Text("SwiftUIへの道")
        Text("SwiftUIへの道")
            .foregroundColor(.orange)
        Text("SwiftUIへの道")
            .background(Color.purple)
        Text("SwiftUIへの道")
            .bold()
        Text("SwiftUIへの道")
            .italic()
        Text("SwiftUIへの道")
            .strikethrough(true, color: .black)
        Text("SwiftUIへの道")
            .underline(true, color: .red)
        Text("SwiftUIへの道")
            .baselineOffset(CGFloat(30))
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

フォントを変更する

フォントを変更するにはfont(), fontWeight()を利用します。

font()で変更できる形式はデフォルトで8つ用意されています。
largeTitle(大タイトル)
title(タイトル)
headline(見出し)
body(本文)などがあります。

custom()を使うことでフォントとサイズを自由に設定できます。
system()を使うことでサイズ、ウェイト、デザインを設定できます。
fontWeightではフォントのウェイトを指定することができます。

以下の例では上記を使ってテキストを様々なフォントに変更しています。

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
  var body: some View {
      VStack {
          
          Text("これはデフォルトです")
          Text("これは大タイトルです")
              .font(.largeTitle)
          Text("これはタイトルです")
              .font(.title)
          Text("これは見出しです。")
              .font(.headline)
          Text("これは本文です")
              .font(.body)
          Text("太さを指定します")
              .fontWeight(Font.Weight.ultraLight)
          Text("種類、サイズを指定します")
              .font(.custom("Futura-Med", size: 24))
          Text("サイズ、太さ、種類を指定します")
              .font(.system(size: 18, weight: .heavy, design: .serif))
      }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
      ContentView()
  }
}

テキストを入力する

SwiftUIでテキストを入力するにはTextFieldを使用します。
パスワードなど表示したくないテキストを入力するにはSecureFieldを使用します。

以下の例では変数textにユーザからの入力値を保存します。
@Stateを使って変数textの変更管理をSwiftUIへ任せることができます。
その上でBindした値をTextField, SecureFieldへ渡すことで、ユーザが入力した値を変数textへ保存することができます。

実行結果の画像では上段のTextFieldに値を入力するとその下のTextField, SecureField, Textに結果が反映されています。

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        VStack {
            // 入力
            TextField("Placeholder", text: $text)
            TextField("Placeholder", text: $text)
                .foregroundColor(.blue)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            SecureField("", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            // 出力
            Text("↓")
            Text(text)
                .border(Color.red, width: 2.0)
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

入力するデータ変数の扱いについてはデータを複数のViewで共有するで紹介しています。

参考

Text - SwiftUI | Apple Developer Documentation

テキストの表示・入力

スタイルを変更する

フォントを変更する

テキストを入力する

参考

アプリをリリースしました!

ToDoアプリ

IPアドレス履歴保存アプリ