[Swift-TIL] 간단하게 UIKit으로 화면 만들어보기

음... 이번엔

간단하게 UIKit으로 화면을

만들어본 내용으로

글을 끄적여 보려고 한다.

뭘 만들어보는거냐?

 

이름을 입력 받아서

인사를 하는 화면을 만들어볼까 한다.

 

너무 간단한가?

 

근데 뭐...

이런거 한두개 만들다 보면,

뭔가 뿌듯한 부분이 있어서

취미로 그냥 만들어보는거다.

 

뭔가 텍스트로 이름을 입력 받고

버튼을 누르면

안녕? Noel!

이라는 말을 들어보고 싶었다.

 

굉장히 심플하면서 간단 할

것이라고 생각된다.

 

디버깅 컬러를 써서

만들어볼까 하는데,

사실 스위프트UI보단 어렵다..

 

UIKit으로 화면을 그리는게

굉장히 자유롭기 때문에

크기 배정하는것도

생각보다 어렵기 때문에

조금은 천천히 가는게 좋다.

---

첨에 만들어 둔 뷰 컨트롤러인데,

이건 쓰지 않을 예정이니

커맨드+쉬프트+L로

새로운 뷰 컨트롤러를

꺼낼꺼다.

이렇게 새로운 뷰 컨트롤러를 꺼내주고,

인스펙터에서 Is Initial View Controller를 눌러주면,

기존에 만들어둔 뷰 컨트롤러에서

화살표가 옮겨간것을 확인할 수 있다.

 

스토리보드 엔트리 포인트인데,

시뮬레이터에서 제일 먼저 보여주는

화면 인 것이다.

왼쪽의 뷰 컨트롤러는

클래스가 있는데 반면,

오른쪽은 클래스가 없으니

하나 만들어주겠다.

이전 스위프트UI에서는 그냥

스위프트UI 뷰를 만들면 되었는데,

UI킷을 쓸 때에는 코코아 터치 클래스를

즉, 코코아 터치 프레임워크 안에 있는

UI킷을 쓰는 것이다.

 

이렇게 잘 만들어진 걸 확인했고,

MyViewController 클래스이고,

UIViewController를 상속을 받았기 때문에

View를 가지고 있을 꺼다.

궁금하면, 커맨드 버튼을

누른상태로 UIViewController를

찍어보면 된다.

 

이 뷰에 배경색을 줘보겠다.

엇!? 이상하다..

배경색을 빨간색으로 줬는데

왜 안되는걸까?

 

이유는 단순하다.

 

스토리보드의 뷰컨트롤러를

연결해주지 않았기 때문이다.

 

이렇게 M자만 쳐도

자동으로 입력이 되어지고

클래스를 설정해주고 빌드해주면

이렇게 잘 연결된걸 알 수 있었다.

이렇게 연결이 잘 되었는지 안되었는지

정확하게 파악하기 위해서

이러한 디버깅 컬러를 쓰는게 좋을 것 같다.

 

이제 입력을 받아서 무언갈 더해서

답이 나오도록 하는걸 구현해보고자 한다.

 

딱 필요한게 3개있다.

 

첫번째

텍스트나 데이터를 

입력할 수 있는 무언가

"텍스트 필드"가 있겠다.

 

두번째

입력한 데이터를 처리하는

동작을 트리거하는 무언가

"버튼"이 있겠다.

 

세번째

입력값을 처리한 결과를 

사용자에게 보여주는 무언가

"레이블"이 있겠다.

우선은 요롷게 해두겠다.

시뮬레이터에서도 잘 나온다.

 

이렇게 3가지의

컴포넌트들을 넣어줬으니

우선은 연결을 해주겠다.

화면분할을 하고

다 연결해주겠다.

이런식으로 다 연결을 해줬다.

버튼의 경우 액션이 필요하기 때문에

액션을 연결했다.

 

만약 연결이 잘되어있는지

확인하고 싶다면

이런식으로 연결을 확인 할 수 있다.

 

인스펙터의 맨 오른쪽

요기서도 확인할 수 있다.

 

그렇다면

이제 잘 연결된걸 확인했으니

본격적으로 프린트를 해보겠다.

버튼을 누르면

"Hi! Noel!" 이라는 메세지가

출력되게끔 했다.

 

스토리 보드상에서는

저걸 확인하기엔 어렵고

시뮬레이터에서 확인을 하는게 좋다.

이렇게 프린트 함수가

잘 작동하는걸 알 수 있다.

 

그렇다면,

버튼을 눌렀을 때

레이블의 내용이 바뀌도록

함수를 작성해보았다.

음.. 되는것 같은데,

레이블 가로 사이즈를

임의로 늘려주면 잘 나올꺼다.

잘 나온다.

일단은 얘도 배경색을 주겠다.

투명했을 때와는

영역이 다르기 때문에

만약에 이 버튼이 레이블의

아래에 위치했다면

버튼이 눌리지 않았을 꺼다.

 

아무튼 버튼이 눌렸을 때 레이블도

바꿔주겟끔 해줘봤다.

 

그러면 이제

테스트 필드에 입력된 값을

넣어주고 싶다.

 

이렇게 해주고 실행해봤더니

뭔가 바뀌긴 했는데

아마 원인이 있을거다.

이 문제는

"String interpolation은

optional value를 위한 걸 넣어주는데,

이렇게 하면 optional 값이 같이 찍힌다.

어떻게 할꺼냐?!" 라고 물어보는거다.

 

일단은 뭐... 방법은 있다.

if let name 은 이름이 있을 때만

hiLabel.text = "Hi! \(name)"

요렇게 넣어주면 되는거다.

 

옵셔널 값이 있다면,

이렇게 옵셔널 값을 까줘서

옵셔널 바인딩을 해줘서

쓰면 되는거다.

이렇게 잘 되는걸 볼 수 있다.

UI만 조금 다듬어보겠다.

텍스트 필드는

위에서 200, 왼쪽에서 50,

오른쪽에서 10, 가로사이즈 200

이렇게 해주게 되면

버튼이 어디로 가야할지 모르니까

버튼은 음.. 일단 이름을 바꾸겠다.

지금 현재 위, 아래가

빨간색으로 보이는데,

높낮이가 어떻게 되어야 하는지

갈피를 못잡고 있는 상황이다.

 

컨트롤 드래그 해서

이렇게 텍스트 필드와 같은

높이로 맞춰지게 끔 설정한거다.

 

그리고 이 버튼에도

제약을 맞춰주면 되겠다.

제약을 왼쪽 텍스트 필드와 동일하게

오른쪽에 50주었다.

그리고 배경색을 보라색

글자색도 흰색으로 바꿔줬다.

 

이제 레이블은

얘만 혼자 동떨어져 있는것보단,

가운데정렬 되어 있는게

보기좋아서 가운데정렬 해주었고,

위에서 100정도 떨어지게 했고,

근데 이게 버튼에 붙게 되었는데,

버튼에 붙는게 싫으면

이런식으로 인스펙터에서 바로

바꿔줄 수 있다.

그리고 얘 같은 경우엔

왼쪽 20 오른쪽 20 걸어둘까 했는데

그냥 맞추려고 50 50 줬다.

한가지 꿀팁이 있다면,

이 레이블은 위 텍스트 필드의

왼쪽이 70으로 바뀌면,

이 레이블도 함께 70으로 바뀌는게

사실 맞는 거라고 생각한다.

 

그러면 인스펙터에서

이런식으로 지금 걸려있는

제약을 지워주고

드래그앤 드롭을 해서

이런식으로 해주면 된다.

이렇게 해주면

텍스트필드의 리딩이 늘어나면,

레이블의 리딩도 늘어나게 되고

버튼의 트레일링이 늘어나면

레이블의 트레일링도 같이 늘어나게 된다.

이래서 오토레이아웃도

연습을 꾸준히 해야한다.

결과적으로 이렇게 나온다.

이렇게 아주 간단하게 UIKit으로

화면을 완성해봤다.