可変するUITextviewの高さに応じて背景のUIViewの高さを変化させたい

Question

わからないこと
ピンク色のUIViewの中に配置した水色のUITextviewを文字量に応じて高さが伸びるように設定したのですが、
一番高い時にtextviewがUIViewからはみ出してしまいます。

やりたいこと
可変するUITextviewの高さに応じて背景のUIViewの高さを変化させたいのですが、どのような方法がありますでしょうか？

コード

import UIKit

class ViewController: UIViewController,UITextViewDelegate {
  
  let MIN_HEIGHT_MSG: CGFloat = 40
  let MAX_HEIGHT_MSG: CGFloat = 100

  @IBOutlet weak var msg: UITextView!
  
  override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    msg.delegate = self
    }
  
  func textViewDidChange(_ textView: UITextView) {
    drawBox()
  }

  // メッセージBOXの設定
  func drawBox() {
    var height = msg.sizeThatFits(CGSize(width: msg.frame.size.width, height: CGFloat.greatestFiniteMagnitude)).height
      
    if height < MIN_HEIGHT_MSG {
      height = MIN_HEIGHT_MSG
    } else if MAX_HEIGHT_MSG < height {
      height = MAX_HEIGHT_MSG
    }
      
    // textviewの位置調整
    msg.frame = CGRect(x: msg.frame.origin.x, y: msg.frame.origin.y, width: msg.frame.width, height: height)
  }
 
}

追記
UIViewを以下のようにCGRectで指定したところ高さは可変するようになったのですが今度はtextviewの高さが不変になりました。

    // textviewの位置調整
    msg.frame = CGRect(x: msg.frame.origin.x, y: msg.frame.origin.y, width: msg.frame.width, height: height)
　　// 新たに背景のUIViewの高さも動くように設定
    backui.frame = CGRect(x: backui.frame.origin.x, y: backui.frame.origin.y , width: backui.frame.width, height: height + backui.frame.height)

５行ほどUITextViewにて改行を行った時のUIView

追記2
AutoLayout Storyboard

追記3
StoryBoard

コード

  /// キーボードが表示時に画面をずらす。
  @objc func keyboardWillShow(_ notification: Notification?) {
    
    let keyboardFrame = (notification?.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue
    let duration = notification?.userInfo?[UIKeyboardAnimationDurationUserInfoKey]
    
    UIView.animate(withDuration: duration as! TimeInterval, animations: {
      let transform = CGAffineTransform(translationX: 0, y: -(keyboardFrame?.size.height)!)
      self.view.transform = transform
    },completion:nil)
    topview.isHidden = false
    subwriteviewconstraint.constant = 71
  }

無事動きましたm(_ _)m

Comments

[hayabusabusash]

AutoLayoutの制約は設定していたりしますか？
また、Storyboard等でレイアウトを組んでいたらスクショを貼ることは可能ですか？

[maplemee]

ありがとうございます。
StoryboardにてAutoLayoutを設定しています。
スクショを追記に載せました。

Answer 1

追記ありがとうございます。確認しました。

今回の要件なら特別コードを書かなくても、Auto Layoutのみで解決することができます。
まず背景のViewの上にTextViewをのせる形でレイアウトを作成します。

次に背景のViewに対してAuto Layoutの制約を付けていきます。
とりあえず**Y座標は画面の真ん中、幅は画面両端から24px(※)**の制約を追加します。
この状態では背景のViewの高さを決定する制約がないためエラーが出ます。

次にTextViewに対して制約を追加していきます。
まずTextViewのScrolling Enabledをオフにします。
こうすることでTextViewの高さ(intrinsicContentSize)は中のテキストに応じて変化するようになります。

この状態で背景のViewに対して縦横に8pxの余白を設けるように制約を追加します。

これで実行すれば中のテキストに応じて背景のViewも伸びるようになるはずです。

※ 幅に対する制約がない場合はTextViewが横に伸びてしまうため必須です。

追記(2019/10/03)

入力Viewの上と下に隣り合ってTextViewが入ったViewが挟まったレイアウトで同じようにtextviewの高さだけ伸縮させたい

ということなので、
こういう時にはUIStackViewを使うといいと思います。(参考)

先ほどと同じように背景のViewとTextViewのセットを用意します。
ただし、背景のViewに対して幅やY座標の制約は付けないでください。TextViewの上下左右の余白のみ設定した状態にしてください。

この背景とTextViewのセットと上下のUIViewを選択した状態で、
Embed InからStackViewを選択します。

これで3つのViewがStackViewに包まれている状態になります。
次にStackViewの設定を変更します。

• Axis: Vertical
• Alignment: Fill
• Distribution: Equal Spacing
• Spacing: 0

あとはこのStackViewに対して制約を追加します。
見たところ画面のしたに配置しているので、左右と下の余白を0になるような制約を追加しました。

以上でやりたいことはできるんじゃないかなと思います。

Comments

[maplemee]

丁寧にありがとうございました。無事解決しました。
追加質問にご回答いただければ幸いなのですが、最終的に作りたい画面では(追記3に載せました)
入力Viewの上と下に隣り合ってTextViewが入ったViewが挟まったレイアウトで同じようにtextviewの高さだけ伸縮させたいのですが、このような場合はどうAutoLayoutを設定すればよいでしょうかm(_ _)m

[hayabusabusash]

ついでなので回答します。
次回以降は違う質問として新しくたてた方がいいと思います????‍♂️
この上下のViewもTextViewですか？

[maplemee]

ごめんなさいm(_ _)m　以後気をつけます。
上下はUIViewになっています。

[hayabusabusash]

わかりました。
ちょっと追記しますので、少々お待ちください????‍♂️

[maplemee]

一度入門書でStackViewという物が書かれていたのですが(そこでは軽く紹介だけ)、
まさかこのような形で応用させることが出来るとはほとんどその知識を今までスルーしていましたm(_ _)m
書物やネットで調べてはいるのですがお恥ずかしながらここが１番の疑問が解決出来ると思い、
勝手ながらですが追加質問をしていました。とても助かりました！
この度は本当にありがとうございました。

[hayabusabusash]

実現できたようでよかったです????
StackViewは非常に応用が効くものなのでぜひ色々試してみてください。