【Swift】UITextViewの使い方。複数行を入力、改行もできるテキストフィールド。(Swift 2.1、XCode 7.2)

2020年6月16日

UITextViewとは

本記事ではSwiftで使える部品のUITextView(以下、テキストビュー)について説明する。

Text View

 

テキストビューとは、複数行の文字を入力できるフィールドである。

テキストビューに似ている部品にUlLabel(以下、ラベル)とUITextField(以下、テキストフィールド)がある。⇒「記事

ラベルは文字を表示するだけの部品で、ラベルをタップしてキーボードから直接ラベルの値を変更するような使い方ができない。テキストフィールドは文字を入力できる部品だが、入力できる行数が1行に制限されている。

一方、テキストビューは改行も含めて複数行を入力、表示できるので、長文を扱いたいときに役に立つ。

 

UITextViewを試す

テキストビューを実際に使ってみよう。

デバイス画面にテキストビューを配置する(下図赤枠)。背景色を分かりやすくするために、下図紫枠のアトリビュートインスペクタボタンを押して設定画面を開きBackgroundを黄緑色に変更する。ついでにPlainの中身を消してサンプルの文章を消しておく。

デバイス画面にText Viewを配置

 

このままシュミレーターを起動すればテキストビューをタップして文字を入力することができるが、キーボードを閉じることができない。

 

閉じるボタンを追加する

テキストフィールドの場合は「改行」ボタンを押したときのイベント検知からキーボードを閉じる処理を実装したが、テキストビューの「改行」ボタンはそのまま改行として機能させたい。

そこで、テキストビューではキーボードを閉じるための新たなボタンをキーボードに追加する。

下図紫枠のアシスタントエディタボタンを押してViewController.swiftを開く。ドラッグ&ドロップでテキストビューをソースコードまで運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testTextView」を入力してConnectボタンを押す。これでソースコードからテキストビューを操作できるようになった。

テキストビューとソースコードのコネクションを確立

 

ボタンを追加する方法について説明する。下図のような赤色のボタンを青色のビューに追加し、それをキーボードのアクセサリに登録する。ボタンはビューの右端に配置されるように画面の幅をもとに位置を算出する。ボタンの位置はビューの左角からの距離になるので、X方向に「画面幅ーボタン幅」、Y方向は0とする。

キーボードのアクセサリにボタンを直接登録することもできるが、その場合ボタンが幅いっぱいに押せてしまうため、このような方法をとっている。

閉じるボタンの配置イメージ

 

ViewController.swiftを開き、以下のコードに変更する。

UITextViewDelegateプロトコルを適用し、閉じるボタンが押されたときのメソッドでキーボードを閉じる。

 

以下が実際のプレイ動画

横画面でもボタンを右端に表示する

しかし、上記の実装には欠点がある。「閉じるボタン」の位置が固定されているため、画面を横に倒すと「閉じるボタン」が画面中央に表示されてしまうのだ。横画面に対応する場合はこれだと違和感がある。

 

そこで、ViewController.swiftを以下のように修正し、ボタンが必ずビューの右端に配置される制約を追加する。

具体的には、ボタンの幅の制約、高さの制約、ボタンの上端とビューの上端を同じにする制約、ボタンの右端とビューの右端を同じにする制約を追加する。

 

以下が実際のプレイ動画。縦画面、横画面の両方で「閉じるボタン」が右端に表示されるようになった。