Ch.3 Gold: Spacing Out the Labels

# 버튼 간 균일한 여백 설정하기

• 보기 다소 불편하지만 아래 gif 처럼...어떠한 디바이스에서도 버튼 간 균일한 여백을 설정하는 게 목표!
  

# 오토 레이아웃 뽀개기

• spacer view 를 사용하라고 해서 아주 혹시나 이미 spacer view 객체가 있나 했는데(feat. SwiftUI: 너네 집에는 이런 거 없지? 우리 집에는 Spacer() 있다~~~~) 만들어서 쓰라는 뜻이었다🙃
  - spacer view 는 이하 Spacer 로 표기
  
  

1. 스토리보드에서 Spacer 로 쓸 UIView 인스턴스를 하나 추가하고, 얘는 진짜 Spacer 의 역할을 할 뿐 보일 필요가 없으므로 Hidden 속성을 켜준다. 그리고 이걸 cmd+c cmd+v 해서 Spacer 를 총 4개 생성한 다음 버튼 사이에 하나씩 위치시킨다
   
   

2. 사실 Spacer 의 height 를 제외한 나머지는 이미 3장에서 배운 내용과 별 다를 바 없어서 슥슥 설정해줬다.
   • 가장 상단에 있는 212 버튼을 (container) View 의 중앙에 (가로로)정렬하고 나머지 view 들은 여기에 맞춰서 가로로 중앙 정렬한다.
   • 어차피 spacer 가 여백의 역할을 하므로 모든 view 들의 top constraint 는 0으로 설정해준다
   • 최하단에 있는 degrees Celsius 버튼의 경우 bottom constraint 도 0으로 설정해줬다(즉, view 최하단에 고정)
   • 버튼들의 경우 설정값이 없으면 자동으로 width 와 height 가 글자 크기에 맞춰지므로 생략하고, Spacer 들의 경우 width 만 일단 50으로 설정해줬다

3. 그 다음에는 여백 균등 분배를 위해 Spacer 의 height 을 height >= 0 으로 설정한 다음, eqaual height 옵션을 체크했다.
   • 물론 여기까지 오는데 한 30분 걸렸음ㅋㅋㅋㅋㅋㅋㅋ 일단 모든 기기에서 오토 레이아웃이 작동해야 하므로 하드코딩은 절대 안됐고, 코드로 짜면 더럽게 해결은 할 수 있을 거 같은데 분명히 스토리보드 내에서 해결할 수 있을 것 같았다...
   • 별 걸 다 해봤는데 일단 처음에는 height <= 10^7 이런식으로 말도 안되게 큰 값을 주고 그거보다 작거나 같게 하면 안되려나 싶어서 해보고, 그 다음에는 반대로 height >= 0 으로도 해봤다 그러다가 Add New Constraints 팝오버에서 Equal Heights 옵션을 발견해서 height >= 0 으로 설정한 상태에서 저걸 눌렀더니 드디어 균등 분배의 꿈이 이루어졌다....! 쓰고보니 왠지 마르크스가 좋아할 발언....
     
   • Spacer 들에는 최종적으로 이런 constraint 들이 적용됐다.
     
     

• 여기서부터는 전체 오토레이아웃 constraints
  
  

☀️ 느낀점

• 솔직히 문서 찾아볼까 고민도 많이 했지만...오토레이아웃 자체에 대해서 좀 더 배우고...그때 찾아보기로...미래의 나 파이팅...