SwiftUI - view layout

Sunho·2023년 3월 20일
0

SwiftUI

목록 보기
1/2

그동안 uikit code base, storyboard기반으로 개발을 해봤다. 애플아카데미에 들어오니 제일 처음이자 마지막까지 배우는건 단 하나 바로 swiftUI 였다.
그동안 오토레이아웃에 누구보다 생각하고 집중하던 나로서는 swifui의 preview배치가 뭔 논리로 되었고 어떻게 뷰에 뜨는 과정이 있는지, 달라진 환경으로 인해 거의 다시 뉴비가 된 기분이였다😭😭😭😭😭😭
. 그래서 다시!! 초보자의 마음으로 내 게시물 업로드 시작! 진짜 오늘부터 자주 올라올꺼니까 많이 많이 읽어주세요


Layout Basics

  1. 부모 뷰는 자식 뷰에게 자신의 사이즈 그대로 제안
  2. 자식 뷰는 부모의 사이즈와 함께 자신의 display contents 고려해서 자신의 사이즈를 정한다. 그리고 다시 부모에게 알려준다.
  3. 부모는 자식이 결정한 사이즈를 가지고 자식 뷰를 자신의 좌표공간에 놓는다. 그런데 여기서!! 가운데에 놓는다.
  • layout neutral : body를 가진 모든 상위 뷰는 그들의 경계가 body의 경계와 동일한 것.
struct ContentView: View{
	var body: some View{
    	Text("heelo")}}

예를 들어 이 기본코드안에 body와 contentVIew는 동일한 경계를 갖게 된다. 그렇게 되면 text가 공간을 결정하게 되고 부모뷰는 root view가 된다.


Stack layout 이해하기

swiftui에서 주구장창 보게 되는 놈들이 있는데 바로 Hstack, VStack이다. 그렇다면 이 스택놈들의 layout은 어떻게 구성되어 있을까?
1. child view들끼리 가지는 spacing 크기 만큼 부모가 준 사이즈에서 뺀다.
2. Child View들의 요소만큼 같은 크기로 나눈다.
3. 우선순위에 따라 사이즈 제안4.
4. 모든 child view의 사이즈가 결정되면 처음에 계산했던 spacing과 함께 child view들 정렬.
5. 자신의 크기를 Child View들을 수용할 정도로만 결정후 parent에게 응답.
그 후 많은 자료를 찾던중 좀더 시각화된 좋은 자료를 찾았다.
Image 위에 Frame뷰가 있는데 프레임이 30대 30으로 공간을 마련한 후 이미지는 본연의 크기인 20*20만 사용하게 되는것이다. 그렇다보니 우리가 지금까지 생각했던것과 달리 frame은 제약조건이 아니다!!!!! 이렇게 계층형으로 뷰가 있다보니까 왜 순서가 중요한지 이해가 되었다.

참고자료:
https://sujinnaljin.medium.com/swiftui-swiftui-%EC%9D%98-layout-3-%EB%8B%A8%EA%B3%84-cf70ba00f88e
여기 설명 진짜 잘되어있어요!! 제 글이 부족하면 여기로들어가서읽어보세요

profile
앱개발자

0개의 댓글