2022년 02월 03일의 이야기

 

1. 제약 조건을 설정하고 안전 영역으로 작업 

-앱 양조장 백그라운드를 클릭-> 아래에 위치해 있는 add new comstraints를 클릭-> 모두 0에 맞춰져 있는지 확인하고, 4개의 선을 클릭한다. ->뷰 컨트롤러 안에 constraints가 추가된다. -> constraints 안에 있는 trailing이 safe area로 되어 있다면 특성 검사기로 들어가서 super view로 바꾸어준다. 나머지 3가지도 super view로 바꾸어준다. 

 

2. 정렬 및 고정을 사용하는 방법

-다음은 로고가 화면의 방향과 크기에 맞게 바꾸는 작업이다. 로고를 클릭한 후 align(맞추다)을 클릭한다. -> horizontally in container(수평)과 vertically in container(수직)을 체크한 후 0으로 맞춘다. 

 

-새로운 로고를 만들고, 기존에 있던 로고와의 간격을 설정하여 정렬하고 싶다면 수평은 정렬하고, 수직은 add new comstraints를 클릭하여 설정한 간격에 맞게 조정한다.

 

3. 컨테이너 및 하위 보기 작업

-메인에서 이미지들은 많이 존재하기 때문에 그냥 정렬을 사용하기에는 화면 픽셀이 부족하다. 그렇기 때문에 화면 컨테이너를 3 부분으로 나눈 다음 정렬한다.

 

-3 부분의 컨테이너를 만드는 방법은 객체 라이브러리에서 uiview(그냥 view)를 추가한다. view를 3분의 1 상단에 위치시키고, 위치하고 싶은 로고를 드래그하여 view에 들여 넣는다. 

 

-중간 부분에 들어갈 컨테이너를 만드는 방법은 dice image들을 클릭 -> editor에 들어간 후 -> embed in -> view를 선택한다. 그럼 첫 번째 컨테이너와 같이 view안에 dice image들이 들어가 있다.

 

-마지막 부분에 들어갈 컨테이너를 만드는 방법은 roll button image를 클릭 -> 오른쪽 아래에 위치해 있는 embed in 모양을 클릭 -> view를 선택

 

4. 스택 뷰

-topview, middleview, bottomview를 모두 클릭 -> editor에서 embed in -> stackview를 선택하여 포함시킨다. 후에 stackview를 클릭하고 add new comstraints로 들어가서 4면을 모두 0으로 맞춘 후 safe area로 선택한다.

 

-여기까지 한다면 컨테이너 박스 상단은 safe area에 맞게 떨어져 있지만 하단은 그렇지 않은 것을 볼 수 있다. bottomview에 들어가서 safe area로 맞춰준다.  

 

-다음은 분포를 동일하게 채우기 위해 변경하는 방법이다. stack view를 누르고 특성 검사기에서 distribution(분배)을 동일하게 채우기로 변경한다. 

 

-다음은 top, middle, bottom view 안에 있는 요소들을 정렬시키는 방법이다. bottom view의 roll은 수직, 수평 정렬하고, middle view에 있는 두 가지 image 요소는 또 새로운 stack view에 포함시켜 정렬시킨다. 

 

-마지막으로 stack view의 모든 컨테이너들의 색깔을 기본값으로 설정한다.