본문 바로가기

IT/Tizen

[EFL/Tizen 타이젠] edc - TEXT 타입(text, font, size, align, effect, PLAIN, OUTLINE, SOFT_OUTLINE, SHADOW, SOFT_SHADOW, OUTLINE_SHADOW, OUTLINE_SOFT_SHADOW, FAR_SHADOW, FAR_SOFT_SHADOW, GLOW)

edc파일로 문자열을 출력할 수도 있습니다.

문자열은 edc 파일에서 직접 입력할 수도 있고,

C파일에서 elm_object_part_text_set() 함수를 사용하여,

필요할 때마다 문자열을 입력할 수 있습니다.


문자열이 전혀 없는 앱은 거의 없을 겁니다.

복잡다단한 문자표현의 세계에 첫 발을 text 블록으로 내딛어 보겠습니다.



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


edc에 문자열을 지원하는 타입은 2가지가 있습니다.

- TEXT

- TEXTBLOCK

위의 두 가지 중에 TEXT 타입을 먼저 살펴보겠습니다.

TEXT는 TEXTBLOCK에 비하여 간단한 문자열을 표시하는데 사용하지요.

TEXT 타입이 TEXTBLOCK 타입에 비해 multiline이라든가 기능에는 제한은 있지만,

간단한 연산만 필요하기에 훨씬 빠릅니다.



- text {}

텍스트 파트에는 텍스트에 대한 추가정보를 기술하기 위한 text 블록이 필요합니다.

text {}는 part - description 내에 위치하지요.

description에 위치한다는 것은,

각 상태(state)에 따라 text의 설정값을 변경할 수 있다는 것이겠죠.

곧, program으로 텍스트의 모양새를 여러가지로 바꿀 수 있습니다.



- text: "문자열";

text 블록 내에 블록과 동일한 이름의 필드인 text를 사용할 수 있습니다.

text 필드에 명시한 문자열은 default로 사용되는 문자열입니다.

default는 외부에서 해당 텍스트 파트에 아무 것도 set하지 않으면 나타납니다.

edc에서 문자열을 확정할 수 있다면 text 필드를 사용하면 됩니다.



- font: "폰트명";

텍스트에 폰트를 지정할 수 있습니다.

font를 지정하려면 플랫폼에서 지정한 값을 넣어줘야 하겠지요.

"Sans"나 "Arial"과 같은 글꼴 이름을 적어주면 됩니다.

물론 해당 글꼴이 플랫폼에 탑재가 되어 있어야겠지요?



- size: [폰트사이즈];

폰트 사이즈를 입력할 수 있습니다.

양수를 적어넣으면 됩니다.



- align: [x축, 0.0~1.0] [y축, 0.0~1.0];

텍스트 파트에서 정렬을 하기 위해서 align을 사용합니다.

두 개의 인자를 적어주면 되는데 각각 x축/y축 기준입니다.

텍스트 파트에서 rel1/rel2로 지정한 파트의 영역 내에서,

텍스트의 배열을 어떻게 설정할지를 align으로 정하게 됩니다.


collections {
   group {
     name: "main";
   parts {
      part {
         name: "label";
         type: TEXT;
         scale: 1;
         description {
            state: "default" 0.0;
            color: 255 0 0 255;
            text {
               text: "TEXT";
               font: "Sans";
               size: 24;
               align: 0.5 0.5;
            }
         }
      }
   }
}

위의 코드에서는 화면 한가운데에 "TEXT"라는 문자열을 표시하지요.

폰트는 "Sans"이고 폰트사이즈는 24입니다.




- effect: [EFFECT];

폰트에 이펙트를 추가할 수 있습니다.

effect 필드는 description이 아닌 part에 넣어주어야 합니다.

그 말은 state에 따라 effect를 바꿀 수 없다는 것이겠지요.

이펙트는 종류가 많아보이긴 하지만 따지고 보면 윤곽선, 그림자로 귀결됩니다


•    PLAIN : effect가 없습니다.
•    OUTLINE  : 윤곽선
•    SOFT_OUTLINE : 부드러운 윤곽선
•    SHADOW : 그림자
•    SOFT_SHADOW : 부드러운 그림자
•    OUTLINE_SHADOW : 윤곽선 + 그림자
•    OUTLINE_SOFT_SHADOW : 윤곽선 + 부드러운 그림자
•    FAR_SHADOW : 멀리 떨어진 그림자
•    FAR_SOFT_SHADOW : 멀리 떨어진 부드러운 그림자
•    GLOW : 발광윤곽선


눈으로 직접 보는게 이해가 빠르겠네요.

아래처럼 9개의 이펙트를 위한 그룹을 만들어보겠습니다.


예시에 보면 color3가 쓰였는데요,

color3는 윤곽선이나 그림자 색상을 의미합니다.

color3는 color와 함께 description에 쓰이므로 state에 따라 바꿀 수 있습니다.


collections {
   group {
     name: "main";
     parts {
       part {
         name: "bg";
         type: RECT;
         description {
           state: "default" 0.0;
           color: 255 255 255 255;
         }
       }

       part {
         name: "PLAIN";
         type: TEXT;
         effect: PLAIN;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           text {
             text: "PLAIN EFFECT";
             font: "Sans";
             size: 20;
             align: 0.5 0.0;
            }
         }
      }
     
      part {
         name: "OUTLINE";
         type: TEXT;
         effect: OUTLINE;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
           text {
              text: "OUTLINE EFFECT";
              font: "Sans";
              size: 20;
              align: 0.5 0.1;
            }
         }
      }
       part {
         name: "SOFT_OUTLINE";
         type: TEXT;
         effect: SOFT_OUTLINE;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
           text {
              text: "SOFT_OUTLINE EFFECT";
              font: "Sans";
              size: 20;
              align: 0.5 0.2;
            }
         }
      }
 
      part {
         name: "SHADOW";
         type: TEXT;
         effect: SHADOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
            text {
               text: "SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.3;
            }
         }
      }
     
      part {
         name: "SOFT_SHADOW";
         type: TEXT;
         effect: SOFT_SHADOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
            text {
               text: "SOFT_SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.4;
            }
         }
      }
 
      part {
         name: "OUTLINE_SHADOW";
         type: TEXT;
         effect: OUTLINE_SHADOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
            text {
               text: "OUTLINE_SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.5;
            }
         }
      }
 
      part {
         name: "OUTLINE_SOFT_SHADOW";
         type: TEXT;
         effect: OUTLINE_SOFT_SHADOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
           text {
               text: "OUTLINE_SOFT_SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.6;
            }
         }
      }
 
      part {
         name: "FAR_SHADOW";
         type: TEXT;
         effect: FAR_SHADOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
            text {
               text: "FAR_SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.7;
            }
         }
      }
 
      part {
         name: "FAR_SOFT_SHADOW";
         type: TEXT;
         effect: FAR_SOFT_SHADOW;
         description {
            state: "default" 0.0;
            color: 255 0 255 255;
            color3: 0 0 0 255;
            text {
               text: "FAR_SOFT_SHADOW EFFECT";
               font: "Sans";
               size: 20;
               align: 0.5 0.8;
            }
         }
      }
 
      part {
         name: "GLOW";
         type: TEXT;
         effect: GLOW;
         description {
           state: "default" 0.0;
           color: 255 0 255 255;
           color3: 0 0 0 255;
            text {
               text: "GLOW EFFECT";
               font: "Sans";
              size: 20;
               align: 0.5 0.9;
            }
         }
      }
   }
}



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

그럼 좋은 하루 보내세요~

끝_