XcodeでScroll View自身とScrollVIew内の部品にAuto Layoutを適用させたい。

Question

XcodeでScroll View自身とScrollVIew内の部品にAuto Layoutを適用させたいです。
いつも通り、Scroll View内の部品に制約をつけるとビルドした時に真っ白になってしまします。何か方法はありますか？

具体的にしたいこととしては、text Fieldを編集するときにtext FIeldが隠れないようにしたいです。
コードは参考サイトと全く同じように書きました。

参考サイト

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var scrollview: UIScrollView!
    @IBOutlet weak var textView: UITextField!
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var orange: UIView!
    
    var screenHeight:CGFloat!
    // Screenの幅
    var screenWidth:CGFloat!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollview.delegate = (self as? UIScrollViewDelegate)
        textView.delegate = self as? UITextFieldDelegate
        // Do any additional setup after loading the view, typically from a nib.
        
        let screenSize: CGRect = UIScreen.main.bounds
        screenWidth = screenSize.width
        screenHeight = screenSize.height
        scrollview.frame.size =
            CGSize(width: screenWidth, height: screenHeight)
        scrollview.addSubview(orange)
        scrollview.addSubview(label)
        scrollview.addSubview(textView)
        scrollview.contentSize = CGSize(width: screenWidth, height: screenHeight*2)
        scrollview.bounces = false
        print("screenWidth:(screenWidth)")
        print("screenHeight:(screenHeight)")
        
    }
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        self.view.endEditing(true)
        return true
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(ViewController.keyboardWillShow(_:)),
                                               name: NSNotification.Name.UIKeyboardWillShow,
                                               object: nil)
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(ViewController.keyboardWillHide(_:)) ,
                                               name: NSNotification.Name.UIKeyboardWillHide,
                                               object: nil)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        NotificationCenter.default.removeObserver(self,
                                                  name: .UIKeyboardWillShow,
                                                  object: self.view.window)
        NotificationCenter.default.removeObserver(self,
                                                  name: .UIKeyboardDidHide,
                                                  object: self.view.window)
    }
    
    @objc func keyboardWillShow(_ notification: Notification) {
        
        let info = notification.userInfo!
        
        let keyboardFrame = (info[UIKeyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
        
        // bottom of textField
        let bottomTextField = textView.frame.origin.y + textView.frame.height
        // top of keyboard
        let topKeyboard = screenHeight - keyboardFrame.size.height
        // 重なり
        let distance = bottomTextField - topKeyboard
        
        if distance >= 0 {
            // scrollViewのコンテツを上へオフセット + 20.0(追加のオフセット)
            scrollview.contentOffset.y = distance + 20.0
        }
    }
    
    @objc func keyboardWillHide(_ notification: Notification) {
        scrollview.contentOffset.y = 0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Comments

[t_obara]

問題が発生する、あるいはうまく動作しない最小限のコードをご提示されると回答がつきやすくなると思いますよ。

[Tommy716]

言葉不足ですみません。参考サイトと全く同じようにやりました。

[xAxis]

全く同じじゃないから機能してないんじゃないかと。参考サイトのコードを読む限り問題はないですし。

[Tommy716]

申し訳ないです。コードを追加しました

[xAxis]

参考サイトのコードに問題ないとか抜かしてしまいましたが問題ありですね。すいません。

[t_obara]

部品の制約はstoryboardで行ったのでしょうか？制約を外すと期待通り動作するのでしょうか？

[Tommy716]

xAxis様 いえいえ全然大丈夫です。

[Tommy716]

t_obara様　制約はstoryboard上で行いました。制約を外すと、期待通り動作するのですが、iPadやiPhoneXなどでは変な余白が出てしまいそれを治したいと思っています。

[t_obara]

であれば、どの様な制約をつけたのかもご提示されると回答が得られやすいのではないでしょうか。https://virusee.net/hidden-ios-keyboard/ ちなみに、こちらで同様のことをされていますが、うまく動作するのかはわかりません。

Answer 1

まずDelegateが必要ならばAuto Layout以前にクラス名のとなりにUIScrollViewDelegateとUITextFieldDelegateを書きましょう。

class ViewController: UIViewController, UIScrollViewDelegate, UITextFieldDelegate {

んで、viewDidLoad()内の

scrollview.delegate = (self as? UIScrollViewDelegate)
textView.delegate = self as? UITextFieldDelegate

を

scrollview.delegate = self
textView.delegate = self

としましょう。

UIScrollViewとその他パーツをAuto Layoutで設定するには

ここからが本題です。
サイトではUIScrollView等UIをコードで生成、設定している様ですがAuto Layoutだけで作ることも可能です。よくやるのがUIScrollViewの子ViewにUIViewを設定してそいつをContent Viewとするやり方です。UITableViewCellとその中のContent Viewと同じ様な関係ですね。今回は上下にスクロールするやり方です。

1. UIScrollViewと子ViewであるUIView(Content View)共にconstraintsを上下左右0に設定。
2. ContentViewであるUIViewのwidthをViewController.viewとequalに設定。
3. ContentViewの高さはお好みで。ただしUIScrollViewのheight以上の高さを設定する必要がある。
4. 後はContentViewに必要なUILabelやUISlider、UITextField、UIButton等をのせて各々に制約をつけていく。
5. 完成

UIScrollViewは子Viewが自身の領域外にある場合、スクロールできる様になっています。逆にUIScrollViewと子Viewが全く同一の制約を持った場合スクロールしません。なのでContentViewのheightは必ずUIScrollViewのheight以上にしましょう。

参考に画像を載せておきます。

この画像ではUIScrollViewにUIView(Content View)をのせ、Content ViewにUILabel、UISlider、UITextField、UIButtonを載せています（UIButtonはContentViewのbottom+16に設定しているので見えません）。サイトの構成に似せるためにContentViewのheightはUIScrollViewのheightの倍になっています。

さて、サイトに乗っているコードの何が気になるかというとIBOutlet接続されたscrollViewにIBOutlet接続されたUI群をaddSubViewしているところです。本来Storyboardに配置された時点でほぼaddSubViewしている様なもののはずが再度addSubViewするのはおかしいのではないかと思い上記の様なコメントをしました。ただしこの辺りは自分も解釈があやふやな部分もあるためおかしな所がありましたらご教授いただけると幸いです。

参考程度のコードを一応貼っておきます。細かいところまでは大して読んでいないので本当に参考程度ですが。

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var scrollView: UIScrollView!
    @IBOutlet var textField: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(ViewController.keyboardWillShow(_:)),
                                               name: NSNotification.Name.UIKeyboardWillShow,
                                               object: nil)
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(ViewController.keyboardWillHide(_:)) ,
                                               name: NSNotification.Name.UIKeyboardWillHide,
                                               object: nil)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        NotificationCenter.default.removeObserver(self,
                                                  name: .UIKeyboardWillShow,
                                                  object: self.view.window)
        NotificationCenter.default.removeObserver(self,
                                                  name: .UIKeyboardDidHide,
                                                  object: self.view.window)
    }
    @objc func keyboardWillShow(_ notification: Notification) {
        
        let info = notification.userInfo!
        
        let keyboardFrame = (info[UIKeyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
        
        // bottom of textField
        let bottomTextField = textField.frame.origin.y + textField.frame.height
        // top of keyboard
        let topKeyboard = UIScreen.main.bounds.height - keyboardFrame.size.height
        // 重なり
        let distance = bottomTextField - topKeyboard
        
        if distance >= 0 {
            // scrollViewのコンテツを上へオフセット + 20.0(追加のオフセット)
            scrollView.contentOffset.y = distance + 20.0
        }
    }
    
    @objc func keyboardWillHide(_ notification: Notification) {
        scrollView.contentOffset.y = 0
    }

}

Comments

[Tommy716]

できました！ご丁寧にありがとうございました。