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는 이쪽