Starbucks Caramel Frappuccino
본문 바로가기
  • 그래 그렇게 조금씩

UIKit30

7. SuperView, Safe Area 먼저 오토 레이아웃을 잡기 전에 고려해야 하는 것이 있는데.. 바로 홈버튼이 있는 아이폰과 홈버튼이 없는 아이폰의 차이이다. (정확히는 Safe Area를 살펴봐야 한다.) Safe Area는 유저에게 항상 보이고, 인터렉트 할 수 있는 안전한 영역을 말한다. 위 사진을 보면 홈버튼이 없는 모델(최신)의 Safe Area는 View에 비해 작고 홈버튼이 있는 모델은 View와 Safe Area 사이즈가 같다. 이로 인해 아래와 같은 상황이 발생할 수 있다. 버튼이 화면 아래에 자리잡도록.. 홈버튼이 있는 모델을 기준으로 리딩,바텀,트레일링 각 20만큼 띄워줬다. 근데 이걸 홈버튼이 없는 모델로 보면 버튼이 의도와 다르게 완전 위로 올라가버렸다. (홈버튼 없는 모델의 Safe Area가 더 위에 있기 때문.. 2023. 3. 26.
6. Debugging Auto Layout Unsatisfiable Layouts 빨간색 시스템이 현재 제약들을 가지고 적절한 해결법을 찾지 못할 때 발생한다. 2개나 그 이상의 필수 제약들의 충돌로 인해 발생한다.(제약들이 동시에 전부 참일 수 없는 경우) 런타임에서 시스템이 unsatisfiable layout을 발견하면, 다음과 같은 절차를 밟는다. 1. 충돌하는 제약들이 뭔지 파악한다. 2. 충돌하는 제약들을 하나씩 파괴하고 레이아웃을 체크한다. 적절한 레이아웃을 발견할 때 까지 제약들을 게속 파괴한다. 3. 콘솔에 제약의 충돌과 파괴된 제약들에 관한 로그를 남긴다. 이럴 때 많이 발생해요 - 코드로 오토레이아웃 잡을 때 (translatesAutoresizingMaskIntoConstraints 프로퍼티 false로 바꿔줘야 되는데 까먹.. 2023. 3. 26.
5. 스택뷰 연습 레이블 이미지뷰 버튼 위 3가지를 통해 스택뷰 연습을 해보자. 위 사진과 같이 레이블 - 이미지뷰 - 버튼을 Vertical StackView로 묶어준다. 스택뷰가 화면에 꽉 차도록 Safe Area에 대해 0만큼 떨어지도록 4방향 제약을 걸어준다. * 이후 중앙 이미지뷰가 최대한 꽉꽉 채워져야 하기 때문에 이미지뷰가 늘어날 수 있도로 수직 방향의 Hugging Priority를 제일 낮게 설정해 준다. (Hugging Priority가 높으면 자기 컨텐츠 사이즈에 딱 맞게 허깅하기 때문에 (안늘어난다.) ) + 저번에 이미 스택뷰를 활용해서 화면회전(프로필뷰) 오토레이아웃을 잡아봤지만.. 더 비슷하게 보이도록 다시 잡아봤다. 스택뷰 안에 스택뷰도 당연히 가능.(Nested Stack View) * 그리.. 2023. 3. 25.
4. Stack Views_ 스택뷰 잘 활용하면 더욱 간편하게 레이아웃을 잡을 수 있는 스택뷰에 대해 알아보자. (복잡한 제약을 각각 걸어주기 보다는 내부 프로퍼티를 활용함) https://developer.apple.com/videos/play/wwdc2015/218/ Mysteries of Auto Layout, Part 1 - WWDC15 - Videos - Apple Developer Auto Layout is a powerful constraint-based layout engine that can drive complex and dynamic interfaces on both iOS and OS X. Learn... developer.apple.com axis (방향) (Vertical, Horizontal) - 수직, 수평 _.. 2023. 3. 25.
3. Auto Layout - 화면 회전 휙휙 돌아가는 화면의 오토레이아웃을 잡아보자. 레이블 3개 이미지뷰 1:1, 가로 항상 150 이하 텍스트뷰 오토레이아웃 잡기 전에 기준을 정하고 시작하는게 좋음. 애매한 경우 좌측 상단 요소를 기준으로 시작하는 것도 좋음. 그리고 내가 원하는 형태에 가깝게 미리 컴포넌트들을 배치해 두는것이 편함 1. 이미지뷰 잡아주기. - 좌측 상단에 올리기 위해 Top, Leading 제약 주기. - 너비가 화면(슈퍼뷰)의 30%를 차지하도록 Equal Width 활용 (imageView.Width = 30% X superview.Width) [control키 활용] - 여전히 세로가 안잡혀 있기 때문에 aspect ratio 활용해서 1:1로 맞춰주기 [control키 활용, option키] 2. 레이블 잡아주기 .. 2023. 3. 25.
2. Auto Layout_Priority Simple Constraints 문제를 몇 개 풀어보자. https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSimpleConstraints.html#//apple_ref/doc/uid/TP40010853-CH12-SW1 Auto Layout Guide: Simple Constraints developer.apple.com 만약 width가 동일한 두 뷰가 있는데, 한 쪽 뷰의 너비가 다른 한쪽 뷰 너비의 2배가 되게 하려면 어떻게 해야 할까? multiplier를 이용해 보자. 편의를 위해 오렌지색 뷰를 LeftView, 민트색 뷰를 RightView로 이름을 .. 2023. 3. 24.