FM SKIN의 기본 이해 (레이아웃에 관하여)[발롱도르~]
- spqlq
- 1210
- 8
- 16
스킨을 구성하고 있는 파일들을 열어서 보면
패널, 컨테이너, 위젯들과 항상 붙어 다니는 레이아웃이란 것을 볼 수 있습니다.
이 레이아웃에 대해 알아보는 시간을 가져봅시다.
<예시>
<layout class="arrange_horizontal_attachment" layout="-1,-2" offset="0" />
<layout class="stick_to_sides_attachment" alignment="vertical" inset="0" apply_to_children="true" />
<layout class="arrange_vertical_attachment" layout="86, 355, -1" offset="0" />
<layout class="fit_children_attachment" alignment="vertical, fill" offset="0" gap="0"/>
위에 보이는 것과 같은 것들을 항상 볼 수 있었을 거예요.
이것들은 무엇을 나타내는지 설명서가 있다면 좋았을텐데 아쉽게도 SI는 친절하지 않았어요
그래서 하나씩 해보면서 알아봅시다.
오늘 도움을 줄 세 친구 입니다.
빨강 1번, 초록 2번, 파랑 3번 입니다.
레이아웃은 클래스와 정렬또는 레이아웃, 갭, 인셋, 오프셋 등으로 이루어져 있습니다.
<layout class="~~" alignment="~~" offset="0" inset="0" gap="0" />
class는
stick_to_sides_attachment - stick 붙여, to sides 사이드에
arrange_horizontal_attachment - arrange 정렬해, horizontal 수평으로(가로로)
arrange_vertical_attachment - arrange 정렬해, vertical 수직으로(세로로)
fit_children_attachment - fit 맞춰, children 애들에게(하위 컨테이너나 위젯에게)
centre_in_parent_attachment - centre 중앙, in parent 부모의 (상위 컨테이너나 위젯)
등이 있습니다.
이해가 빠르신 분이라면 대충 어떤 것이고 어떻게 쓰일지 감이 오실거예요.
펨네분들은 모두 똑똑하신 분이니까 다 이해하셨으리라 생각하고 넘어가도록 하겠습니다.
gap - 간격, 말 그대로 여러개의 하위 컨테이너나 위젯이 있다면 그 사이 간격을 수치로 지정할 수 있습니다.
offset, inset - 이 것은 한국말로 무엇이라고 정의하기가 좀 애매하긴 한데, 대충 띄우기로 생각하면 될거예요.
alignment 에는 all, left, right, top, bottom, vertical, horizontal, fill, extend 등이 있습니다.
apply_to_children="true" 하위 컨테이너나 위젯에 적용하라라는 뜻입니다.
이제 하나씩 해보면서 어떻게 되는지 알아봅시다.
1. stick_to_sides_attachment
<layout class="stick_to_sides_attachment" alignment="all" apply_to_children="true" inset="0" />
stick_to_sides_attachment 사이드에 붙여
alignment="all" all 모두
하위 세 개의 컨테이너의 사이드를 모두, 상하좌우 붙여라는 말이 됩니다.
그래서 위 스샷처럼 1,2,3이 모두 상하좌우 다 붙어서 겹치게 됩니다.
alignment="vertical,horizontal" 이렇게 나누어서 쓸 수도 있습니다.
alignment="right,left,top,bottom" 이렇게도 됩니다.
즉, stick_to_sides_attachment 는 상하좌우의 경계를 지정하는 것을 알 수 있습니다.
응용을 해 봅시다.
alignment="left,right,bottom" 으로 하고
하위 컨테이너에 각각 넓이 300, 높이 500,400,300 을 지정했습니다.
속으로 어떤 결과가 나올거 같은지 생각해 보세요
이것과 같은 이미지를 떠올리셨어요?
alignmet="left,right,bottom" 왼쪽,오른쪽,아래를 사이드에 붙여라
에서 왼쪽,오른쪽 아래를 하위 3개 컨테이너의 사이드를 붙였습니다.
하지만 위는 정의되어 있지 않습니다.
하위 컨테이너에 넓이 300, 높이 300,400,500 이 지정되어 있지만
왼쪽과 오른쪽, 아래는 사이드로 붙여라고 상위컨테이너가 정의를 먼저 했기때문입니다.
상위 : 왼쪽, 오른쪽, 아래는 사이드에 붙여
하위 : 가로길이가 300 인데 왼쪽 오른쪽 어디에 붙여?
상위 : 왼쪽은 왼쪽, 오른쪽은 오른쪽에 붙여! 시키는대로 해!
하위 : ㅇㅋ, 그럼 아래랑 위도?
상위 : 아래는 아래에 붙이고, 위는 몰랑~ 맘대로해~
하위 : 아래는 아래로 붙이고, 위는.. 아! 내 높이가 각각 300,400,500 이지
그래서 위 스샷과 같은 결과가 나오게 됩니다.
2. arrange_horizontal_attachment, arrange_vertical_attachment
이제 상하좌우를 나누어 봅시다.
arrange_horizontal_attachment 와 arrange_vertical_attachment 를 씁니다.
horizontal 은 가로, vertical 은 세로로 구역을 나눌 수 있습니다.
가장 쉬운 방법은 수치로 지정해 주는 것입니다.
<layout class="arrange_horizontal_attachment" layout="-1,-2,500" offset="0" gap="0" />
<layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" />
horizontal 이므로 가로
layout="-1, -2, 500" 음수는 비율이고 양수는 픽셀수치가 됩니다.
따라서 3번째는 가로 500픽셀, 나머지를 1번과 2번이 1:2 넓이로 하라 입니다.
arrange_horizontal_attachment 는 가로구역만 지정하기 때문에
stick_to_sides_attachment 를 추가하여서 세로를 지정해 줍니다. vertical로 해주면 편하겠죠.
이제 alignment 를 활용하는 방법을 알아봅시다.
alignmet="left" 왼쪽으로... ?
왼쪽으로 붙여서 배열하라는 말입니다. 이 때 필요한 것이 있습니다.
하위 컨테이너의 가로 사이즈 입니다.
단순히 왼쪽으로 배열하라고 했기때문에 하위 컨테이너의 가로사이즈가 정의되어 있지 않다면 당연히 표시되지 않게 됩니다.
이렇게 각각 가로 300의 사이즈로 왼쪽부터 정렬되었습니다.
alignmet="left, extend" extend 가 붙으면 왼쪽으로 정렬하고 나머지 빈 부분까지 늘려라는 말입니다.
세 개 모두 넓이가 300이지만 파랑3번의 오른쪽 부분이 비어 있기 때문에 파랑3번이 늘어나서 채우게 됩니다.
이렇게 됩니다.
alignment 에는
all, vertical, horizontal, left, right, top, bottom, centre, centre_x, centre_y, middle, fill, extend, can_scale, auto_fit
이 있습니다. (빠진 것이 있으면 말씀해 주세요)
여러가지로 넣어보면서 테스트 해 보세요
3. fit_children_attachment
이것은 많이 안쓰이기는 하는데... 좀 까다롭기도 합니다.
하위 컨테이너나 위젯의 높이 또는 넓이에 맞춰서 상위 컨테이너의 사이즈를 맞추는 것입니다.
match title bar.xml 을 열어 보는 것이 가장 이해가 빠를거예요
<container class="bordered_box" appearance="boxes/custom/match/titlebar/paper">
<layout class="arrange_horizontal_attachment" alignment="left" gap="0" offset="0" />
<layout class="fit_children_attachment" alignment="horizontal,fill" gap="0" offset="0" />
<layout class="stick_to_sides_attachment" alignment="vertical" apply_to_children="true" inset="0" />
<!-- Back Button -->
<widget class="screen_history_button" id="back" fixed="true" width="60" appearance="buttons/custom/interface/navigation bar/button" icon="icons/26px/left" icon_alignment="centre">
<attachment class="get_global_attachment" get_property="hnpt" set_property="itms" />
<record id="primary_icon_properties" red_replacement="text"/>
<record id="click_event" event_id="GOTO" event_target="brow" scin="-8" />
<attachment class="test_global_attachment" get_property="MnuS" mode="1" value="true" set_property="hidn" skip_if_null="true"/>
</widget>
<!--team names and score-->
<container width="190">
<layout class="arrange_vertical_attachment" layout="-1,1,-1" offset="0" gap="0" />
<layout class="stick_to_sides_attachment" alignment="horizontal" inset="0" apply_to_children="true" />
~~
~~
</container>
<!--clock-->
<container width="120">
<layout class="arrange_vertical_attachment" alignment="middle" offset="0" gap="2" />
<layout class="stick_to_sides_attachment" alignment="horizontal" apply_to_children="true" />
~~
~~
</container>
</container>
이렇게 된 부분을 찾을 수 있습니다.
<layout class="fit_children_attachment" alignment="horizontal,fill" gap="0" offset="0" />
하위 컨테이너의 horizontal(가로)에 맞추고 fill (채워라) 입니다.
잘 보시면
하위 컨테이너로
<!-- back button -->
<widget>
<!--team names and score-->
<container width="190">
<widget class="picture" file="dividers/standard/vertical/line" width="1" />
<!--clock-->
<container width="120">
이렇게 4개가 있습니다.
back button 을 제외한 3개는 가로 사이즈가 지정되어 있습니다.
따라서 경기중에는 back button 이 나타나지 않으므로
190 + 1 + 120 = 311
상위 컨테이너의 가로는 311이 됩니다.
만약 백 버튼이 활성화 된다면 상위 컨테이너의 가로는 311 + (백버튼의 가로 길이) 가 됩니다.
- 끝 -
설명을 잘 못해서 죄송합니다.
이것들이 누가 가르쳐 준 것이 아니라 혼자서 이것저것 해보고
이런식이구나 짐작하는 것들이라 확실하지는 않습니다.
SI에서 설명서라도 주면 좋으련만...
여러가지로 시도해 보고 잘 안되거나 궁금한 부분 있으시면
쪽지나 자게에 질문해 주세요
마루에몽님께 질문해도 됩니다.
즐겜하세요~
2018.06.21
추가로 보면 도움되는 글
https://www.flayus.com/26749344
https://www.flayus.com/26754583
https://www.flayus.com/26756920