【徒然iOS】気ままにUIKit40〜制約を変更してテキストフィールドやテキストビューがキーボードと被らないようにする方法〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をレッツゴ🕺
前準備
ここも前々回、
の続きの様子👀なので、
バックアップだけ取って、
前回やった
の続きにそのまま組み込んでく〜〜〜！！！！
本題
⒈テキストビューをキーボードと被りそうな場所に移動
ここで、今回はキーボードを出現させないといけないので、前回の最後で外したEditableのチェックを入れておく！
⒉サイズと距離の制約追加のため、右と下のマークをクリックし、WidthとHeightにチェックを入れ、Add 4 Constraintsボタンを押す。
⒊Bottom Layoutをアウトレット接続
⒋コードを組み込む
サイト記事の最後のコードで追加箇所だけ追加すると、、、
今回のコード（まとめ）
class TextViewStandardLotateRightController: UIViewController, UITextViewDelegate {
@IBOutlet weak var myRightTextView: UITextView!
@IBOutlet weak var myBottomConstraint: NSLayoutConstraint!
var allY:CGFloat = 0.0
override func viewDidLoad() {
super.viewDidLoad()
//ビューを作成する。
let myRightView = UIView()
myRightView.frame.size.height = 60
myRightView.backgroundColor = UIColor.blue
//閉じるボタンを作成する。
let closeButton = UIButton()
closeButton.setTitle("閉じる", for:UIControl.State.normal)
closeButton.backgroundColor = UIColor.red
closeButton.addTarget(self,action:#selector(TextViewStandardController.onClickCloseButton(_:)), for: .touchUpInside)
//ビューに閉じるボタンを追加する。
myRightView.addSubview(closeButton)
//Autoresizingの変換をオフにする。
closeButton.translatesAutoresizingMaskIntoConstraints = false
//ボタンの幅の制約を追加する。
myRightView.addConstraint(NSLayoutConstraint(
item: closeButton,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .width,
multiplier: 0.0,
constant: 70)
)
//ボタンの高さの制約を追加する。
myRightView.addConstraint(NSLayoutConstraint(
item: closeButton,
attribute: .height,
relatedBy: .equal,
toItem: nil,
attribute: .height,
multiplier: 0.0,
constant: 50)
)
//ボタンの右端とビューの右端を揃える制約を追加する。
myRightView.addConstraint(NSLayoutConstraint(
item: closeButton,
attribute: NSLayoutConstraint.Attribute.trailing,
relatedBy: NSLayoutConstraint.Relation.equal,
toItem: myRightView,
attribute: NSLayoutConstraint.Attribute.trailing,
multiplier: 1.0,
constant: 0))
//ボタンの上端とビューの上端を揃える制約を追加する。
myRightView.addConstraint(NSLayoutConstraint(
item: closeButton,
attribute: NSLayoutConstraint.Attribute.top,
relatedBy: NSLayoutConstraint.Relation.equal,
toItem: myRightView,
attribute: NSLayoutConstraint.Attribute.top,
multiplier: 1.0,
constant: 0)
)
//キーボードにビューを追加する。
myRightTextView.inputAccessoryView = myRightView
//テキストビューのデリゲート先にこのインスタンスを設定する。
myRightTextView.delegate = self
//キーボードが現れるときに通知するメソッドを登録する。
NotificationCenter.default.addObserver(self, selector: #selector(self.keyboardWillBeShown(_:)), name: UIResponder.keyboardWillShowNotification, object: nil)
}
//閉じるボタンで呼び出されるメソッド
@objc func onClickCloseButton(_ sender: UIButton) {
myRightTextView.resignFirstResponder()
//テキストビューの位置を元に戻す。
if(allY > 0) {
myBottomConstraint.constant -= allY
UIView.animate(withDuration: 0.5, animations:{ self.view.layoutIfNeeded()})
}
allY = 0.0
}
//キーボードが開くときの呼び出しメソッド
@objc func keyboardWillBeShown(_ notification:NSNotification) {
//キーボードのフレームを取得する。
if let keyboardFrame = notification.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as? CGRect{
//テキストビューの最大Y座標と、キーボードの最小Y座標の差を計算する。
let zureY = CGRectGetMaxY(myRightTextView.frame) - CGRectGetMinY(keyboardFrame)
if (zureY > 0) {
//テキストビューの垂直方向の位置の制約に差分をプラスする。
myBottomConstraint.constant += zureY
allY += zureY
//アニメーションさせる。
UIView.animate(withDuration: 0.5, animations:{ self.view.layoutIfNeeded()})
}
}
}
}コードの修正でうまくいかないときは、、、、
なんかも参考になるかも💦
＊エクステンションとか絡むのであまりお勧めはしない
👉コードが複雑になるので、、、
⒌シミュレータを実行
ハイ、記事の内容としては以上。
⒍ブラッシュアップ
今回も特にここまででAutoLayoutもやっているので、特にやることなしのため割愛
Apple公式
さて、次回は
をレッツゴ🕺
いよいよ、スクロールビューだね〜〜〜〜
今ちょうど、
前々回の記事でも最後に書いてた
を平日は、やってる真っ最中で今月中まで色々作り込んだりで時間がかかりそう💦
こちらの記事はまた週末の土日、時間がある時にやります💦
UIKitの記事を楽しみにしてる人は、
🙇🙇♀️🙇♂️しばらくペースが落ちますがご容赦お願いします🙇🙇♀️🙇♂️
新しい技術のネタを仕込んでますので💦💦💦