FM SKIN의 기본 이해 (레이아웃에 관하여)[발롱도르~]

spqlq
2018.06.20. 19:23
1209
8
16

https://www.flayus.com/26709680

스킨을 구성하고 있는 파일들을 열어서 보면

패널, 컨테이너, 위젯들과 항상 붙어 다니는 레이아웃이란 것을 볼 수 있습니다.

이 레이아웃에 대해 알아보는 시간을 가져봅시다.

<예시>

위에 보이는 것과 같은 것들을 항상 볼 수 있었을 거예요.

이것들은 무엇을 나타내는지 설명서가 있다면 좋았을텐데 아쉽게도 SI는 친절하지 않았어요

그래서 하나씩 해보면서 알아봅시다.

오늘 도움을 줄 세 친구 입니다.

빨강 1번, 초록 2번, 파랑 3번 입니다.

레이아웃은 클래스와 정렬또는 레이아웃, 갭, 인셋, 오프셋 등으로 이루어져 있습니다.

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

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 은 세로로 구역을 나눌 수 있습니다.

가장 쉬운 방법은 수치로 지정해 주는 것입니다.

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 을 열어 보는 것이 가장 이해가 빠를거예요

<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" />

<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>

<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>

이렇게 된 부분을 찾을 수 있습니다.

하위 컨테이너의 horizontal(가로)에 맞추고 fill (채워라) 입니다.

잘 보시면

하위 컨테이너로

이렇게 4개가 있습니다.

back button 을 제외한 3개는 가로 사이즈가 지정되어 있습니다.

따라서 경기중에는 back button 이 나타나지 않으므로

190 + 1 + 120 = 311