📝
【SwiftUI】TextFieldに入力された文字数をカウントする
SwiftUIだとめちゃくちゃ簡単にできるのいいですよね
1分でできる、はず
環境
- Xcode 14.2
- iOS 16.2
成果物
最終的にこんなものができます👏🏻
TextFieldを用意する
レイアウトはお好みで
XcodeでNew Projectすると Hello, worldとともに地球儀アイコンが出てくるみたいですｶﾜｲｲ🤳🏻
struct ContentView: View {
@State private var text = ""
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
TextField("ここにテキストを入力", text: $text)
.padding(.leading, 5)
.frame(height: 50)
.overlay(
RoundedRectangle(cornerRadius: 3)
.stroke(lineWidth: 1)
)
}
.padding()
}
}
TextFieldのコード例等は公式ドキュメントにあるため、細かい説明は省きます
文字数をカウントする
入力された文字数を画面に出すため、適当にTextでも用意しておきましょう。レイアウトはお好みで
文字数のカウントは、カウントの数値を表示したいTextにtext.countを入れれば終わり
コード全体はこちら
struct ContentView: View {
@State private var text = ""
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
TextField("ここにテキストを入力", text: $text)
.padding(.leading, 5)
.frame(height: 50)
.overlay(
RoundedRectangle(cornerRadius: 3)
.stroke(lineWidth: 1)
)
// 文字数カウントを表示するいい感じのレイアウト
HStack(spacing: .zero) {
Spacer()
Text("\(text.count)") // 文字数を表示する
Text("文字")
}
}
.padding()
}
}
カウントに合わせて文字色を変えたい
文字数制限をつけて、オーバーしたらカウントの色を変えるとかしたいときがあります
たとえば、文字数制限が100だった場合、TextのforegroundColorを
Text("\(text.count)")
.foregroundColor(text.count > 100 ? Color.red : Color.black)
とするだけで文字入力に合わせて色が変わります
参考
Discussion