超簡単!!キーボードを表示する際にビューのレイアウトを変更する



# 概要

下の完成図のものを作ります。

完成図
![](https://i.gyazo.com/567e43b9d02660a03c3bbeb30da0100e.gif)


画面下にTextFieldが配置されていてキーボード表示とともにTextFieldも移動するように実装します。チャットのUIでよく見るあれです。

# StorybordからUIを作る


### 部品を配置する

![Main_storyboard_—_Edited_と_Gyazo_-_567e43b9d02660a03c3bbeb30da0100e.png](https://qiita-image-store.s3.amazonaws.com/0/48036/f387e3ce-ef5a-843a-5500-ffde7dc7dbf2.png "Main_storyboard_—_Edited_と_Gyazo_-_567e43b9d02660a03c3bbeb30da0100e.png")


### Auto Layoutを設定する

配置したUIView, UITextField, UIButtonにそれぞれ以下のようなAuto Layoutを設定します。

|UIViewの制約|値|
|:----------|:------|
|高さ|60px|
|下左右の余白|0px|

|UIButtonの制約|値|
|:----------|:------|
|高さ|30px|
|幅|60px|
|上の余白|150px|
|右の余白|8px|

|UITextFieldの制約|値|
|:----------|:------|
|上の余白|15px|
|左右の余白|8px|

UIViewの高さを60pxと固定して、UITextFieldとUIButtonの位置(y方向)を上からの余白で指定するのがポイントです。

### 関連付けをする

３つの部品をそれぞれ以下の名前で関連付けしました。

|関連付ける部品|名前|
|:-----------|:-------|
|UIView|dockView|
|UITextField|messageTextField|
|UIButton(Outlet)|sendButton|
|UIButton(Action)|sendButtonTap|

UI部品に加えAuto Layoutの制約もOutlet接続します。

UIViewの高さの制約である[Hight Constrains]を引っ張って関連付けします。

名前は``dockViewHeightConstrain``とします。

![Kobito.zLdHFq.png](https://qiita-image-store.s3.amazonaws.com/0/48036/3ebe50ea-a899-474a-66a5-1036d1ad35a6.png "Kobito.zLdHFq.png")




# ソースコードで実装する

```ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var dockViewHeightConstrain: NSLayoutConstraint!
    @IBOutlet weak var sendButton: UIButton!
    @IBOutlet weak var messaegTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()

		 //画面のタップ検出するジェスチャーを設定
        let tapGesture = UITapGestureRecognizer(target: self, action: "tableViewTapped")
        self.view.addGestureRecognizer(tapGesture)
        
        //NSNotificationCenterにてキーボードの表示/非表示の通知を登録
        let notificationCenter = NSNotificationCenter.defaultCenter()
        notificationCenter.addObserver(self, selector: "showKeyboard:", name: UIKeyboardWillShowNotification, object: nil)
        notificationCenter.addObserver(self, selector: "hideKeyboard:", name: UIKeyboardWillHideNotification, object: nil)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //キーボード表示される寸前
    func showKeyboard(notification: NSNotification) {
    	 
    	 //キーボードの大きさを取得
        let keyboardRect = notification.userInfo?[UIKeyboardFrameEndUserInfoKey]?.CGRectValue
        UIView.animateWithDuration(0.25, animations: {
        	　
        	　//キーボードの高さの分DockViewの高さをプラス
            self.dockViewHeightConstrain.constant = (keyboardRect?.size.height)! + 60
            self.view.layoutIfNeeded()
            }, completion: nil)
    }
    
    //キーボードが隠れる寸前
    func hideKeyboard(notification: NSNotification) {
        UIView.animateWithDuration(0.25, animations: {
        
        　　 //DockViewの高さを元の高さに戻す
            self.dockViewHeightConstrain.constant = 60
            self.view.layoutIfNeeded()
            }, completion: nil)
    }
    
    @IBAction func sendButtonTap(sender: UIButton) {
        self.messaegTextField.endEditing(true)
    }
    
    func tableViewTapped() {
        self.messaegTextField.endEditing(true)
    }

}

```

以上でやんす。




###参考
[How to Make a Simple iOS Chat App](https://www.youtube.com/watch?v=IVItNKOITxg&list=PLMRqhzcHGw1b2gX4gn5B3ILqiEF-UYei5)