오늘은 파트의 상태를 적어놓는 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;
               }
            }
         }
      }
   } 


위치에 대한 이야기는 여기서 마치겠습니다.

그럼 좋은 하루 보내세요~

끝_

  1. Tizen Develer 2015.11.23 17:10

    상세한 설명 감사드립니다ㅎㅎ 초보 개발자인데 이렇게 상세하게 설명되어 있는 블로그는 처음봐요!!
    열심히 보고 배우겠습니다~

part 블록을 처음 접했을때,

description 블록의 역할이 와닿지 않았습니다.

part 블록에 바로 넣어도 될만한 필드들을 굳이 description으로 감싸기 때문이죠.


하지만, program이 description 단위로 동작한다는 것을 본 이후에는,

description 파트도 치열한 고민의 산물이란 것을 깨달았습니다.



안녕하세요, Tizen 개발자 윤진입니다.


description 파트는 program에 의해 변할 수 있는 요소들을 넣어줍니다.

description에서 정의하는 모든 필드는 상태에 따라 변하는 필드라고 보시면 됩니다.

description의 필드값을 program으로 직접 변경하진 않고,

한 part 내에 위치한 다수의 description 사이에서 상태변환을 하게 되지요.


따라서 description의 이름은 name이라 부르지 않고 state라고 합니다.

part의 확정된 설정값이 아닌,

유동적으로 변모하는 상태를 나타내기 때문입니다.


우선 description에서 다루는 필드르 아래 코드에서 훑어보겠습니다.

description {
   state: "description_name" INDEX;
   inherit: "other_description_name" INDEX;
   visible: 1;
   align: 0.5 0.5;
   min: 0 0;
   max: -1 -1;
   fixed: 0 0;
   rel1 { ... }
   rel2 { ... }
   step: 0 0;
   aspect: 1 1;
}

위에 언급된 필드 중에 rel1, rel2는 다음 포스팅에서 살펴보도록 하겠습니다.

rel 블록 내에는 또 주요한 필드들이 있고 해당 필드에 대해서는 할 말이 좀 있어서요.

그 외의 필드는 하나씩 살펴보도록 하겠습니다.



- state: [이름] [인덱스];

state의 이름은 고유한 값이어야 합니다.

그리고 state 중 하나는 반드시 "default"여야만 합니다.

"default"는 파트가 load될 때 initial 상태이기 때문이지요.

그리고 인덱스는 0.0에서 1.0의 값으로 입력합니다.

인덱스가 있는 이유는 상태가 동일한 이름을 지닌다고 해도 인덱스로 구분지을 수 있기 때문이죠.

위에 언급한 "default"의 0.0 인덱스가 가장 기본이 되는 description입니다.



- inherit: [다른 description의 이름] [다른 description의 인덱스];

다른 description에서 설정한 필드를 그대로 가져올 수 있습니다.

inherit한 이후에 설정한 필드들은 inherit된 필드에 override됩니다.

inherit는 필드 한 두개만 다르고 나머지 필드는 모두 일치할 때 유용하게 사용됩니다.



- visible: [0 혹은 1];

화면에 보일지 감출지를 결정합니다.

0을 설정하면 해당 파트는 보여지지 않습니다.

1을 설정해야 비로소 화면에 보입니다.

화면에 보이지 않으면 이벤트도 그 파트에는 전달되지 않습니다.

원래부터 없는 셈치게 되죠.

default 값은 1입니다.

따로 적어주지 않으면 화면에 보이게 됩니다.



- align: [X축] [Y축];

align으로 X축 혹은 Y축 기준으로 정렬을 할 수 있습니다.

align을 지정하면 이 파트에 삽입되는 다른 요소의 정렬에 적용됩니다.

이 파트 자체가 다른 곳에 삽입될 때 적용되는 것이 아닙니다.

0.0 ~ 1.0의 값을 지정할 수 있습니다.

0.0은 왼편 정렬, 0.5는 가운데 정렬, 1.0은 오른편 정렬입니다.

double 형이니 만큼 0.25, 0.3 같은 값을 주어 애매한 정렬을 할 수도 있겠죠.

default 값은 X축, Y축 모두 가운데 정렬인 0.5 0.5입니다.



- min: [width] [height];

min 필드는 두 개의 값을 가지고 있습니다.

가로와 세로를 기준으로 파트의 min 사이즈를 지정할 수 있습니다.

min은 말 그대로 최소한의 크기입니다.

파트의 크기는 min에서 설정한 값으로 확정됩니다.

min 값은 relative로 설정한 값과 충돌을 일으킬 수 있기 때문에,

가급적이면 relative를 '점'으로 설정한 곳에 사용해야 합니다.

이에 대해선 relative를 설명할 때 다시 언급하도록 하겠습니다.



- max: [width] [height];

max 필드도 두 개의 값을 가지고 있습니다.

가로와 세로를 기준으로 파트의 max 사이즈를 지정할 수 있습니다.

max는 말 그대로 최대한의 크기입니다.

파트의 크기가 변하는 상황에서 참조하는 값입니다.

파트의 크기가 바로 max 값으로 지정되진 않지요.



- fixed: [가로, 0 or 1] [세로, 0 or 1];

fixed는 매우 중요한 필드입니다.

여기에 어떤 값을 주었느냐에 다라 다른 그룹에 지대한 영향을 미칠 수 있습니다.

인자는 2개인데 각각 가로와 세로를 의미합니다.

가로 혹은 세로를 기준으로 현재 파트의 min값의 영향력을 결정할 수 있습니다.


만약 fixed가 1이라면,

현재 파트의 min값은 현재 파트를 담고 있는 객체에 아무 영향을 주지 못합니다.

현재 파트를 담고 있는 객체의 크기가 현재 파트보다 작더라도,

현재 파트를 담을 수 있습니다.

'담다'는 용어보다는 붙여놓는다는 용어가 어울릴지도 모르겠다.


반대로 fixed가 0이라면,

현재 파트의 min값은 현재 파트를 담고 있는 객체에 영향을 줍니다.

현재 파트가 100 x 100이고 현재 파트를 담는 객체가 10 x 10인 경우,

부모 객체는 현재 파트의 min 값에 맞춰서 100 x 100이 됩니다.


따라서 fixed를 사용하려면 부모/자식 같의 크기를 잘 염두하여 사용해주세요.

특히 파트 사이즈가 변한다면 더욱 주의하셔야 합니다.

사이즈가 변하기 전에는 부모 파트의 크기가 제대로 잡혀있었는데,

자식의 사이즈가 변한 후에는 부모 파트도 같이 변해서 애초의 목적과 달라질 수 있습니다.



- step: [width] [height];

part를 resize하는 경우, step에 설정한 가로/세로 크기만큼의 단계로 확대/축소됩니다.

만약 step이 필요없다면 "0 0"으로 설정해두면 됩니다.

개인적으로 step을 사용해본 경험이 없어서 타이젠 소스를 뒤져보았습니다.

타이젠 플랫폼에서도 step을 사용한 예는 거의 없네요.


         part { name: "e.table.days"; type: TABLE;
            description { state: "default" 0.0;
               rel1.to_y: "e.table.daynames";
               rel1.relative: 0.0 1.0;
               rel1.offset: 2 2;
               rel2.offset: -3 -3;
               step: 7 5;
               table {
                  homogeneous: TABLE;
                  padding: 1 1;
                  align: 0.5 0.5;
                  min: 1 1;
               }
            }
         /* ... 생략 ... */


위처럼 TABLE을 만드는 경우 step을 사용하고 있습니다.

TABLE의 크기를 변경할 때 step에 명시된 크기 7, 5만큼 변경되겠지요.


위에서 7, 5인 이유는 캘린더를 위한 테이블이기에,

월화수목금토일을 담기 위한 7열에, 총 5주를 표기하기 위해서인 것으로 보입니다.

부모의 크기가 커지더라도 캘린더 테이블 파트는 7, 5 단위씩 커져기에,

모두가 균일한 크기를 유지할 수 있도록 합니다.



- aspect: [가로, 0 or 1] [세로, 0 or 1];

파트의 사이즈를 재조정하는 경우,

가로/세로의 사이즈가 일정 비율로 늘거나 줄어야 하는 경우가 있습니다.

이미지의 경우에는 특히 그러하지요.

그럴 때, aspect를 사용합니다.

가로/세로의 값으로 1로 주면, 이미지는 비율대로 크기가 조정됩니다.

가로/세로를 각각 1 혹은 0, 0 혹은 1로 설정하여 사용한 경우는 보지 못했습니다.

가로/세로 모두 1 아니면 0을 사용하지요.


- aspect_preference: [DIMENSION];

aspect_preference는 aspect와 함께 사용합니다.

값으로는 BOTH, VERTICAL, HORIZONTAL, NONE을 넣어줄 수 있습니다.

여기서 설정한 Dimension으로 비율이 결정됩니다.

보통의 이미지라면 BOTH로 해도 무방합니다.

세로를 기준으로 가로의 사이즈를 조절하고 싶다면 VERTICAL을,

가로를 기준으로 세로의 사이즈를 조절하고 싶다면 HORIZONTAL을,

그리고 따로 기준이 필요없다면 NONE으로 설정합니다.



- color: [Red] [Green] [Blue] [Alpha];

RGB와 Alpha 값을 설정할 수 있습니다.

RGB값으로 색상을 정하고 알파값으로 투명도를 정할 수 있습니다.

각 값은 0~255까지로 지정합니다.

숫자가 높아질수록 각각의 색상이 점차 뚜렷해집니다.

알파값의 경우 0이면 투명, 255에 가까울수록 불투명해집니다.



오늘은 여기까지 하겠습니다.

그럼 좋은 하루 보내세요~

끝_


+ Recent posts