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;
}
}
}
}
}
오늘은 여기까지 하겠습니다.
그럼 좋은 하루 보내세요~
끝_
