AutoLayout3 12 - Scroll Views 앱에서 굉장히 많이 쓰이는 스크롤뷰 기존과 비슷하게 화면을 꽉 채우기 위해서 View에 마진 없이 제약을 걸어주면 아래와 같은 빨간 줄이 생긴다... 스크롤뷰 위에 뷰를 하나 올리고 뷰를 스크롤뷰의 각 엣지에 맞게 정렬해주기 (Top, Leading, Bottom, Trailing 각 0으로) 그리고 위아래로만 스크롤 하기 위해서 스크롤뷰와 뷰(컨텐츠 영역)의 너비를 같게 해준다. 이후 컨텐츠뷰 안에 원하는 뷰(여기서는 레이블)을 넣고 Top,Leading,Bottom 제약을 걸어준다. 왜 이런 방식으로 ? 스크롤뷰가 움직여야 하는 전체 사이즈는 스크롤 뷰 내에 있는 콘텐츠 사이즈와 같음. 스크롤뷰 안에 컨텐츠가 없으면 안된다는 의미! (스크롤뷰 프레임 자체가 아니라 내부 컨텐츠 사이즈가 지정되지 않아서.. 2023. 4. 1. 1. Auto Layout - Interface Builder 톺아보기 Interface Builder 살펴보자! 아래쪽에 보면 버튼 다섯 개를 확인할 수 있을 것이다. 귀여운 어피치가 있는 첫 번째 버튼부터 보자 1. Update Frames - 제약이 잡혀 있는 컴포넌트를 옮겼을 때, 누르면 원래 제약의 위치로 돌아감 2. Add New Alignment Constraints - 정렬 제약을 추가 - 주로 x축의 가운데에 정렬하는 Horizontally in Container - 주로 y축의 가운데에 정렬하는 Vertically in Container - 그 외 다양한 정렬 기능이 있고, 여러 컴포넌트를 선택하고 함께 정렬할 수도 있음 (아래 예시와 같이) 3. Add New Constraints - attribute에 해당하는 제약을 추가 가능 (핀) ___어디서 얼마.. 2023. 3. 22. 0. Auto Layout 집중 공략 오토레이아웃을 완전 처음 접했을 때는 온갖 빨간 줄에 시달렸었다. 스토리보드를 통해 오토레이아웃을 잡기도 하고 코드로도 잡아보며 어느정도 사용해 보고 나니 간단한 에러는 해결할 수 있었다. 하지만 지금까지는 너무나도 간단한 레이아웃들이었다고 생각한다. 따라서 아주 복잡한 화면구성이 필요한 순간에도 오토레이아웃을 잘 잡을수 있는 능력을 습득하고자 따로 공부를 더 하기로 한다. (화려한 애니메이션에도 욕심이 많다..) 오토레이아웃에서 '제약'은 필수이다. (top, leading, trailing, bottom에 제약을 걸어봤을 것이다.) 오토레이아웃의 제약은 수식으로도 표현할 수 있다.(원래 수식으로 되어 있다. 스토리보드로 간단하게 쓸 수 있도록 되어 있을 뿐) 위 그림을 보면 빨간색 뷰의 앞부분(lea.. 2023. 3. 21. 이전 1 다음
