[Xcode] UILabel, UITextField, UIButton(action)

안녕하세요~!! 오랜만에 포스팅입니다.

오늘은 제목과 같이 iOS 개발에 있어서 필수적인 UI에 관한 설명입니다.

 

간략하게 설명부터 드릴게요

 

                                            UILabel: Text 등을 보여주는 UI

                                            UITextField: 사용자가 키패드를 사용해 Text를 입력받는 UI

                                            UIButton: 클릭하였을 때 행동을 추가할 수 있는 UI (이미지, 글씨 넣을 수 있음)

 

UI란 User Interface의 줄임말로,

기계와 사용자가 소통할 수 있도록 보여주는 화면이라고 간단하게 생각하면 될 것 같습니다.

 

대충 느낌은 오시죠??

글씨를 입력해 버튼을 눌렀을 때 UILabel이 변하는 UI를 만들어 보겠습니다.

그럼 바로 실전으로 들어가 보겠습니다.

 

우선 Xcode를 실행하고, 프로젝트를 생성해 주세요.

생성 방법은 -> formestory.tistory.com/2 참고해주세요.

 

 

프로젝트를 생성했다면 Project Navigator에 Main.stroyboard를 선택해 주세요.

Main.Storyboard

 

Main.Storyboard를 선택한 후에 다음과 같이 iPhone 모양이 나타납니다.

이제 하얀 도화지 위에 우리가 원하는 데로 디자인을 해봅시다!!

우상단에 노란색 네모칸은 UI 목록들이 나오게 됩니다. 

UI를 추가할 때 자주 사용합니다. (단축키: cmd + L)

빨간색 네모칸은 해당하는 UI의 속성을 변경할 수 있도록 tool을 보여주게 합니다.

 

1. UILabel, UIButton, UITextField 붙이기

우선 노란색 네모칸의 버튼 또는 단축키(cmd + L)를 클릭하여 Label을 화면에 붙여줍니다.

Label을 누른 상태로 드래그하여 원하는 위치에 놓아주면 됩니다.

UILabel

이제 Button과 Textfield도 화면에 추가해주세요.

저는 이렇게 만들어 봤습니다.

빨간색 버튼을 클릭하면, 선택된 UI의 속성들을 변경할 수 있습니다.

하나하나 사용해보시기 바랍니다.

 

이렇게 세팅해줬으면 Device에 잘 나오는지 확인해봐야겠죠??

시뮬레이터 실행방법은 formestory.tistory.com/4를 참고해 주세요.

 

잘 나오나요?? 

가끔 스토리보드에서 작업한 Device와 시뮬레이터의 Device가 다를 경우

레이아웃이 맞지 않아 잘릴 수 있습니다.

추후에 Device마다 디자인을 대응할 수 있는 AutoLayout에 대해 포스팅하도록 하겠습니다.

 

2. IBOutlet 설정

xcode 상단에 빨간색 네모칸의 버튼을 클릭해 [Assistant]를 클릭해 주세요.

해당 storyboard와 연결된 controller를 보면서 작업할 수 있게 도와줍니다.

 

만약 오른쪽 이미지처럼 안 나온다면, 아래의 방법을 해보시기 바랍니다.

                              1. 파란색 영역의 버튼을 제외한 부분을 선택해 줍니다.

                              2. 주황색 네모칸의 Custom Class 부분의 Class가 작업할 ViewController로 되어있는지 확인합니다.

                                  (안되어있다면, ViewController 입력 후 Enter)

                              3. 분홍색 네모칸을 클릭하여 ViewController.swift 파일을 선택해 주세요.

                              4. 이렇게 했는데도 안되면 Xcode를 종료 후 다시 실행 후 위 방법을 다시 시도해 주세요.

 

 

이제 아래의 방법 중 하나를 선택하여 Label, TextField를 연결해 줍니다.

Outlet 연결

1. 좌측은 마우스 우클릭으로 드래그하여 연결하는 방법입니다.

2. 우측은 코드로 작성해 놓고 좌클릭으로 해당하는 타입에 연결하는 방법입니다.

 

 

Button은 액션이기 때문에 연결 방법이 조금 다릅니다.

UILabel을 연결할 때처럼 쭈욱 끌어서 controller에 드래그하면 Connection에 Action이라는 항목이 있습니다.

사용자의 액션을 받는 함수라는 말이죠. 

그래서 버튼을 누르면 btnAction이라는 함수가 실행이 됩니다.

 

3. Action에 대한 코드 작성

자 Outlet 연결은 끝이 났습니다. 이제 이벤트들을 작성하겠습니다.

 

우선 순서를 잘 살펴보면

                                                                     1. TextField에 글을 입력한다.

                                                                     2. 버튼을 누른다.

                                                                     3. TextField에 글씨가 Label에 입력된다.

 

결론이 뭐냐..

btnAction 함수에서 실행되어야 할 것은 Label에 TextField의 text를 set 하는 것

label.text = textField.text // label의 Text를 textField의 Text로 바꾼다.

어때요 간단하죠??

 

label.text = "이건 텍스트" 

만약에 위처럼 코딩을 했다면 TextField의 내용을 바꿔도 "이건 텍스트"라고만 입력이 될 겁니다.

 

 

암튼

이제 모든 준비는 끝났으니 빌드를 해서 결과를 확인해 봅시다.

 

완성 !! 

 

자 이렇게 기본적인 세 가지를 해봤습니다.

이 세 가지면 기본적인 앱을 만드는 데는 문제가 없을 겁니다.

그런데 위처럼 개발했을 때 문제점이 있습니다.

Layout이 맞지 않아서 글이 잘린다던지, 사이즈가 작은 Device에서 화면 밖으로 나간다던지 

이런 문제점을 보완하려면 AutoLayout에 대한 이해가 필요합니다.

 

AutoLayout에 대한 내용은 추후에 포스팅하도록 하겠습니다.

 

아무튼 재밌는 개발을 해봅시다~!!!