[Flex] UIComponent의 폭, 높이 관련 속성에 대한 정리

2007/10/30 11:18
UIComponent를 상속받은 모든 컴포넌트(Box, Button 등)는 자신의 크기를 조절하기 위한 다양한 속성을 가지고 있다. 크게 명시적 크기(Pixel 단위)와 비율크기(Percent 단위)로 구분된다. 생각해보면 아주 간단하다고 생각될 수 있으나 내부적으로 살펴보면 쉽게만 생각할 수 없는 것 같다. 왜냐하면 이러한 속성에 대해서 정확한 이해가 없다면 컴포넌트를 만들때  어려움이 따를 수 있기 때문이다.

이런 속성에 대해 SDK만를 분석해서 파악하면 되지 않겠냐고 생각할 수 있다.
물론 필요할 때가 분명 있다. 하지만 이해를 위해서 한번 적용해보고 값의 변화를 보면서 알아내는 것도 하나의 방법일 수 있겠다. 나는 적용도 하면서 필요할 때 SDK를 분석하며 이해했다.

UIComponent의 크기 조절에 대한 속성은 다음과 같다.
  • width, height : 실제크기, 명시적 크기나 비율크기의 조정에 따라서
  • explicitWidth, explicitHeight : 명시적 크기, 비율크기가 정해지면 이 값은 NaN
  • percentWidth, percentHeight : 비율 크기(0~100), 부모 컨테이너의 크기에 따라 조정됨, 명시적크기가 정해지면 이 값은 NaN
  • measuredWidth, measuredHeight : default 크기, 명시적크기가 정해지면 이 값은 항상 0
  • measuredMinWidth, measuredHeight : default 최소 크기
  • minWidth, minHeight : 최소크기, 명시적 크기가 정해지면 이 값을 정해도 적용안됨. 비율크기가 무한정으로 작아지는 것을 방지하기 위해 최소한계 크기를 정하기 위함. 이 값이 정해지면 명시적최소크기에 적용됨
  • maxWidth, maxHeight : 최대크기, 명시적 크기가 정해지면 이 값을 정해도 적용안됨. 비율크기가 무한정으로 커지는 것을 방지하기 위해 최대한계 크기를 정하기 위함. 이 값이 정해지면 명시적최대크기에 적용됨
  • explicitMinWidth, explicitMinHeight : 명시적최소크기, 최소크기가 정해지면 이 값이 정해진다. 만약 정해지지 않으면 반환값은 default 최소크기이다. 정해지지 않으면 NaN
  • explicitMaxWidth, explicitMaxHeight : 명시적최대크기, 최대크기가 정해지면 이 값이 정해진다. 만약 정해지지 않으면 반환값은 DEFAULT_MAX_WIDTH(=10000),DEFAULT_MAX_HEIGHT(=10000) 이다. 정해지지 않으면 NaN
  • scaleX, scaleY : 스케일 값, 명시적인 크기가 정해졌을 때만 그 의미가 있다. 비율크기가 정해지면 부모 컨테이너 크기에 따라 실제크기가 정해지므로 의미가 없어진다.
  • unscaledWidth, unscaledHeight : 스케일 적용하지 않은 크기, width/scaleX , height/scaleY 로 계산된다.
크기 조절외에도 스케일 값에 의해 적용되는 속성이 있다.


  • mouseX, mouseY :  스케일이 적용안된 local mouse 좌표값, 이 값은 스케일값이 1일 경우에는 픽셀단위 위치로 생각하면 된다. 하지만 스케일 값이 정해지면 컴포넌트의 마우스 좌표값이 스케일이 적용 안된 값으로 반환한다. 즉, mouseX = (픽셀단위 mouse X좌표값) / scaleX 처럼 동작한다.

아래는 위에서 언급한 속성들에 대해서 이해할 수 있도록 만들어본 프로그램이다.
  • 좌측은 width와 height를 명시적으로 값을 주었다.
    즉, MXML상에서 width, height를 직접 숫자를 부여했다는 것이며
    이렇게 하면 명시적 크기인 explicitWidth와 explicitHeight값에 적용된다. 반대로 percentWidth, percentHeight값은 NaN으로 할당된다.
    명시적크기를 width="100"을 주는 대신 explicitWidth="100"을 주어도 동일한 동작을 한다.
  • 우측은 width와 height를 비율값을 주었다.
    즉, MXML상에서 width,height값을 %값으로 숫자를 부여했다.
    이렇게 하면 명시적 크기는 NaN이며 percentWidth와 percentHeight값에 적용된다.
    물론 MXML상에서 직접 비율크기에 적용시켜도 상관없겠다. 즉 width="100%" 대신 percentWidth="100"해도 상관없다.
http://blog.jidolstar.com/attachment/cfile4.uf@144A52274ADC2E4F631E00.swf - 크게보자~ ^^




여기서 반드시 기억해야할 점은 크게 두가지이다.
  • MXML상에서 width, height값을 줄때 2가지 방법으로 쓸 수 있다. 즉 명시적 크기비율 크기 적용이다. 이에 대해서는 [Flex] metadata PercentProxy 이해하기 를 읽어보면 도움이 되겠다.
    만약 ActionScript상에서라면 명시적 크기는 explicitWidth또는 width값을 부여하면 되겠다. 하지만 비율크기는 반드시 percentWidth,percentHeight에 %를 빼고 적용하면 되겠다.
  • 명시적인 크기비율 크기는 서로 배타적이다. 한쪽이 정해지면 반대쪽은 NaN이다.
좌측만 보자. 좌측은 실제크기 width와 height를 조정할 수 있도록 되어 있다.
width를 좌우로 조정해보자. 어느 값이 바뀌는가?
explicitWidth, unscaledWidth값이 바뀌는 것을 확인 할 수 있을것이다. 즉, 명시적 크기가 조정되면 실제크기와 스케일이 적용안된 크기에 직접적은 영향을 준다는 것을 보여준다. 

이러한 동작은 width, height값을 변경시키는 대신 explicitWidth, explicitHeight에 적용해도 동일하다고 앞서 언급했다.

명시적 크기가 정해졌으므로 비율크기는 NaN인 것을 확인 할 수 있다.

프로그램상에 최소크기 폭(minWidth)와 최대크기 폭(maxWidth)값을 주었기 때문에 명시적최소크기 폭(explicitMinWidth)와 명시적최대크기 폭(explicitMaxWidth)값이 적용되었지만 명시적 크기 폭(explicitWidth) 값에 전혀 영향을 주지 못한다. 즉, 범위를 50,200으로 주었지만 명시적 크기 폭값은 그 범위를 넘어설 수 있다.

연두색 영역은 Box 컨테이너 영역이다.
명시적 크기는 이 컨테이너 영역과 전혀 상관없이 동작하는 것 또한 알 수 있겠다.


우측을 보자. 비율크기를 조정하도록 했다. 비율크기(percentWidth, percentHeight)는 각각 50,50을 주었기 때문에 연두색 Box 영역의 50% 크기만 가지도록 되었고 그에 따른 실제크기(width, height)가 적용된 것을 확인할 수 있겠다.

언급했듯이 비율크기가 정해졌으므로, 명시적크기는 NaN으로 되었다.

비율크기 폭(percentWidth)을 조정해보자. 그럼 실제크기 폭(width)와 스케일이 적용안된 크기 폭(unscaledWidth)값만 변한다.

더 움직여 보자. 어느 순간 비율크기 폭(percentWidth)이 100%나 0%도 안되었는데 실제크기 폭(width)와 스케일이 적용안된 크기 폭(unscaledWidth)값이 변하지 않는다. 그 한계값은 최소크기폭(minWidth)과 최대크기폭(minHeight)와 관계되어 있음을 알 수 있다. 즉  명시적인 크기와 달리 비율 크기는 최소크기, 최대크기에 영향을 받게 되어 있다.

우측의 경우 최소크기 높이(minHeight)와 최대크기 높이(maxHeight)는 정하지 않았으므로 비율크기 높이(percentHeight)가 그대로 적용되는 것을 확인할 수 있겠다.


좌측, 우측 모두
스케일 값이 1인 상태에서
마우스를 강아지 위에 올려보자. 그러면서 각각의 마우스 위치인 mouseX, mouseY의 변화를 보자. 강아지 사진의 맨 우측아래로 마우스를 움직이면 실제크기(width,height)값과 같은 값이 나오는 것을 확인할 수 있을 것이다. 꼭 확인해보라. 좌우측 명시적 크기와 비율 크기를 변경하면서 우측아래 마우스 좌표값을 확인해도 비슷한 결과가 나올것이다. 경험적으로 당연한 결과라 할 수 있겠다.


좌측을 보자
스케일 값을 조정해보자. 1에서 2까지 조정하고 전과 같이 마우스 위치를 강아지 그림의 맨우측아래에 놓아보자. 스케일 폭값이 1일때 실제크기폭이 140면 explicitWidth는 280이 될 것이다. 하지만 unscaledWidth는 그대로 140이다. 재미있게도 mouseX는 140이다. 즉, mouseX는 스케일값의 변화에 상관없이 스케일이 1일때 픽실단위 위치를 나타내준다.

스케일 값이 변할 때, 최대크기, 최소크기, 명시적최대크기,명시적최소크기값도 변하는 것을 확인할 수 있다. 즉 이러한 값들도 스케일링이 적용된다는 것을 뜻한다. 경험적으로 당연한 결과이다.

우측을 보자
위 처럼 스케일 폭값(scaleX)을 조정해보자. 조정해도 실제크기는 전혀 변화가 없다. 비율크기도 변하지 않는다. 하지만 최소크기(minWidth), 최대크기(maxWidth), 명시적최소크기(explicitMinWidth), 명시적최대크기(explicitMaxWidth), 디폴트크기(measuredWidth), 스케일적용안된크기(unscaledWidth)는 변한다.
마우스를 사진의 우측하단에 놓으면 재미있게도 사진 크기는 전혀 조정이 되지 않았는데 스케일 값이 적용된 것처럼 보여준다.

비율크기를 정하면  경험적으로 볼 때 상당히 안맞는 부분이 있다는 것을 확인할 수 있다.
그러므로 비율크기를 사용할 경우 스케일은 큰 의미가 없다. 생각해보면 비율크기 자체가 바로 스케일이 될 수 있는 것이다. 왜냐하면 명시적 크기를 줄 경우와 달리 부모 컨테이너 크기에 의존해서 크기가 조정되기 때문이다. 그러므로 비율크기를 사용하는 경우 스케일은 사용하지 않는 것이 좋겠다.


디폴트 크기(measuredWidth, measuredHeight)는 무엇일까?
이 값은 비율크기(percentWidth, percentHeight)와 상관이 있으나 명시적크기(explicitWidth, explicitHeight)와는 관계가 없다. 비율크기가 주어지면 디폴트 크기가 계산되어진다. 명시적크기가 없으므로 명시적 크기대신 사용하는 컴포넌트의 크기가 되는 것이다. 실제로 setActualSize()함수를 내부적으로 호출시 getExplicitOrMeasuredWidth()와 getExplicitOrMeasuredHeight()를 호출하는데 이 함수는 다음처럼 구성된다.

    public function getExplicitOrMeasuredWidth():Number
    {
        return !isNaN(explicitWidth) ? explicitWidth : measuredWidth;
    }

    public function getExplicitOrMeasuredHeight():Number
    {
        return !isNaN(explicitHeight) ? explicitHeight : measuredHeight;
    }

즉, 명시적인 크기가 주어지면 명시적 크기를 이용하고 이 값이 NaN이면 비율크기지정에 따른 디폴트 크기 값을 사용하겠다는 것이다. 디폴트 크기는 measure()메소드에서 결정되며 명시적 크기를 지정하지 않은 상태에서 필요한 경우 measure()메소트를 재정의 하고 invalidateSize()에 의해 호출하면 되겠다.


정리하며
이 글은 크기에 대해 기본적인 속성에 대해서 한번 정리했을 뿐이지 완벽한 설명은 아니라고 생각한다.
가장 좋은 방법은 각각 속성에 대해서 구현해보고 이해하는 것이 좋겠다.
가령, 버튼 3개를 30%,20% 잡은 상태에서 중간 버튼의 minWidth속성을 지정했을 때와 지정하지 않았을때 차이를 실제로 프로그램을 만들어 정리해보는 것이다.
또한 UIComponent의 크기관련 속성에 대한 함수에 대해서 훑어보면서 공부해도 좋겠다.
약간 헷갈렸던 부분은 바로 스케일값을 지정했을때 다른 속성들과의 연관성이였던 것 같다.
꼭 한번씩 구현해봐서 자기것으로 만드는 습관을 기르는게 좋겠다.


관련 정보
컴포넌트의 크기와 위치의 제어 : http://flexdocs.kr/docs/flex2/docs/00000516.html


글쓴이 : 지돌스타(http://blog.jidolstar.com/260)

Adobe Flex / ActionScript 3.0 , , , , , , , , , , , , , , , , ,

  1. 요즘 sdk 소스까보고 있는데 지돌스타님 블로그가 라이브독보다 낫네요.
    잘 보고 갑니다.

  2. 사이즈 속성이 워낙 많아서 공부 안하다가.. 이제야 해볼라구 찾아다녔는데..
    진짜 라이브독보다 훨씬 좋네요.. 많은 도움이 되었습니다. ^^