プログラマーです。雑記系、プログラミング系、投資系の記事を書いています!

SwiftUIでのkeyboardの設定

どうも名探偵です。

本日はkeyboardの設定について解説していきます。

 

なぜkeyboard使うの?

アプリを作っていく上でユーザーに入力をして欲しいことがあると思います。

そのときにkeyboardを使うと楽ですし、ユーザー側からしても使いやすいと思います。

 

keyboardの設定コード

import SwiftUIimport Combineextension UIApplication { func closeKeyboard() {  sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) }}struct ContentView: View {// 省略 @ObservedObject var keyboard = KeyboardObserver() var body: some View {  NavigationView {VStack { TextField("金額を入力", text: $money)  .font(.largeTitle)  .textFieldStyle(RoundedBorderTextFieldStyle())  .padding()  .keyboardType(.numberPad) }.onAppear(perform: { self.keyboard.addObserver()}).onDisappear(perform: { self.keyboard.removeObserver()}).padding(.bottom,  self.keyboard.keyboardHeight) .animation(.easeOut)  .gesture(  TapGesture().onEnded { _ in UIApplication.shared.closeKeyboard()  })  } }}// キーボードのクラスclass KeyboardObserver: ObservableObject {  @Published var keyboardHeight: CGFloat = 0.0  /// Observerの追加 func addObserver() {  NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWillChangeFrame(_:)), name: UIResponder.keyboardWillChangeFrameNotification, object: nil) }  /// Observerの削除 func removeObserver() {  NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillChangeFrameNotification, object: nil) }  /// キーボードのフレーム検知処理 /// - Parameter notification: Notification @objc func keyboardWillChangeFrame(_ notification: Notification) {  if let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue,let beginFrame = notification .userInfo?[UIResponder.keyboardFrameBeginUserInfoKey] as? NSValue {let endFrameMinY: CGFloat = endFrame.cgRectValue.minYlet beginFrameMinY: CGFloat = beginFrame.cgRectValue.minYself.keyboardHeight = beginFrameMinY - endFrameMinYif self.keyboardHeight < 0 { self.keyboardHeight = 0}  } }}

・まずはCombineををインポートします。

extensiondでキーボードを閉じる処理を定義

@ObservedObject var keyboard = KeyboardObserver()を生成します。

・TextFieldでkeyboardが出るように.keyboardType(.numberPad)を追加(今回はnumbadを採用)

・onApperで画面が開かれたときにkeyboardの設定をしています。

・keyboardのクラスを作成(ここではkeyboardを出し閉じをやっています)

キーボードの種類

keyboardの種類は何を入力して欲しいかで変えましょう。

今回のアプリは消費税を計算するアプリですので、数字のみを入力できるように

「numpad」を採用していました。

 

まとめ

keyboardは非常に便利なのですが、設定が細かくややこしいです。

TextFieldのプロパティとして追加すれば簡単にキーボード は出せますが、

閉じることができなかったりします。

なので困ってる方はぜひ参考にしてみてください。

 

最新情報をチェックしよう!
5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments