오늘은 파트의 상태를 적어놓는 description에서,
가장 중요한 필드 중에 하나인 rel을 살펴보도록 하겠습니다.
rel은 파트의 위치와 크기를 관장하는 필드입니다.
형태를 가지고 있는 물체에는 위치와 크기 속성이 필수인만큼,
이 필드는 꼼꼼이 잘 살펴볼 필요가 있습니다.
안녕하세요, Tizen 개발자 윤진입니다.
rel 필드는,
collections - group - parts - part - description 아래에 위치하는 필드입니다.
description 안에 있다는 것만으로도,
rel 필드는 state에 따라 변화가 가능한 필드라는 것을 알 수 있습니다.
rel은 2개의 필드가 하나의 쌍으로 동작합니다.
rel1과 rel2가 각각 시작점, 끝점의 역할을 담당하게 되지요.
이 두 점으로 사각의 영역을 얻을 수 있습니다.
part는 이 두 점으로 기준으로 위치와 크기가 결정됩니다.
- rel1/rel2
rel1과 rel2는 각각의 블록을 가지고 있습니다.
rel1 { ... }
rel2 { ... }
위와 같이 독립된 블록을 가집니다.
이름만 봐서는 rel3, rel4가 있어도 이상해보이진 않지만,
직사각형 영역으로 형태를 표현하는 것이 충분하다고 여기는지 2개의 필드만 사용하고 있습니다.
정말 그러한지는 각자 좀 더 고민해보시죠.
rel1은 왼쪽 상단 모서리를 의미합니다.
rel2는 오른쪽 하단 모서리를 의미하지요.
이 두 점만으로 직사각형을 표현할 수 있습니다.
rel1과 rel2 블록 안에 명시한 내용이 각각 모서리 위치를 구체화 합니다.
- relative: [X축] [Y축];
rel 블록에서 가장 먼저 등장하는 것이 relative입니다.
relative는 상대적인 위치를 나타냅니다.
화면에 표시되는 영역은 0.0 ~ 1.0 범위입니다.
x축/y축 기준으로 비율에 맞게 화면에 표시가 됩니다.
collections {
group {
name: "storycompiler";
parts {
part {
name: "red_rectangle";
type: RECT;
description {
state: "default" 0.0;
rel1.relative: 0.0 0.5;
rel2.relative: 1.0 1.0;
color: 255 0 0 255;
visible: 1;
}
}
}
}
}rel1에 0.0 0.5를 적어놓으면,
시작점은 X축 기준으로는 0이고, y축 기준으로는 가운데입니다.
rel2에 1.0 1.0을 적어놓으면,
끝점은 x축/y축 모두 마지막 좌표입니다.
위의 코드를 출력한 결과는 아래와 같습니다.
0.0 이하 혹은 1.0 이상 영역은 화면 밖에 표시가 됩니다.
화면 밖에서 화면 안으로 들어오는 애니메이션 효과를 주고 싶을때,
-1.0 이나 2.0 과 같은 수치를 써주곤 합니다.
rel1과 rel2에 같은 값을 표기할 수도 있습니다.
시작점과 끝점이 같은 값이라면 결과는 '점'입니다.
점은 화면에 표시가 되지 않습니다.
그렇다면 왜 점을 사용하는 것일까요?
점은 min값과 좋은 짝이 됩니다.
점과 min을 함께 사용한다면,
점은 위치를 나타내고,
min이 크기를 지정하게 될 겁니다.
(min값과 관련된 내용은 이 포스팅을 참고해주세요)
만약 시작점과 끝점을 달리하여 영역을 만들고 추가로 min값을 넣는 경우,
논리적 모순이 생길 수도 있습니다.
rel1/rel2는 비율로 크기를 지정하는데,
그 크기가 min값과 다를 수 있기 때문입니다.
예를 들어, 화면의 사이즈가 100 x 100이고,
rel1은 0.0 0.0, rel2는 0.1 0.1으로 지정했다고 하죠.
rel로 잡은 영역은 10 x 10의 크기입니다.
하지만, 거기에 min값으로 50 50을 주면,
어떤 값을 선택해야할지 알 수가 없게됩니다.
10 10일까요? 50 50일까요?
바로 이 점이 edc를 어렵게 만드는 점이기도 한데요,
하나의 필드에 두 개의 역할(위치, 크기)를 부여하였기 때문에,
크기를 나타내는 min과 충돌이 날 수 있습니다.
따라서 min으로 크기를 설정하고자 하면,
반드시 rel로는 점을 만드시는게 좋습니다.
- to: [다른 파트 이름];
to는 굉장히 유용하게 사용되는 필드입니다.
위에서 rel1/rel2로 위치를 잡을때 화면 전체를 기준으로 설명하였는데요,
to 필드를 추가하면, to 필드에 명시한 파트를 기준으로 rel1 / rel2가 지정됩니다.
반대로 to 필드가 없으면 전체화면을 기준으로 위치를 잡게 되겠지요.
collections {
group {
name: "to_example";
parts {
part {
name: "bg";
type: RECT;
scale: 1;
description {
state: "default" 0.0;
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 1.0;
}
}
part {
name: "region";
type: RECT;
scale: 1;
description {
state: "default" 0.0;
color: 255 0 0 255;
rel1.relative: 0.2 0.2;
rel1.to:"bg";
rel2.relative:0.8 0.8;
rel2.to:"bg";
}
}
}
}
}- to_x: [다른 파트 이름];
- to_y: [다른 파트 이름];
위에서 설명한 to는 to_x와 to_y가 동일한 경우에 사용합니다.
만약 x축 기준영역과 y축 기준영역이 다를 경우,
to_x와 to_y를 사용하면 됩니다.
파트의 위치가 반드시 한 파트를 기준으로 정해야한다는 규칙은 없습니다.
서로 다른 두 개의 파트를 각각 x축 기준 y축 기준으로 사용하면 됩니다.
group {
parts {
part {
name: "to_part";
type: RECT;
scale: 1;
description {
state: "default" 0.0;
color: 255 0 0 255;
rel1.relative: 0.2 0.2;
rel1.to:"bg";
rel2.relative:0.8 0.8;
rel2.to_x: "some_part";
rel2.to_y: "other_part";
}
}
}
}
}위의 코드에서 시작점은 bg를 기준으로 설정되었지만,
끝점의 x축은 some_part를 기준으로,
y축은 other_part를 기준으로 위치를 잡습니다.
- offset: [x축] [y축];
offset은 음수, 0, 양수를 사용할 수 있습니다.
단위는 픽셀입니다.
여기서 사용하는 값은 relative와 to로 결정된 위치에 마지막 수정을 가합니다.
보통 미세한 조정이 필요한 경우에 사용합니다.
offset에 적용되는 값은 이전에 설명한 scale과는 무관하게 동작합니다.
scale이 1로 설정되어 있더라도,
offset에 설정한 값은 적힌 값 그대로 사용됩니다.
보통 선을 만들거나 1~2픽셀 단위로 영역을 조정할 때 사용합니다.
-100 이나 100 픽셀로 offset를 주진 않습니다.
저 정도 크기로 영역을 조정하려면 relative를 사용하는 것이 맞습니다.
collections {
group {
parts {
part {
name: "part_three";
type: RECT;
scale: 1;
description {
state: "default" 0.0;
color: 255 0 0 255;
rel1 {
relative: 0.0 0.0;
to:"some_part";
offset: 1 -1;
}
rel2 {
relative:0.0 1.0;
to:"other_part";
offset: 1 -1;
}
}
}
}
} 위치에 대한 이야기는 여기서 마치겠습니다.
그럼 좋은 하루 보내세요~
끝_
