티스토리 뷰

tmp

Fuse - Grid class

박스여우 2017. 6. 9. 20:09

안녕하세요 박스여우입니다. 이번 포스팅에서는 제가 아주 오래전에 한번 소개해드렸던 Fuse의 Grid class의 사용법에 대해 알아보도록 하겠습니다.



Grid란?

Grid는 Fuse에만 있는 개념이 아니라 Android, Bootstrap 등과 같이 레이아웃을 구성하는 종류중 하나로 많이 쓰이고 있습니다. Fuse에서도 Grid는 같은 개념으로 사용되고 있는데요, 레이아웃을 각각의 크기가 동일하거나 다른 행과 열로 나누어 그안에 컴포넌트들을 배치할 수 있습니다.


1
<Grid RowCount="4" ColumnCount="2"/>
cs


위의 코드는 Grid의 가장 기본적인 코드로 동일한 크기의 4개의 행과 2개의 열로 레이아웃을 구성합니다. Grid의 요소는 왼쪽 오른쪽으로, 위쪽부터 아래쪽으로 차례대로 배치됩니다. 하지만 아래코드와 같이 RowColumn속성을 통해 요소가 배치될 셀을 명시적으로 지정할 수 있습니다.


1
2
3
4
<Grid RowCount="1" ColumnCount="2">
    <Rectangle Row="0" Column="1" Color="Red"/>
    <Rectangle Row="0" Column="0" Color="Blue"/>
</Grid>
cs



또한 ColumnSpanRowSpan속성을 통해 하나의 요소가 여러개의 열과 행을 차지하도록 만들어줄 수 있습니다.


1
2
3
<Grid RowCount="2" ColumnCount="2">
    <Rectangle ColumnSpan="2" RowSpan="2" Color="Red"/>
</Grid>
cs



Grid 속성

각각 같은 크기의 행과 열로만 레이아웃을 구성하게된다면 굉장히 단조로운 구조의 레이아웃만 구성할 수 밖에 없습니다. 하지만 각각의 행과 열의 크기 또는 비율 속성을 주어 보다 유연한 레이아웃을 구성할 수 있습니다.


1
<Grid Rows="10,10,50" Columns="1*,1*,3*"/>
cs


위와같이 Grid를 구성하게 되면 각각 10, 10, 50 포인트의 크기를 가지는 3개의 행과 20%, 20%, 60%를 차지하는 3개의 열로 구성되는 Grid레이아웃을 사용할 수 있습니다. 비율의 계산법은 값/총합으로 생각보다 간단합니다.


하지만 비율로 레이아웃을 구성할때에는 주의할점이 있습니다. 그리드가 부모 패널을 채우도록 고정되어있거나 고정된 크기일경우에만 사용이 가능합니다. 이외에도 Auto 속성을 활용해 해당 셀의 엘리먼트 크기에 반응한 크기를 지정할 수 있습니다.



예제파일을 응용하여 최종적으로 만들어본 레이아웃입니다. 저도 Fuse를 학습하면서 포스팅 하고있기때문에 수준이나 질이 낮은점은 양해 부탁드립니다. ㅠㅠ 자세한 내용은 fuse document에서 확인하실 수 있습니다. https://www.fusetools.com/docs/fuse/controls/grid



댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함