14일 만에 아이폰 앱 만들기 챌린지(4) - Container와 UI
이 포스팅에서는 다음과 같은 것에 대해 알아본다.
- 기본 UI와 container
저번 포스팅에의 파일을 불러오자. 그리고 ContentView.swift 파일을 보도록 하자. 그리고 body의 내용을 지우도록 하자.
우측 상단의 + 버튼을 클릭하여 라이브러리를 불러오도록 하자.(첫 번째 탭)
image라고 검색하면 다음과 같이 나온다.
그다음 이미지를 코드 상으로 가져와보자.
그러면 다음과 같은 코드가 생성된다.
Text와 형태가 유사하다.(Text()와 유사)
"Image Name"에는 넣을 이미지의 이름을 입력하면 된다. 이미지의 이름을 넣기 전에 asset library에 대해서 알아볼 필요가 있다.
네비게이터를 열고 Assets.xcassets로 들어가자.
파일 안에 내용이 없음을 알 수 있다. 여기에 이미지를 넣어야 이미지를 사용할 수 있다. 일단 아래의 이미지를 받도록 하자.
안에 logo가 있는데 기본 이미지, 2배 크기 이미지, 3배 크기 이미지가 있다. 이렇게 여러 개 이미지가 필요한 이유는 기기마다 해상도가 다르기 때문이다. 이렇게 세 개의 이미지를 넣음으로써 상황에 맞는 이미지를 보여주게 할 것이다. 일단 이 세 이미지를 드래그 앤 드롭으로 Assets 파일 안으로 넣어준다.
그러면 logo가 추가된 것을 볼 수 있다.
xcode가 세 이미지가 한 세트임을 알고 바로 구성해준다. Assets안에 있는 logo파일을 클릭하면 이름도 변경이 가능하다. 지금은 이름을 "logo"라고 해두자.
다시 ContentView로 돌아가서 이미지를 넣어보도록 하자. 아까 Image의 괄호 안에 이름을 넣으면 된다. 우리는 logo라고 넣으면 된다.
현재 불러온 이미지는 원본 크기 이미지대로 불려 온 상태인데 사이즈를 조절해보도록 하자.
이미지의 크기를 수정하기 위해서는 modfier가 필요하다. modifier에 대해서 모른다면 아래 포스팅을 참고하도록 하자.
일단 resizeble()이라는 modifier를 추가해준다. 그러면 이미지가 다음과 같이 보일 것이다.
비율이 망가진 것을 볼 수 있다. 비율을 맞추는 것을 하기 위해서는 aspectRatio를 추가해주자. 그리고 매개변수로 .fit을 주도록 하자. 이렇게 하면 크기가 경계까지 커지고 비율은 유지하게 할 수 있다.
코드를 다음과 같이 정리하면 코드 보기가 더 편하다.
그렇다면 만약에 이미지와 텍스트가 있다면 어떻게 해서 두 개를 하나로 묶어 나타낼 수 있을까. 여기서 container라는 개념이 필요할 때다.
라이브러리에서 vstack이라고 검색해보자.
이를 body로 드래그 앤 드롭하도록 하자.
Vstack에 우리가 생성한 이미지 엘리먼트를 넣도록 하자.
Vstack에는 이러한 형태로 10개까지 넣을 수 있다. 그리고 세로로 쌓인 형태로 보이게 된다. Text엘리먼트도 넣어보도록 하자.
수직으로 쌓인 형태로 보이고 있다.
수평으로도 가능하다. Vstack 대신 Hstack을 사용하면 된다.
Zstack이란 것도 있는데 화면 위로 쌓는 형태라고 생각하면 된다. 위에 있는 코드가 아래쪽에 쌓이는 형태이다. 포토샵의 레이어 생각하면 된다.
Stack안에 Stack을 넣는 것도 가능하다. 우측 상단의 +버튼을 눌러서 추가하는 것도 가능하지만 코드상에서 커맨드 키를 누른 채로 엘리먼트를 클릭하면 다음과 같은 창이 뜬다.
저기서 Embed in HStack을 선택하자. 그럼 Text가 안에 있는 Hstack이 생기는 것을 볼 수 있다.
HStack안에 Text를 하나 더 추가해주자.
인스펙터를 켜고 HStack을 클릭하면 인스펙터에서 다양한 값들을 설정할 수 있다. 정렬도 가능하고 Spacing값을 줄 수도 있다. Spacing값을 20 정도 주면 어떻게 바뀌는지 확인이 가능하다.
이제 ZStack을 VStack으로 변경해보자.
로고 이미지를 최상단으로 올리고 텍스트를 제일 하단에 놓고 싶다고 가정해보자.
첫 번째 방법은 VStack의 Spacing 값을 주는 것이다. Spacing 값을 300을 줘 보았다.
이 방법은 정해진 값을 주고 있고, 화면 사이즈에 대응하기가 어렵기 때문에 좋은 방법이라 할 수 없다.
두 번째 방법은 Spacer()라는 엘리먼트를 사용하는 것이다.
Spacer는 위아래에 있는 엘리먼트들을 화면 크기 내에서 밀어버릴 수 있는 만큼 밀어버린다. Spacer를 추가로 넣을 수 있는데 Spacer끼리 호환해서 작동을 잘한다.
Spacer가 두 개 들어갔는데 같은 넓이의 영역을 차지하고 있다. 세 개를 넣어도 마찬가지이다.
HStack에도 Spacer를 넣을 수 있다.
이렇게 오늘도 알차게 스위프트를 배워보았다! 끝!
'14일 만에 아이폰 앱 만들기' 카테고리의 다른 글
| 14일 만에 아이폰 앱 만들기 챌린지(6) - 데이터 타입, 변수, 상수 (1) | 2021.01.06 |
|---|---|
| 14일 만에 아이폰 앱 만들기 챌린지(5) - Card Game UI 만들기 (0) | 2021.01.05 |
| 14일 만에 아이폰 앱 만들기 챌린지(3) - 유저 인터페이스 만들기(feat. SwiftUI) (0) | 2021.01.03 |
| 14일 만에 아이폰 앱 만들기 챌린지(2) - xcode 세팅 및 설명 (0) | 2021.01.02 |
| 14일 만에 아이폰 앱 만들기 챌린지(1) - 아이폰 앱을 만들기 위해 (0) | 2021.01.01 |
