【Swift】UITextViewの高さを入力内容に合わせて変える方法

2019年11月12日

この記事ではUITextViewに入力する内容の長さに合わせてTextViewの高さを変える方法を書いていきます。

完成図は以下です。

1.準備

まずはStoryboardの準備です。

画面下部にUITextViewとそのコンテナとなるUIViewを置きます。それぞれの制約は下記です。

①textViewのコンテナView

②textView

さらにはViewControllerへ3つのoutletを追加します。

  1. textView(UITextView)
  2. textViewHeight(UITextViewの高さ制約)
  3. textViewContainerHeight(コンテナUIViewの高さ制約)

ViewControllerは以下のようになっています。

2.入力内容に合わせてUITextViewの高さを変える

2-1.行が増えたら高さをあげる

まずは単純に入力内容が増えるに連れてUITextViewの高さもあげるところから始めます。

ViewControllerに以下を追加します。

 

順を追って見ていきます。

 

 

まずtranslatesAutoresizingMaskIntoConstraintsをtrueにして動的にtextViewのframeを更新できるようにします。その後、sizeToFit()で入力内容のサイズに合わせます。これだけですと横幅も入力内容のサイズにフィットしてしまうため、リサイズ後の高さだけを取得し、textViewのframeを再定義します。

これでtextViewは入力内容に沿ってどんどん高さが増えていきます。

次にtextViewのコンテナとなるUIViewの高さも一緒に増やす必要があります。ViewControllerに以下を追加します。

 

sizeToFit()でリサイズしたtextViewの高さが currentTextViewHeight(初期値はHiraginoSans Fontサイズ15の高さ)を上回る場合はその差分の高さをコンテナViewに付け足します。最後にtextViewの高さも更新されるため、currentTextViewHeightの値もリサイズ後の高さを代入します。

 

現時点でのViewControllerは以下です。

2-2.行が減ったら高さを下げる

今のままですと入力内容を削除してもtextViewの高さは増えたままですので、textViewの高さも増減できるようにします。

ViewControllerに以下を追加します。

 

else ifの部分が追加分です。

 

sizeToFit()でリサイズしたtextViewの高さが currentTextViewHeightを下回る場合はその差分の高さをコンテナViewから引きます。最後にtextViewの高さも更新されるため、currentTextViewHeightの値もリサイズ後の高さを代入します。

 

現時点でのViewControllerは以下です。

3.高さに制限を加えて、一定の高さに達するとスクロールに切り替える

このままですとtextViewの高さが無限に増えていくので、一定の高さに達したら高さを固定してスクロールに切り替えます。

ViewControllerに以下を加えます。

 

変更点を見ていきます。

 

今までのようにsizeToFit()を使ってしまうと、textViewがリサイズされてから高さを減らすことになってしまい表示がカクつくので使えません。

代わりにcontentSizeを使います。

contentSizeを使い、入力テキストの高さを取得し定義した最大の高さ(この記事では80.0)を超えた場合に isScrollEnabledをtrueにしてスクロール出来るようにします。

最終的にViewControllerは以下のようになっています。

 

以上、UITextViewの高さを入力内容に合わせて変える方法でした。

参考URL