14일 만에 아이폰 앱 만들기 챌린지(5) - Card Game UI 만들기

14일 만에 아이폰 앱 만들기 챌린지(5) - Card Game UI 만들기

이 포스팅에서는 War Card Game UI를 만들어 본다.

필요한 이미지 및 소스의 출처는 academy.codewithchris.com/ 이다.

 

우리가 만들 UI는 다음과 같다.

먼저 한번 지금까지 배운 것을 바탕으로 스스로 그려보자. 그리고 아래 내용을 보면 더욱더 공부가 될 것이다.

 

 

 

 

 

 

늘 그러하듯이 xcode 프로젝트를 실행하자. 

설레는 마음으로 새 프로젝트를 시작하자

 

Assets에 이미지 파일들을 넣자. 아래 파일을 다운로드하여서 넣자.

Image Assets.zip

2.21MB

 

 

 

Assets에 이미지 넣기

 

해상도에 따라 달리 표시될 수 있도록 세 장씩 있는 것을 확인할 수 있다.

 

 자 이제 contentView로 돌아가서 ZStack()을 만든 다음 그 안에 배경 이미지를 넣어보자.

ZStack에 배경 이미지 넣기

배경 이미지는 들어갔지만 상단에 흰색 부분이 보인다. 이미지가 상단까지 도달 못하고 있다. 여기서 새로운 modifer인

ignoresSafeArea()를 사용하면 상단의 흰 부분을 없앨 수 있다.

 

ignoresSafeArea() 적용

 

우리가 만들고자 하는 UI를 다시 보면 수직으로 쌓인 구조(VStack)임을 알 수 있다.

VStack 구조

 

VStack 구조 안에서 카드와 점수판 부분이 HStack 형태로 이루어져 있는 것 또한 확인할 수 있다. 그리고 점수판은 또 VSstack 두 개로 이루어져 있는 것을 알 수 있다.(<Player,0>, <CPU, 0>)

구조대로 요소를 넣었을 때 다음과 같이 될 것이다.

 

구조대로 엘리먼트 넣기

이제 Spacer()를 통해 간격을 줘보도록 하자.

 

Spacer() 넣기

중괄호를 잘 보고 위치 헷갈리지 않게 잘 넣길 바란다. VStack 위아래에도 Spacer()를 넣어주는 것도 잊지 말자.

 

이제 카드 쪽과 점수 부분도 Spacer()를 주도록 하자. HStack에도 적용하는 방법은 같다. 사이사이에 Spacer()를 넣어 주면 된다.

 

HStack에도 Spacer() 넣기

 

텍스트의 컬러와 사이즈도 변경해주도록 하자. Text를 클릭하면 우측에 인스펙터에서 해당 값을 변경할 수 있다. Player와 CPU는 headline사이즈로 변경하고 컬러는 흰색으로 해주었다.  점수는 subheadline, 컬러는 마찬가지로 흰색으로 해주었다.

 

폰트 사이즈와 컬러 변경

점수 폰트 사이즈도 변경

 

Palyer, CPU Text 하단에는 패딩 값을 주어 띄워줄 수 있도록 하자

 

하단에 패딩값 주기

이로써 완성이 되어 있다. 인스펙터를 통해서 값을 변경하는 것도 가능하지만 나중에 익숙해지면 코드상에서 바꾸게 될 것이다.

 

오늘은 여기서 끝!