SwiftUI size rendering algorithm

SwiftUI 에서 size 를 결정하는 방식은 UIKit 과 다르다.

UIKit 은 parentView 를 기준으로 childView 의 size를 결정하는 반면

SwiftUI는 childView를 기준으로 parentView 가 resizing 될 수 있다.
(물론 parentView 가 몇가지 size를 child 에게 제안한다.)

순서대로 나열해 보자면

1. The parent view determines the available frame at its disposal.
본인이 제공가능한 view size 계산해서

2. The parent view proposes a size to the child view.
그걸 child 에게 제안한다.

3. Based on the proposal from the parent, the child view chooses its size.
그 제안에 따라서 child 가 size 결정한다.

4. The parent view sizes itself such that it contains its child view.
parent 가 그 사이즈에 맞게 본인 사이즈를 바꾼다.

This process is recursive, starting at the root view, down to the last leaf view in the view hierarchy.
이 과정은 재귀적으로 view 계층에서 마지막 view가 생성될 때 까지 진행된다.

이 알고리즘대로 코드를 짜봤다.

import UIKit

// view 를 2차원 배열로 나타냄
// 0은 사용가능 한 view
// 0아닌 정수는 (1,2,3,4...) 각각의 다른 view 를 뜻함
// 이미 0,1 과 7,8에 view 가 있다고 가정
var parent : [Int] = [1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0]

//스크린 출력
func printScreen(_ layout : [Int]) {
    for item in layout {
        print(item, terminator : "")
    }
    print("")
}

//입력된 view 에 대한 가능한 size 정보반환
func returnAvailableSize(_ layout : [Int])  -> [[Int]] {
    var availablePos : [[Int]] = [[]]
    var state = false
    var tmp : [Int] = []
    
    for i in 0..<layout.count {
        if layout[i] == 0 {
            state = true
            tmp.append(i)
        }else {
            state = false
        }
        if i == layout.count-1 {
            state = false
        }
        
        if state == false && tmp.count != 0 {
            availablePos.append(tmp)
            tmp.removeAll()
        }
    }
    //배치 가능한 index 배열을 준다.
    availablePos.removeFirst()
    return availablePos
}

//가증한 size에서 랜덤으로 child 에게 제시할 size 를 반환 (start, end)
func proposeView(_ layout : [[Int]] ) -> (Int, Int){
    let sizepick = layout.randomElement()!
    var startIndex = sizepick.randomElement()!
    var endIndex = sizepick.randomElement()!
    startIndex = min(startIndex,endIndex)
    endIndex = max(startIndex,endIndex)
    return (startIndex,endIndex)
}

//child 가 제시된 size에서 본인이 moreSize만큼 필요하면 더 size를 요구함
//more size는 0에서 10사이 랜덤값
func pickSize(_ tuple : (Int,Int),_ moreSize : Int) -> (Int,Int) {
    let start = Int.random(in: tuple.0...tuple.1 + moreSize)
    let end = Int.random(in: tuple.0...tuple.1 + moreSize)
    return (min(start,end),max(start,end))
}

//해당 child 가 요구한 view 를 parent에게 반영, 더 큰 size를 요구하면 parent 의 size를 수정
func addSubView(_ subView : (Int,Int),_ viewID : Int){
    let parentSize = parent.count
    print("addSubView")
    if subView.0 > parentSize-1 || subView.1 > parentSize-1 {
        print("parentView resized")
        //child 가 parent 보다 더큰 size 를 원한다면
        let diff = subView.1 -  parentSize + 1
        print("need more size for child : \(diff)")
        //차이만큼 size를 parent 에 추가
        for _ in 0..<diff {
            parent.insert(0, at: subView.0)
        }
    }
    //해당 childview 를 parent 에 addsubView
    for i in subView.0...subView.1 {
        parent[i] = viewID
    }
}



for i in 2..<9 {
    print("parent view")
    printScreen(parent)
    print("available size")
    print(returnAvailableSize(parent))
    let tuple = proposeView(returnAvailableSize(parent))
    print("proposed size")
    print(tuple)
    print("child picked size")
    let childSize = pickSize(tuple,Int.random(in: 0...10))
    print(childSize)
    print("child add subView")
    addSubView(childSize, i)
    print("loop \(i) endeed")
    printScreen(parent)
    print("-------------------------------------------------------------------------------")
}

 

출력값

2부터 8까지 8개의 childview 를 populating 한다고 가정한다.

parent view
1100000110000000000000
available size
[[2, 3, 4, 5, 6], [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]]
proposed size
(9, 9)
child picked size
(9, 10)
child add subView
addSubView
loop 2 endeed
1100000112200000000000
-------------------------------------------------------------------------------

• parent view 를 출력한다.
• parent view 에서 사용 가능한 view size 를 2차원 배열로 리턴한다.
• 사용 가능한 size 에서 child 에게 제안할 size를 골랐다.
• 그 size 내부에서 child 가 본인의 사이즈를 선택한다.
• 선택한 사이즈를 parent view 에 표시한다. (parent view 보다 크면 parent view size 가 커진다.)
• 2 loop 가 끝나고 9, 10 번째에 view 2 가 들어가있다.

parent view
1100000112200000000000
available size
[[2, 3, 4, 5, 6], [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]]
proposed size
(19, 19)
child picked size
(19, 27)
child add subView
addSubView
parentView resized
need more size for child : 6
loop 3 endeed
1100000112200000000333333333
-------------------------------------------------------------------------------

• parent view 를 출력한다.
• parent view 에서 사용 가능한 view size 를 2차원 배열로 리턴한다.
• 사용 가능한 size 에서 child 에게 제안할 size를 골랐다.
• 그 size 내부에서 child 가 본인의 사이즈를 선택한다. 여기서는 parent view 보다 큰 size를 원하고 있다.
  imageView native resolution과 같이
• 선택한 사이즈를 parent view 에 표시한다. (parent view 보다 크면 parent view size 가 커진다.)
• 2 loop 가 끝나고 19에서 27까지 view 3 가 들어가있다.

parent view
1100000112200000000333333333
available size
[[2, 3, 4, 5, 6], [11, 12, 13, 14, 15, 16, 17, 18]]
proposed size
(13, 18)
child picked size
(19, 22)
child add subView
addSubView
loop 4 endeed
1100000112200000000444433333
-------------------------------------------------------------------------------
parent view
1100000112200000000444433333
available size
[[2, 3, 4, 5, 6], [11, 12, 13, 14, 15, 16, 17, 18]]
proposed size
(2, 6)
child picked size
(3, 7)
child add subView
addSubView
loop 5 endeed
1105555512200000000444433333
-------------------------------------------------------------------------------
parent view
1105555512200000000444433333
available size
[[2], [11, 12, 13, 14, 15, 16, 17, 18]]
proposed size
(2, 2)
child picked size
(3, 6)
child add subView
addSubView
loop 6 endeed
1106666512200000000444433333
-------------------------------------------------------------------------------
parent view
1106666512200000000444433333
available size
[[2], [11, 12, 13, 14, 15, 16, 17, 18]]
proposed size
(11, 11)
child picked size
(11, 13)
child add subView
addSubView
loop 7 endeed
1106666512277700000444433333
-------------------------------------------------------------------------------
parent view
1106666512277700000444433333
available size
[[2], [14, 15, 16, 17, 18]]
proposed size
(15, 16)
child picked size
(16, 20)
child add subView
addSubView
loop 8 endeed
1106666512277700888884433333
-------------------------------------------------------------------------------