[22일차] [LED 전광판 앱] LED 전광판 UI 그리기 part.1

이제 드디어 LED 전광판 앱의 UI를 그리는 단계로 들어섰다!

기존에 화면 전환, 화면(View)간 데이터 전달을 위한 예제 실습용 프로젝트가 아닌, LED 전광판 앱 개발 실습을 위한 프로젝트 "LEDBoard"를 따로 생성해주자! 그리고 실습에서 그랬던 것 처럼 화면 전환을 위해 Navigation Controller를 추가하자.

그리고 똑같이 디폴트로 생성된 View Controller를 지우고 기존에 생성된 VC를 Navigation Controller의 Root VC로 지정해보자.

그럼 대충 이런 모양이 된다.
(놀랍게도, Root VC를 위한 스토리보드 진입점을 나타내는 화살표는 Drag&Drop 방식으로 VC를 넘나들 수 있었다!)

 그리고 우클릭 드래그를 통해 초기 VC를 Root VC로 만들게 되면...

이렇게 두 VC 사이에 화살표가 생기게 된다.

다음으로는 LED 전광판의 문구 데이터를 담는 용도의 Label을 하나 추가하고, 가운데 정렬을 위해 Constraint를 추가해주자.

방법은 간단히 이렇게 Horizontally in Container 제약조건을 설정해주면 된다.]

그리고 Label이 표시됐을 때의 데이터도 가운데로 정렬해주기 위해 속성 인스펙터 메뉴의 5번째에서 가운데 정렬하는 옵션을 켜주자.

그리고 LED 전광판 앱의 경우, 지정한 문자열의 시인성이 좋아야하므로, 폰트 크기를 50pt 정도로 키워주자.

그리고 이런식으로 배경은 어두운색, 내용을 표시하는 Label의 폰트 색상은 밝은색으로 지정해주자.

그리고 Navigation Controller의 조작을 위해 Bar Button Item을 상단에 추가해주자.

 

Bar Button Item이라고 검색하면 해당 UI 컴포넌트를 찾을 수 있다.

그래서 해당 Item의 Title을 "설정"으로 변경하면 오늘 UI 실습은 끝이 난다.

해당 설정 버튼을 통해 사용자는 화면에 표시되는 Label의 내부값과 색상 데이터를 넘겨줄 수 있게 될 것이다.

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

 

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.