Layout Update

위와 같은 구조에서 Layout 노드에 아이템을 추가/삭제할 때마다 Layout 노드의 사이즈도 유동적으로 변한다.

 

아이템 간의 padding(간격)과 레이아웃에 속해 있는 아이템들의 넓이들을 모두 더한 값을 자동으로 계산한다.

 

그러나 스크립트에서 아이템을 추가했을 때는 자동으로 계산이 되지 않는다.

 

 

let width1 = this.testLayout.node.width;                        // 391.48
        
let newLabel = cc.instantiate(this.testLayout.node.children[0]);
newLabel.setParent(this.testLayout.node);

let width2 = this.testLayout.node.width;                        // 391.48

실제로 위의 코드를 디버깅해보면 레이아웃에 새 아이템을 추가한 뒤 노드의 사이즈를 확인해도 이전과 달라지지 않았다.

 

만약 width2를 한 프레임(1 델타타임) 다음에 확인해보면 그때는 조정된 레이아웃의 사이즈가 나온다.

 

다음 프레임이 오기 전에 사이즈를 계산하는 과정이 있기 때문이다.

 

그러면 꼭 한 프레임을 기다린 뒤 사이즈를 구하거나, 추가한 아이템 사이즈를 통해 직접 계산을 해야 할까?

 

 

let width1 = this.testLayout.node.width;                        // 391.48
        
let newLabel = cc.instantiate(this.testLayout.node.children[0]);
newLabel.setParent(this.testLayout.node);
this.testLayout.updateLayout();                                 // 강제로 사이즈 계산 실행

let width2 = this.testLayout.node.width;                        // 489.35 (391.48 + 97.87)

Layout 컴포넌트에는 강제로 레이아웃의 사이즈를 다시 계산하도록 하는 updateLayout함수가 있다.

 

아이템을 추가하고 이 함수를 실행하면 Resize 된 레이아웃의 사이즈가 나온다.

 

 

주의할 점은, 레이아웃 노드의 active가 꺼져있는 상태에서 아이템을 추가하면

 

자동으로 Resize 함수가 실행되지 않아서 조정된 사이즈를 얻을 수 없다.

 

그리고 updateLayout 함수를 실행해도 동작하지 않는다.

 

이 경우에는 레이아웃의 active를 true로 켜주고, 또 updateLayout 함수까지 실행해야 조정된 사이즈가 나온다.