[iOS] - 오토레이아웃 뽀개기

dongle·2023년 1월 8일

오토 레이아웃?

각 디바이스의 크기에 따라 화면의 크기도 달라지는 만큼 일관된 UI를 사용자에게 제공하기 위해 위치와 뷰의 크기를 잡아주는 것

  • 엥커의 크기를 4방향 지정해주면 뷰의크기를 알게된다.

핵심
1. 뷰의 위치

  • 가로, 세로
  • 엥커로 제공
  1. 뷰의 크기
  • 가로, 세로
  • 엥커기반 스크린 사이즈로 뷰의 크기 제공가능

위치 + 크기 -> 오토레이아웃 -> 화면 랜더링

constraint

  • 엥커 우선 (크기를 고정했는데 엥커를 건 경우 그 비율이 맞지 않게되면 엥커 우선으로되어 크키가 조정됨)

  • 객체에 연결해 해당 객체를 기준으로 엥커를 걸어 정렬 및 배치 가능 (옵션키 사용으로 더 세밀한 조정 가능

self sizing

  • 뷰의 크기를 잡아주지 않아도 폰트의 크기는 알 수 있다
    -> 뷰의 크기를 지정해 주고 텍스트 레이블의 레이아웃을 지정해주지 않으면 뷰를 lable 빠져나가는 상황이 발생할 수 있다.

-> 반면 레이블을 지정해주면 뷰는 자동적으로 커지는 효과를 줄 수 있다.
(뷰의 크기를 잡아주고 레이블 레이아웃도 지정해주면, ... 내용이 길어져도 생략되었다는 표시가 보이게 만들어 줄 수도 있다)

스크롤 뷰

빨간 부분이 뜨면 오토레이아웃이 제대로 설정이 안된 것
ex)

greater then equal => 라벨이 길어지면서 나가지 않고 딱 맞게 바뀜

컨스트레인트 우선순위

충돌이 났을 때 우선순위를 지정해 줄 수 있다
가장 높은 우선순위는 1000의 값을 가짐
우선순위의 수를 줄여가며 충돌을 방지할 수 있음

Hugging

  • 안으로 끌어안기
  • 공간이 남아서 당겨지는 상황
    우선순위가 높은 아이를 기준으로 끌어당길 수 있음

Compression Resistance

  • 밖으로 밀어내기
  • 공간이 없어서 쪼그라드는 상황

스택뷰

자동적으로 크기조절이 가능하며 균등하게 분배가 가능하다.

  • 가로, 세로
  • 차곡 차곡
  • spacing
  • Fill
  • Fill Equally : 동일한 크기로 스택에 넣어줄 수 있음
  • Fill Propertionally

@IBDesignable : 인터페이스 빌더에서 디자인으로 확인 가능하게끔 만들어줌
@IBInspectable : 인스펙터 패널에서 사용될 수 있도록 설정

-> 만들면서 또 복습하기

참고
개발하는 정대리

profile
개발자를 꿈꾸는 학생입니다!

0개의 댓글