iOS 개발 튜토리얼1 - 스톱워치 만들기 (3) 스토리보드 + Label + Button

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

 

저번 2편까지 무사히 끝내셧다면 앱이 시뮬레이터로 무사히 실행이 되었으나

앱에 아무것도 없었을겁니다.

 

이제 앱에 채워넣을 차례입니다.

 

1편에서 본 만들려고하는 앱의 화면을 다시한번 보자면

 

 

위 에서 부터 차례대로

시간을 표시하는 부분 

랩타임을 표시하는 부분

그리고

 

시작 버튼

랩타임 체크 버튼

정지 버튼

초기화 버튼

 

이런식으로

 

크게 

시간표시, 랩타임표시, 버튼부분 세부분으로 나눠져 있습니다.

 

우리는 이 화면을 구성하기위해 애플에서 제공해주는 오브젝트들로 붙여넣을꺼에요

 

설명은 뒤에서 하고 우선 넣을것들 나열하자면

 

UILabel

UITableView

UIButton

 

이렇게 세종류와 

추가로

UITableViewCell 이라는 녀석이 이 앱화면을 구성하게 됩니다.

 

 

 

 

 

 

화면 구성을 시작하기전에 에디터에 보여지는 방식을 저랑 맞추겠습니다.

 

에디터메뉴에 아래 사진처럼 체크해주세요!

 

 

다시 앱화면 구성에 대해서 이야기하겠습니다.

 

우선 UILabel에 대해 이야기하자면

U는 내버려두고 Label을 사전(파파고)에 검색하면 

아래와 같이 나옵니다

 

label[ˈleɪbl]명사

• 1.(종이 등에 물건에 대한 정보를 적어 붙여 놓은) 표
• 2.(사람물건의 성격 등을 묘사하는) 딱지
• 3.음반사, 레이블

다들 아시다 싶이 그냥 라벨이에요

라벨을 라벨이라 부르지못하고 레이블이라 불러야한다지만 저는 앞으로도 라벨로 부르겠습니다........

 

이 UILabel은 애플이 이렇게 설명하고있습니다.

 

A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.

 

텍스트를 포함하고, 뭐 각종 속성들을 넣어 제어할 수 있다고하네요

 

라벨이라는 이름답게 글씨를 표시해주는애 입니다. Text를 표시해주는애인데 

이 앱에서는 다루지않을 다른 텍스트를 표시해주는 녀석들도 있습니다.

 

TableView는 다음에 설명을 할것이고 버튼을 이야기하자면

누구나 다 예상하시듯이 버튼입니다

 

애플은 이 버튼 오브젝트를 아래와같이 설명해주고 있어요

 

You can set the title, image, and other appearance properties of a button. In addition, you can specify a different appearance for each button state.

 

제목, 이미지 기타 속성을 넣고 각 상태따라 다른게 설정을 해줄수있다!

이 상태가 매우 중요합니다.

 

각 오브젝트들에 대해 자세히 다루지는 않을테니 더 궁굼하신분은 애플디펠로퍼의 도큐먼트 페이지들을 봐주세요

 

그럼 

 

우선은 라벨을 넣어서 실행해보죠

 

프로젝트화면의 좌측의 프로젝트 네비게이션에서 Main.storyboard를 누르시면 가운데 화면이 마치 아이폰 시뮬레이터같은 모양으로 변경됩니다.

 

이 하얀 녀석을 마우스로 클릭하면 네비게이션 옆에 있는, Structure Area의 View가 선택되었다고 하일라이트가 될겁니다

앞으로 이 뷰 안에 표시할애들을 넣어줄거에요.

 

뷰안에는 이미 Safe Area가 속해있는데

이는 실제적으로 있는 것이 아니라 실제 화면만 보여질곳, 상단 스테이터스바와 하단 홈바를 제외하고 있는 가운데에 남겨진 영역에 대해 알려주기위한 일종의 가이드라인입니다

 

앞으로 이 가이드 라인에 대한 도움을 많이 받을거에요

 

위 사진의 보라색 실선부분, + 버튼 또는 키보드로 command + shift + L 을 누르면 아래와같은 창이 뜹니다

 

위에 사진처럼 우측에 설명칸이 나와 있을 수도 있고 없을수 도 있습니다.

설명창을 펼치거나 혹은 닫고싶으시면 팝업창 상단의 검색바 옆의 두번째 창모양 버튼을 누르시면되요

 

이제 창에서 보이는 Label을 아까 선택했던 뷰로 드래그 하고 드롭 해주세요

 

그럼 아래와 같이 드롭한 장소에 라벨이 하나 생겼을겁니다.

 

그리고 이 라벨을 더블클릭하면 이 텍스트를 수정할 수 있게됩니다!

아래 사진처럼요

 

 

그리고 옆의 

인스펙터영역이 아래와 같이 5번째가 선택되어 딱봐도 이 라벨에 대한 설정을 변경 할 수 있는 창이구나! 라고 알만하게 여러 속성을이 있습니다

 

이 어트리뷰트 인스펙터창에서 텍스트를 수정하거나, 색상, 정렬 크기 등등 많은걸 수정 할 수 있어요

 

 

스토리보드를 통해 작업을하면 기본적으로 이런식으로 뷰에 필요한 오브젝트를 넣고 설정을해주는 식으로 화면을 구성하게 됩니다.

 

 

 

 

이제 아까 라벨을 추가한것처럼

 

라이브러리버튼(+버튼)을 눌러서 저희가 사용하려하는

 

테이블뷰, 버튼들을 배치해줍시다

 

추가로 넣으려는 오브젝트들은 아래와같습니다 

 

항목을 잘 선택하셔서 드래그 앤 드롭해주세요

아래와같이요!

그리고 이제 

각각의 오브젝트들을 선택하시면 각 사각형이 크기가 수정가능하게 변하는데 이를 잘 조절하여 최대한 만드려는 앱과 비슷하게 만들어줍시다.

 

이제 글자 크기와 색상을 맞춰줄꺼에요.

우선 라벨의 속성은 아래와같이 설정해줄겁니다

라벨을 선택하고

우측의 인스펙터즈 창을 어트리뷰트 인스펙터로 변경되는것을 확인한후

font 는 system 100.0

Alignment 는 가운데로 설정합니다

 

그후 버튼의 색상과 글자크기를 변경할겁니다

우선 Stop버튼을 눌러서 아래와같이 변경해줍시다

그러면 아래와같이 스톱버튼이 변했을거에요.

 

 

나머지 버튼들도 만드려고하는 앱의 화면처럼 변경해줍시다.

 

Start Button , Check Button

font를 30포인트로 올리고 변경없음

 

Reset Button

font를 30포인트로 올리고 Text Color 를 Label Color로 설정

 

아래의 사진과 같이되면 됩니다

 

뭔가 조금 정렬이 안맞고 크기도 잘안맞는거 같고 그렇죠?

그 부분은 다음 포스트에서 다루겠습니다!

 

오늘 우선한것을 command + r 키 또는 실행버튼으로 시뮬레이터로 돌려보세요

아래와같이 나온다면 이번 튜토리얼도 성공입니다

 

 

 

그럼 다음 포스트에서 봐요~