2WEEK2 Dicee layout

김동우·2021년 3월 22일
0

1.배경화면을 꽉차게 만듭니다.

2. 네 가지 요소를 레이아웃한다.


단순히 정렬을 사용할 수 없습니다. 왜냐하면 화면 중앙에 요소들이 다 있기 때문입니다. 또한 고정을 할 수 있는 수직 공간이 충분하지 않습니다.
그렇기 때문에 몇 개의 컨테이너를 사용하여 화면을 세 개의 동일한 부분으로 분할 합니다.


Object libary 에서 uiimage 받습니다(일부 하위 뷰를 레이아웃하는데 사용)
그 다음 다이스로고를 드래그하여 view에다 집어넣습니다.
똑같은 방법으로 dice image, roll 버튼을 만듭니다.
다른 방법으로는 오른쪽 하단 버튼을 클릭하여 view를 클릭하는 방법이 있습니다.
그 다음 컨테이너을 어떻게 배치 할 것인지, 크기를 어떻게 할 것인지 지정합니다.그렇기 위해서는 StackViews라는 것이 필요합니다.
stackview란 뷰를 세로로 함께 쌓을 수 있는 방법입니다.

StackView

TopView를 선택한 다음 command키를 누른 상태에서 middle view, bottom view를 선택합니다.
그 다음 stackview에 포함합니다.

그 다음 상단 또는 하단의 safe area에 들어가지 않도록 제한해야 합니다.

네면 모두 0으로 제약을 하고 stack view.bottom을 safe area.bottom으로 변경하고 constant 을 0으로 변경합니다.

그 다음 dice view를 수평 컨테이너에 넣어서 수평으로 균등하게 정렬하게 만듭니다. 이전과 마찬가지로 두개의 diceimage를 선택하여 stackview에 포함합니다.

스택에 폼함 된 이 세가지 뷰 모두 수직에 따라 동일한 높이를 갖기 원하기 때문에 distribution을 fill equally로 바꿔주고 사이의 공간을 1 로 설정해 줍니다.
top, middle, bottom view 에 background을 default로 변경합니다.

profile
Ioooooooos

0개의 댓글