선생님 개발블로그가 하고싶어요.

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

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

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

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

 

iOS 개발 튜토리얼1 - 스톱워치 만들기 (4) AutoLayout, Constraint

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34 스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35 스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36 iOS 개발 튜토리얼1 - 스톱워치 만들기 (..

wiwi-pe.tistory.com

 

이 튜토리얼의 4번까지 무사히 마치셨다면 드디어 이번편에서 화면구성이 완성됩니다.

원래 생각했던 진도는 1편에서 화면이 완성되고 2편에서 코딩으로 끝내는 짧은 튜토리얼을 생각했는데

어느새 5편째 쓰고있네요............

 

그럼 바로 UI수정에 들어갑시다.

 

4편 마지막에서 라벨에대한수정이 들어간다고 했는데

사실 라벨이 하나더 추가됩니다!

 

만드려고하는 앱화면에서 소수점 크기가 다른부분을 다른 라벨로 붙여주려고합니다.

사실 라벨하나로 이러한일을 할 수 있습니다.

오히려 그렇게하는게 더 깔끔하게 보일수도 있어요.

제가 시간이 많아서 두개로 나눴을때와 하나로 했을때를 비교하는 내용도 넣었으면 좋겠습니다만 

이런부분도 그냥 넘어갈게요. 

 

이 튜토리얼로 공부하고 계시는분은 그 차이에대해 꼭 돌려보시기 바랍니다.

 

그럼 우선 아래 사진처럼 라벨을 하나더 추가해줍시다.

 

 

추가 하셨으면 이제 기존 라벨의 텍스트를 .0를 뺀 00:00으로 수정해주시고 새롭게 추가한 라벨에 .0(이하 소수점라벨)을 넣어줍시다.

그리고 소수점 라벨의 폰트크기를 키워줄거에요.

타임라벨의 크기를 100으로 잡았으니 딱 반절, 소수점 라벨의 폰트 크기를 50으로 잡아줍시다. 

 

 

이제 소수점 라벨을 다른 오브젝트들처럼 제약조건을 잡아줄거에요. 아래 사진과 같이 추가해줍시다.

네, 리딩값만 넣어줬어요!

 

보통 위치라는건 x값과 y값이 정해져있어야합니다.

그러니까 최소 두개의 기준이있어야 위치가 잡힌다는거에요

단순 위치만 말하자면입니다 

스토리보드에서 오토레이아웃을 잡을때 신경써야할부분은 

시작점(x,y)과 너비 높이 입니다

리딩을 잡았으면(x값) 탑이나 바텀을 잡아 Y값에대한 정보가 필요한겁니다.

라벨은 안에있는 글자크기에 맞춰져서 크기를 계산하기에 유동적으로 변화하는 상황이아니라면 크기값은 따로 안줘도됩니다 ㅎ

 

아무튼 x값에대한 제약조건을 걸어줬으면 

이제 y값에대한 제약조건을 걸어줄거에요

 

처음봣던 앱화면의 디자인대로 옆의 타임라벨의 밑줄을 맞춰줄겁니다.

소수점 라벨을 선택한상태로 command키를 누르면서 타임라벨을 선택해 총 소수점라벨,타임라벨 두개를 선택해주세요.

그리고 스토리보드화면의 하단 버튼중 2번째버튼( 기존 Constraints를 추가했던 버튼의 좌측버튼)을 눌러서 First Baselines를 체크해서 추가해줍시다 아래사진처럼요

 

 

최종적으로 소수점 라벨에 붙을 제약조건은 아래와같습니다.

Horizontal, 가로축에대한 제약조건(x축값은) 타임라벨바로붙어있구요

Vertical, 세로축에대한 제약조건(y축값은) 타임라벨의 First Baseline과 같습니다.,

 

이 베이스 라인에대한 꽤나 좋게 설명이 되있는 글이 있어 첨부합니다!

https://www.prolificinteractive.com/2016/03/08/all-about-that-baseline-3/

 

All About That Baseline - Understanding Baseline in Digital Design

Design software can compose the baseline automatically to ensure perfect spacing between lines to easily communicate designs to developers.

www.prolificinteractive.com

이제 라벨에대한 화면이 끝난것같지만

사실 조금 달라요.

 

이게 지금 하고있는 앱의 아이폰11 화면이구요

 

이게원래 만들려고했던 앱의 아이폰11화면입니다.

 

 

대충그은 가운데선이지만 딱봐도 만드려는 앱은 소수점부까지 합쳐서 가운데정렬이 되어있지요?

 

이것을 해결하는방법은 두 라벨을 하나의 뷰에 넣고 뷰를 가운데정렬하거나

 

타임라벨의 가운데로 정렬한 제약조건을 살짝 수정하는겁니다

 

저는 제약조건을 수정해줄거에요.

 

소수점라벨의 시뮬레이터상의 너비를 보면

사이즈 인스펙터에 보면 너비가 44로 나옵니다

".0" 이라는 텍스트를 넣었을때 딱 맞는 크기는 44너비라는거에요

이 너비의 반절만큼만 타임라벨을 왼쪽으로 움직이면될듯보입니다.

 

그럼 타임라벨의 가운데정렬을 시킨 제약조건을 더블클릭해서 수정모드로 들어간후 왼쪽으로 22만큼 옴겨주도록 설정해봅시다

 

위 사진은 타임라벨에 넣어진 제약조건들입니다(사이즈 인스펙터 하단부분) 

여기서 수정해야할것은 Align Center X to: Superview 부분이에요

이를 더블클릭해주고

 

 

이렇게 -22로 적어줍시다.

이게 Frist Item과 Second Item 순서가 바뀌어있을수 있어요

그러면 +22입니다

두 객체 사이의 거리를 설정하는게 기본이기에 항상 방향은 넣어지는 아이템순서에따라 바뀔수있기에 스토리보드화면에서 변경되는것을 확인해보고 저장합시다

 

그러면 이제 아이폰11화면으로 실행해보면 아래와같이나옵니다

 

음 아주 마음에 듭니다 

 

색이 제대로 들어갔는지 (시스템 색상으로 설정되어있어야합니다)

확인해볼게요 다크모드로 변경해보죠

 

시뮬레이터의 홈바를 눌러 바탕화면으로 간뒤 설정앱으로 들어가줍시다

위 사진의 Developer 혹은 한글로되어있으면 

같은 망치 아이콘에 개발자 라고 되어있는 메뉴에 들어가주세요

 

 

그러면 상단에 Dark Appearance라는 항목이 있습니다 이 항목의 스위치를 켜주세요

 

그러면 위화면과같이 다크모드로 변경됩니다

이제 다시 만들고있는 앱화면으로 돌아가보면 

 

전부다 글씨가 보이네요

 

맘에듭니다 ㅎ

 

글씨가 안보이시는분은 해당 오브젝트의 색상이 

Default 아니면 앞에 System이 붙은 색상인지 확인해보세요.

아 Label Color도 자동으로 변경됩니다 ㅎ

 

물론 이는 애플에서 정해주는 스타일이라 나중에 나는 다크모드에서는 다른색으로 변경하고싶어! 라고 하시는분들은

이러한 색상조합을따로 만들수있어요.

이에대한 부분은 다른튜토리얼에서 다뤄봤으면 좋겠네요 ㅎ

 

위에서는 그냥바로 시뮬레이터에서 다크모드로 실행해봤습니다만 

사실 스토리보드에서 대강? 다크모드를 확인할 수 있습니다 ㅎ

스토리보드 하단에 보시면 View as: iPhone11 이라고 적힌 부분이있습니다 이를 누르면 

아래사진처럼 스토리보드의 디바이스를 바꿀수있어요 그리고 그옆에 Interface Style을 빗금이 그어진 애로 변경하면

 

 

아래와 같이 다크모드에서 어떻게 보이나 대강 알아 볼수있도록 스토리보드가 변경됩니다

하지만 이는 다른 요인으로 변경될 수 잇으니 정확이 확인해보시려면 앱을 직접 실행시켜봐야겠죠?

 

 

아무튼 오늘은 짧게 끝내겠습니다

그리고 드디어 앱화면이 완성된것에 대한 박수를 보낼수있게되었어요!

 

 이제 다음편은 드디어 이 각 화면에대한 기능을 만들어볼겁니다 .

다음편에 봐요~