퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 레이아웃

레이아웃

퓨즈는 다양한 화면 크기와 종횡비에 맞는 반응형 방식으로 UI를 만들 수 있는 매우 강력한 레이아웃 시스템을 제공합니다. 또한 광범위한 입력 유형 및 크기에서 작동하는 컴포넌트를 만들 수 있습니다.

UI 레이아웃 정의하기

퓨즈의 UI는 패널의 계층 구조와 Rectangle 및 Image와 같은 다른 기본 요소에 의해 생성됩니다. StackPanel, Grid 및 DockPanel과 같은 다양한 Panel 유형은 사용 가능한 화면 크기에 상대적으로 여러 요소를 서로 상대적으로 배치하고 크기를 지정하는 데 사용됩니다.

다음 예제는 다양한 색상의 사각형으로 채워진 2개의 행과 3개의 열이 있는 격자를 만드는 방법을 보여줍니다.

<App>
    <Grid RowCount="2" ColumnCount="3">
        <Rectangle Color="#ff4500"/>
        <Rectangle Color="#ee7942"/>
        <Rectangle Color="#ee6363"/>
        <Rectangle Color="#ffb90f"/>
        <Rectangle Color="#eeb422"/>
        <Rectangle Color="#eedc82"/>
    </Grid>
</App>

보다 복잡한 구조를 만들기 위해 여러 개의 패널을 중첩할 수 있습니다:

<App>
    <StackPanel>
        <DockPanel Height="50">
            <Text Value="Hello" Dock="Left"/>
            <Rectangle Color="#f00" />
        </DockPanel>
        <DockPanel Height="50">
            <Text Value="World" Dock="Left"/>
            <Rectangle Color="#00f" />
        </DockPanel>
    </StackPanel>
</App>

요소 레이아웃(Element layout)

Visual 요소를 나타내는 각 UX 태그에 대해 Width, Height, Opacity 등의 요소에 영향을 주는 속성을 설정할 수 있습니다. Alignment, Padding 및 Margin을 사용하여 부모 노드와 자식 노드와의 관계를 제어할 수도 있습니다.

Margin / Padding

Margin과 Padding은 가장 많이 사용되는 요소 속성 중 두 가지입니다. 여백은 요소 가장자리에서 해당 컨테이너 가장자리까지의 거리를 제어합니다. Padding은 Margin과 비슷하게 작동하지만 대신 안쪽으로 작동합니다. 가장자리에서 자식 요소의 해당 가장자리까지의 거리를 설정합니다.

Margin과 Padding은 모두 float4 유형이며, 이는 4개의 부동 소수점 값 컴포넌트를 가짐을 의미합니다. UX에서는 쉼표로 구분된 목록으로 지정됩니다:

<Panel Margin="10,20,30,40" />
<Panel Padding="10,20,30,40" />

각 값은 네 개의 가장자리 “10(왼쪽), 20(위쪽), 30(오른쪽), 40(아래)”요소 중 하나를 나타냅니다.

우리는 또한 단축 형식으로 작성할 수 있습니다:

<Panel Margin="10" /> <!-- "10,10,10,10"으로 확장됩니다. -->
<Panel Padding="10,20" /> <!-- "10,20,10,20"으로 확장됩니다. -->

정렬(Alignment)

요소가 부모에 의해 할당된 사용 가능한 공간보다 작은 경우 Alignment 속성을 사용하여 사용 가능한 공간의 위치를 제어할 수 있습니다.

다음 예제는 화면의 네 구석에 사각형을 배치하는 방법을 보여줍니다.

<App>
    <Panel>
        <Rectangle Alignment="TopLeft"     Width="40" Height="40" Color="Red" />
        <Rectangle Alignment="TopRight"    Width="40" Height="40" Color="Blue" />
        <Rectangle Alignment="BottomLeft"  Width="40" Height="40" Color="Green" />
        <Rectangle Alignment="BottomRight" Width="40" Height="40" Color="Yellow" />
    </Panel>
</App>

Width / Height

Width 및 Height 속성을 사용하여 지정된 Element가 화면에서 특정 치수를 갖도록 할 수 있습니다. 기본적으로 레이아웃은 자동으로 설정됩니다. 즉, 요소의 크기가 레이아웃 엔진에 의해 자동으로 결정됩니다. 명시적으로 이를 구체적인 값으로 설정하면 요소의 크기를 세밀하게 제어할 수 있습니다.

이러한 속성은 서로 독립적으로 설정할 수 있습니다. Width=”30px” 및 Height=”Auto”.

또한 MinWidth/MaxWidth 및 MinHeight/MaxHeight와 같은 속성을 사용하여 요소의 크기를 각각 지정된 최소 또는 최대 값으로 제한할 수 있습니다.

단위(Units)

Width, Height, X, Y와 같은 많은 레이아웃 속성을 다른 단위로 지정할 수 있습니다. 대부분의 경우 다음 단위를 사용할 수 있습니다.

  • 퍼센트[Percent] – Width=”50%”는 요소의 Width를 부모 너비의 50%로 만듭니다.
  • 포인트[Points] (기본값) – Width=”50″은 요소의 Width를 50 포인트로 만듭니다. 즉, 너비가 모든 화면 밀도에서 동일하게 나타납니다.
  • 픽셀[Pixels] – Width=”50px”는 Width를 정확히 50 픽셀로 만듭니다. 즉, 픽셀 밀도가 높은 화면에서는 너비가 더 작게 표시됩니다.

레이아웃 규칙(Layout rules)

패널은 여러 요소를 배열하는 데 사용됩니다. 모든 패널 유형에는 연결된 Layout 객체가 있습니다. 일반 패널 유형은 DefaultLayout을 사용하여 하위 항목을 배치합니다. 그것들을 Z-축상에 놓는 것 외에는 아무것도 하지 않습니다. StackPanel은 연관된 StackLayout을 가지며 자식을 수직 또는 수평 스택에 배치합니다. StackPanel 및 기타 패널 유형에 대한 자세한 내용은 다음 하위 절을 참조하십시오.

Grid 및 DockPanel과 같은 일부 패널 유형에는 레이아웃을 위해 하위 요소별로 정보가 필요합니다. 이 경우 패널 유형과 관련된 첨부된 속성을 사용할 수 있습니다. 연결된 속성은 ClassName.PropertyName=”Value”형식이며 모든 요소에서 사용할 수 있습니다. 모호하지 않은 모든 경우에 “Class” 부분을 생략하고 PropertyName=”Value”를 수행할 수 있습니다. 이 경우 첨부된 속성은 일반적인 속성과 구문상 동일합니다.

다음은 몇 가지 예입니다:

  • Dock – Dock은 연결된 속성을 사용하여 특정 요소를 도킹해야하는 면[위쪽(Top), 아래쪽(Bottom), 왼쪽(Left), 오른쪽(Right), 채우기(Fill)]을 지정합니다.
  • Grid – 행(Row) 및 열(Column) 속성을 사용하여 요소를 배치할 행 및 열을 지정합니다.

다음은 UX에서 어떻게 보이는지에 대한 예입니다:

<Grid ColumnCount="3" RowCount="1">
    <Panel Row="0" Column="0" Color="#f00"/>
    <Panel Row="0" Column="2" Color="#00f"/>
</Grid>

그리기 순서 및 ZOffset 속성

일반적으로 요소가 그려지는 순서는 자식 목록의 위치에 따라 다릅니다. 문서에서 위쪽에 정의된 요소는 아래쪽에 정의 된 요소 위에 그려집니다. 다음과 같은 경우 빨간색 사각형이 녹색 원 위에 그려집니다.

<Panel>
    <Rectangle Color="Red" Margin="100"/>
    <Circle Color="Green"/>
</Panel>

이 동작을 제어하려면 ZOffset 속성을 사용할 수 있습니다. 이 속성은 기본값이 0.0인 부동 소수점 값입니다. 높을수록 요소가 위쪽에 그려집니다.

다음 예제에서는 1.0의 ZOffset이 0.0의 사각형 ZOffset(기본값)보다 높기 때문에 Circle을 Rectangle 위에 그립니다.

<Panel>
    <Rectangle Color="Red" ZOffset="0.0" Margin="100"/>
    <Circle Color="Green" ZOffset="1.0"/>
</Panel>

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No

How can we help?