Viewを使って入力欄とキーボードが被らないようにする方法。Viewを使って入力欄とキーボードが被らないようにする方法。View(以下、スクロールビュー)を用いてキーボードと被らないようにする方法を説明する。制約を変更する方法と考え方が同じところもあるので、まだ読んでない方は先に読んでおくことをお勧めする。これから作るもの下図のように320×1000ピクセルの縦長の画像を配置して、スクロールビューでその画像を縦方向に移動できるようにする。画像をアップしておくので、実装を試す人はご利用されたし。Field(以下、テキストフィールド)と2つのテキストビューを配置する。以降はこの3つの部品を「入力欄」と表現する。キーボードが出現したときに入力欄と被ってしまう場合、被っている長さぶん部品が上にずれる仕組みを実装する。画面が全体的にスクロールされるイメージだ。部品を準備するデバイス画面にスクロールビューを配置する(下図赤枠)。黄緑枠のPinボタンを押して吹き出しの設定画面を表示させて、Viewに対する上下左右の距離に0を入力する(紫枠)。チェックを外すのと、Viewからの距離になるように「▼」ボタンを押してViewにチェックを入れること。Constraints」ボタンを押す。これで、スクロールビューの大きさが画面サイズと一致する制約が追加された。次に画像ファイルをプロジェクトに追加する(下図赤枠)。追加する方法は次の記事を参照されたし。⇒「プロジェクトにファイルを追加する」イメージビューをスクロールビューの中に配置する(下図青矢印)。イメージビューが選択された状態のまま黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Imageに画像ファイル名を入力する(sample_img.png)。紫枠のPinボタンを押して吹き出しの設定画面を表示し、スクロールビューに対する上下左右の距離をすべて0に設定する。Constraints」ボタンを押す。これでイメージビューをスクロールして見るための制約が追加された。今回はスクロール範囲の下のほうにテキストビューを配置するので、画面を見やすくするためにストーリーボード上の画面サイズを変更しよう。Controllerをクリック、黄緑枠のサイズインスペクタボタンを押して設定画面を表示する。Sizeを「Freedom」、Heightを「1000」に変更する。これで、ストリーボード上の画面サイズが縦長になった。この変更はXcodeで縦長に見えるだけで、実機の表示には影響しない。下図紫枠の「View」をクリック、黄緑枠のResolveボタンを押して吹き出しの設定画面を表示する。Frames」を選択する。これで、画像が制約どおりの表示になった。次に、テキストフィールドをスクロールビューの中に配置する(下図赤矢印)。テキストフィールドを選択したまま、紫枠のPinボタンを押して吹き出しの設定画面を表示する。黄緑枠の距離の制約に上「520」、左「30」、右「30」を入力する(下の制約は追加しない)。Constraints」ボタンを押す。これでテキストフィールドの配置完了。次にテキストビューをスクロールビューの中に配置する(下図紫矢印)。テキストビューを選択したまま、赤枠のアトリビュートインスペクタボタンを押して設定画面を表示しTextのサンプル文章を削除する。黄緑枠のPinボタンを押して吹き出しの設定画面を表示し、水色枠の距離の制約に上「40」、左「30」、右「30」を入力する(下の制約は追加しない)。Constraints」ボタンを押す。次に2個目のテキストビューをスクロールビューの中に配置する(下図黄緑矢印)。テキストビューを選択したまま、紫枠のアトリビュートインスペクタボタンを押して設定画面を表示しTextのサンプル文章を削除する。赤枠のPinボタンを押して吹き出しの設定画面を表示し、水色枠の距離の制約に上「40」、左「30」、右「30」を入力する(下の制約は追加しない)。Constraints」ボタンを押す。これで、部品の配置が完了した。ここで一旦動作確認をしよう。部品とソースコードのコネクションを確立する次に下図赤枠のアシスタントエディタボタンを押してViewController.swiftを開く。デバイス画面にあるテキストフィールドをドラッグ&ドロップでソースコードまで運び、吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testTextField」を入力し、Connectボタンを押す。テキストビューとスクロールビューも同様にドラッグ&ドロップでソースコードに運び、テキストビューのNameは「testTextView1」と「testTextView2」、スクロールビューのNameは「testScrollView」でコネクションを確立する。これで部品をソースコードから操作できるようになった。次に、テキストフィールドをドラッグ&ドロップでソースコードに運び吹き出しの設定画面を表示させる。Exit」を設定し、Connectボタンを押す。これで、テキストフィールドのキーボードはReturnキーを押すと閉じられるようになった。キーボードに「閉じるボタン」を追加する次にテキストビューをタップしたときに表示されるキーボードに「閉じるボタン」を追加しよう。ViewController.swiftを開き、以下のように変更する。「閉じるボタン」を追加する理由の詳細は次の記事を参照されたし。//ビューを作成する。//「閉じるボタン」を作成する。//ビューに「閉じるボタン」を追加する。//キーボードのアクセサリにビューを設定する。{super.viewDidLoad()//ビューを作成する。UIColor.blueColor()//「閉じるボタン」を作成する。.TouchUpInside)//ビューに「閉じるボタン」を追加する。testView.addSubview(closeButton)//キーボードのアクセサリにビューを設定する。{//キーボードを閉じるtestTextView1.resignFirstResponder()testTextView2.resignFirstResponder()}}ここまでで動作確認をしておく。テキストフィールドはReturnボタン、テキストビューは「閉じるボタン」でキーボードが閉じられるようになった。スクロールビューの移動を実装する。キーボードと入力欄の被る被らないの判定は、前回記事と同じように入力欄の最大距離がキーボードの最小距離より大きい場合に被っていると判断する。前回記事と同じ判定方法を用いる場合、1つ留意点がある。下図のように、テキストフィールドに対するframeプロパティの距離はビューの最上端からの距離になり、一方、キーボードのフレームは画面上端からの距離となることだ。判定にはスクロールビューの現在位置を考慮して計算する必要がある。キーボードのY座標」を判定材料とし、被ると判定された場合は、スクロールビューの現在のY座標に被る距離を加算してスクロールさせる。//キーボードのフレームを取得する。{//キーボードのフレームを取得する。zureY}}}「キーボードが開くときの呼び出しメソッド」は3つの部品から共通で呼ばれるメソッドとして実装する。共通といえども、タップされた部品のY座標を計算に使うので、メソッドが呼ばれたときにどの部品がタップされたのかを知る必要がある。そこで、下図のデリゲートメソッドを追加し、編集が始まる前に編集部品のインスタンスをクラス変数に格納しておく。「キーボードが開くときの呼び出しメソッド」が呼び出されたらこのクラス変数を利用して計算する。true}キーボードが閉じられるときの呼び出しメソッドも3つの部品で共通にする。//スクロールビューの位置を元に戻す。keyboardWillBeHidden(notification:NSNotification){//スクロールビューの位置を元に戻す。0}ちなみに、スクロールビューのY座標を変更するときに、スクロールビューのcontentInsetプロパティの値にも被った距離を設定している。contentInsetプロパティとは、スクロール可能な範囲を増減できるプロパティである。このプロパティを変更しておかないと、以下の動画のように、画面下部でテキストビューをタップしたときにスクロール可能範囲を超えるためにスクロールがうまくできない事象が発生する。最終的にViewController.swiftは以下のコードになった。//ビューを作成する。//「閉じるボタン」を作成する。//ビューに「閉じるボタン」を追加する。//キーボードのアクセサリにビューを設定する。//キーボードが現れるときに通知するメソッドを登録する。//部品のデリゲート先に自分を設定する。//キーボードのフレームを取得する。//スクロールビューの位置を元に戻す。{super.viewDidLoad()//ビューを作成する。UIColor.blueColor()//「閉じるボタン」を作成する。.TouchUpInside)//ビューに「閉じるボタン」を追加する。testView.addSubview(closeButton)//キーボードのアクセサリにビューを設定する。testView//キーボードが現れるときに通知するメソッドを登録する。nil)//部品のデリゲート先に自分を設定する。{//キーボードのフレームを取得する。keyboardWillBeHidden(notification:NSNotification){//スクロールビューの位置を元に戻す。【Swift】制約を変更してテキストフィールドやテキストビューがキーボードと被らないようにする方法。Controllerの設定。画面遷移のアニメーションを変更する。...【Swift】UITextViewの使い方。複数行を入力、改行もできるテキストフィールド。Controlを使ってページを移動する方法。検索を補助してくれる部品を追加する。コメントをキャンセルメールアドレスが公開されることはありません。