1. EFL Layout
- 기본 코드 생성시 아래와 같이 레이아웃 관련 객체들이 생성됩니다. 모든 객체는 Evas_Object라는 하나의 인터페이스로 생성되고 있습니다.
|
1
2
3
4
5 |
typedef struct appdata {
Evas_Object *win;
Evas_Object *conform;
Evas_Object *label;
} appdata_s; |
cs |
- Evas_Object : Canvas 상에 출력될 렌더링 오브젝트로 EFL에서 이용되는 모든 종류의 오브젝트를 가르키는 인터페이스입니다. 반드시 포인터형으로 사용하여야 합니다.
-> EFL은 Evas_Object라는 타입을 통해 다양한 종류의 오브젝트를 하나의 일관된 방식으로 이용할 수 있다는 장점을 가지고 있습니다.
이렇게 선언된 오브젝트들은 create_base_gui()함수에서 생성되게 됩니다. 각 객체들은 add()함수를 통해 생성이 되며, 부모-자식의 구조를 이루게 됩니다.
window는 EFL의 어플리케이션의 기본 시작 부분으로 가장 먼저 생성이 되어야 합니다.
conformant는 화면 변화가 필요할 때 적절하게 화면에 그려주는 역할을 합니다.
label은 텍스트를 화면에 표시하는 오브젝트로, 현재 Hello EFL을 표시하고 있습니다.
이러한 화면에 표시하는 오브젝트는 그 종류에 따라 Non-Container, Container 두가지로 구분이 됩니다.
- Non-container : 캔버스 상에 출력될 시각적 외양을 갖춘 객체(Rectangle, text, button, label 등등)
- Container : 캔버스 상에 보이지 않으나 레이아웃 구축을 위해 사용, Container에 포함된 객체는 '부모-자식'관계를 이룸(Box, table, grid ...)
* 부모-자식 관계로써 부모가 지워지면 자식도 지워지고, 부모가 이동시 자식 역시 함께 이동
이러한 Evas_Object는 기본적으로 사용방법이 모두 같습니다. 레이블의 경우로 예를 들어보겠습니다.
|
1
2
3
4
5
6
7
8 |
/* Label*/
ad->label = elm_label_add(ad->conform);
elm_object_text_set(ad->label, "<align=center>Hello EFL</align>");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_content_set(ad->conform, ad->label);
/* Show window after base gui is set up */
evas_object_show(ad->win); |
cs |
a. 가장 먼저 add()함수를 통해 객체를 생성합니다.
- 각 오브젝트는 오브젝트별로 add()함수를 갖고 있습니다. (label: elm_label_add(), button: elm_button_add(), rectangle:evas_rectangle_add()의 형태)
- elm_label_add(인자)는 첫번째 인자로 부모객체를 전달하고, 그 반환값으로 생성된 오브젝트를 전달합니다. 이를 통해 '부모-자식' 관계를 갖게 됩니다.
b. elm_object_content_set(ad->conform, ad->labe)함수를 통해 Container에 자식을 포함시킵니다. 각 container별로 다른 함수로 포함시킵니다. * API참조
c. 이후 evas_object_show()함수를 통해 실제 화면에 나타냅니다. (화면에서 숨기기 위해서는 evas_object_hide(오브젝트))
* 특정 좌표로 이동시키는 함수
evas_object_move (Evas_Object *obj, Evas_Coord x, Evas_Coord y) : obj - 오브젝트명, x/y : x y 좌표)
2. Container의 종류
크게 Box, Table, Grid의 형태가 있으며, 아래 그림과 같은 형태로 레이아웃 구성이 가능합니다.
- Box : 선형 구조로 레이아웃 구성, 가로나 세로로 설정가능
박스
아래와 같이 box 생성 후,
|
1
2
3
4
5
6
7
8
9
10 |
//Box 생성
Evas_Object* box = elm_box_add(ad->conform);
//박스 방향설정-가로
elm_box_horizontal_set(box, EINA_TRUE);
//박스 방향설정-세로
elm_box_horizontal_set(box, EINA_FALSE);
//박스 컨텐츠 간 간격
elm_box_padding_set(box, 10, 0);
//화면출력
evas_object_show(box); |
cs |
원하는 오브젝트를 elm_box_pack_end()함수를 통해 삽입한다.
|
1
2
3
4
5
6 |
//Btn 오브젝트 생성
Evas_Object* btn = elm_button_add(box);
elm_object_text_set(btn, "btn");
elm_object_show(btn);
//박스에 btn 삽입
elm_box_pack_end(box,btn); |
cs |
- table : 도표 형식의 레이아웃
테이블
기본적으로 아래와 같이 생성하고 사용합니다.
|
1
2
3
4
5
6
7
8
9
10
11 |
//Table 생성
Evas_Object* table = elm_table_add(ad->conform);
evas_object_show(table);
//Btn 오브젝트 생성
Evas_Object* btn = elm_button_add(box);
elm_object_text_set(btn, "btn");
elm_object_show(btn);
//박스에 btn 삽입
elm_table_pack(table, btn, 0, 0, 1, 1); |
cs |
이때elm_table_pack()함수의 경우,
void elm_table_pack (Evas_Object * obj, Evas_Object * subobj, int col, int row, int colspan, int rowspan )
의 형태로 이루어져 있습니다.
- obj : table obj
- subobj : 추가할 객체
- col, row : 도표상의 x/y 좌표
- colspan, rowspan : 도표상에서 차지할 셀의 갯수, 위의예제에서는 한칸씩 차지
- grid
그리드
|
1
2
3
4
5
6
7
8
9
10
11 |
//Grid 생성
Evas_Object* grid = elm_grid_add(ad->conform);
evas_object_show(grid);
//Btn 오브젝트 생성
Evas_Object* btn = elm_button_add(box);
elm_object_text_set(btn, "btn");
elm_object_show(btn);
//grid에 객체 삽입
elm_grid_pack(grid, btn, x, y, w, h); |
cs |
elm_grid_pack은 아래와 같이 이루어져 있습니다.
|
1 |
void elm_grid_pack (Evas_Object * obj, Evas_Object * subobj, Evas_Coord x, Evas_Coord y, Evas_Coord w, Evas_Coord h ) |
cs |
-x, y: grid의 x, y 좌표(0~100)으로 이루어져 있어, 화면을 기준으로 상대적으로 위치)
-w, h: 화면에서 차지하는 크기(0~100으로 마찬가지로 상대적으로 차지)
'개발 > TIZEN' 카테고리의 다른 글
| [TIZEN]9. 타이젠_간단한게임 만들기3_이벤트 작성 (0) | 2015.12.25 |
|---|---|
| [TIZEN]8. 타이젠_간단한게임 만들기2_레이아웃 구성 (0) | 2015.12.25 |
| [TIZEN]6. 타이젠_간단한게임 만들기1_프로젝트생성, 화면방향설정 (0) | 2015.12.25 |
| [TIZEN]5. 타이젠 Gear(기어) App 개발(Native) (0) | 2015.12.25 |
| [TIZEN]4. 타이젠 EFL이란? (0) | 2015.12.21 |