【Swift】チャットアプリのUIをちょっとだけ良くしてみた

1.はじめに

こちらの記事は、下記の記事のUIを変更していく過程を記載しています。
【Swift】Firebase Realtime Database を用いてチャットアプリを爆速コーディングしてみた。

2.入力域にラベルの設定

↓↓↓↓↓↓↓ こんな感じに変更したいと思います。

UITextFieldの左端の制約を削除

UITextFieldの左側に設定されている、マージンの制約を選択します。
Deleteキーで削除します。

UILabelの追加

削除したら左側にスペースができるので、UILabelを追加します。
制約は、以下で設定。
左側: 15, 右側: 15

相対的な制約の設定

この状態だとまだ制約が不十分なため、UILabelの周りが赤くなっています。
不足しているのは、Y座標の位置になります。
「name:」UILabelとUITextFieldを選択した状態で、「Vertical Centers」を選択します。
そうすることで、UILabelとUITextFieldの位置関係が水平になります。

同様にメッセージ入力欄も変更します。※省略

ボタンの色変更

Textの色変更、背景色の変更は、赤枠の箇所で変更できます。

これで入力域のラベル設定・ボタンの色変更が完了

3.背景色の変更

画面自体の背景をグレーに変更してみました。

4.ボタンの角丸化

下記の箇所に以下を追加。
layer.cornerRadius

GitHubはこちら