상세 컨텐츠

본문 제목

[오토레이아웃] LoginView(Scrollview, stackview, CHCR)

autoLayout

by 옹홍 2021. 7. 10. 19:38

본문

※ 오토레이아웃 주제는 야곰님의 강의를 듣고 공부한 내용을 정리한 내용이다. 

 

로그인뷰를 만드는 것이 생각보다 쉬운일은 아니었다. 글씨를 크게 만들었을때는 우리는 scrollview를 해줘야할 것이고, 그렇지 않을떄는 scroll이 안되야할 것이다.

LoginView를 구현할떄 필요했던 것은 scollview사용법, stackview 사용법이었다.

강의를 들으면서 디자인에 맞는 화면을 구성하기 위한 팁을 여러개 얻을 수 있었다.

TIP1💡

요소간의 간격을 맞춰주기위해서 하얀색 혹은 투명한 view를 사용할 수 있다는 것이다. stackview의 spacing이 8이라고 한다고 했을때, 2개의 요소사이가 최소 46pt 떨어져있다면, 8 + 30 + 8이다 그렇게 되기 위해서는 view.height >= 30이다. 그리고 그 떨어져있는 간격이 모두 같다고 하면 추가한 모든 view의 크기를 동일하다고 constraint를 주면 된다.  

TIP2💡Hugging & resistance

우리는 Loginview에서 Dynamic type으로 모든 라벨과 button을 처리해줘야한다. 즉, 우리는 .adjustsFontForContentSizeCategory 메소드가 필요하다. 물론, button의 경우 NotificationCenter를 사용해야한다. 사용법은 

https://pastapeter.tistory.com/68

 

[오토레이아웃] Dynamic scrollview

scrollView에 content가 늘어가면서 계속 스크롤이 가능하다가, content가 사라지면, scroll이 되지않게 만드는 예제이다. ScrollView 먼저 storyboard로 버튼 2개와 스크롤뷰를 만들어준다. Add 버튼과 Remove..

pastapeter.tistory.com

그렇지만 여기서 중요한점은, Slider와 Remember Me! 가 같이 있는 stackview가 문제이다. Slider의 Content hugging과 Remember Me!의 Content hugging의 priority를 생각해봤을때, Slider의 Vertical Content hugging이 더 커서 hugging이 정해질때, 이 때, slider를 기준으로 정해진다. 결국에는 vertical에서 slider가 우선이기 때문에, Remember Me가 2줄로 늘어가서 button 아래로 들어가게된다. 

 

<해결방안>

우리는 Compressiong resistance의 vertical priority를 Remember Me!를 최대로 높여주면서 글자가 무조건 잘리지 않게 한다. Remember Me가 절대 잘리지 않게 만드는것이다. 

resistance 의 vertical priority가 가장 크다면 그 객체에 맞추어서 stackview의 높이가 정해질 것이다.

 

관련글 더보기

댓글 영역