[TIZEN]15. 타이젠_간단한게임 만들기8_naviframe을 이용한 화면전환

10. naviframe

모든 앱은 하나의 화면으로 이루어져 있는 경우는 없습니다.

여러 화면으로 이루어져, 화면 전환이 필요한데요. 

Tizen의 경우 naviframe으로 화면 전환을 쉽게 구현할 수 있습니다.

아래와 같이 메인화면을 만들고 게임화면으로 전환하는 naviframe을 구현해보도록 하겠습니다.

   

naviframe은 화면을 스택 구조에 삽입을 하여, 가장 뒤에 들어온 화면이 최상단에 위치해 화면을 표시해줍니다.

화면에서 벗어나게 되면 pop하게 되어 다음 화면을 보여주게 됩니다.

먼저, 메인 UI와 게임 UI구성하는 부분을 함수로 나누어 따로 준비합니다.

- mainUI

static void
set_mainUI(appdata_s *ad)
{
    //grid_main 생성
    ad->grid_start = elm_grid_add(ad->nv);
    //아래쪽에 네이비프레임 생성부분 설명
    ad->nv_it = elm_naviframe_item_push(ad->nv, NULL, NULL, NULL, ad->grid_start,NULL);
    elm_naviframe_item_title_enabled_set(ad->nv_it, EINA_FALSE, EINA_FALSE);
    elm_naviframe_item_pop_cb_set(ad->nv_it, naviframe_pop_cb, ad->nv);
    evas_object_show(ad->grid_start);
 
 
    Evas_Object *bg = elm_bg_add(ad->grid_start);
    elm_bg_file_set(bg, "/opt/usr/apps/com.tistory.huiyu.memorygame/res/images/bg_main.png", NULL);
    elm_grid_pack(ad->grid_start, bg, 0, 0, 100, 100);
    evas_object_show(bg);
 
 
    ad->btn_start = elm_button_add(ad->grid_start);
    evas_object_color_set(ad->btn_start, 255,255,255,255);
    elm_object_text_set(ad->btn_start, "<align=center font_size=30 color=#FFFFFF>Start Game");
    elm_grid_pack(ad->grid_start, ad->btn_start, 78, 25, 21, 10);
    evas_object_smart_callback_add(ad->btn_start, "clicked", pressed_start, ad);
    evas_object_show(ad->btn_start);
 
    ad->btn_howto = elm_button_add(ad->grid_start);
    evas_object_color_set(ad->btn_howto, 251,206,25,255);
    elm_object_text_set(ad->btn_howto, "<align=center font_size=30 color=#FFFFFF>How to play");
    elm_grid_pack(ad->grid_start, ad->btn_howto, 78, 40, 21, 10);
    evas_object_smart_callback_add(ad->btn_howto, "clicked", pressed_howto, ad);
    evas_object_show(ad->btn_howto);
 
    ad->btn_exit = elm_button_add(ad->grid_start);
    evas_object_color_set(ad->btn_exit, 239,87,86,255);
    elm_object_text_set(ad->btn_exit, "<align=center font_size=30 color=#FFFFFF>Exit Game");
    elm_grid_pack(ad->grid_start, ad->btn_exit, 78, 55, 21, 10);
    evas_object_smart_callback_add(ad->btn_exit, "clicked", pressed_finish, NULL);
    evas_object_show(ad->btn_exit);
 
}

-gameUI

static void
set_gameUI(appdata_s *ad)
{
    //grid_main 생성
    ad->grid_main = elm_grid_add(ad->nv);
    //elm_object_content_set(ad->conform, ad->grid_main);
    evas_object_show(ad->grid_main);
 
 
    ad->nv_it = elm_naviframe_item_push(ad->nv, NULL, NULL, NULL,ad->grid_main, NULL);
 
    elm_naviframe_item_title_enabled_set(ad->nv_it, EINA_FALSE, EINA_FALSE);
    Evas_Object *bg = elm_bg_add(ad->grid_main);
    evas_object_color_set(bg, 40,40,40,255);
    elm_grid_pack(ad->grid_main, bg, 0, 0, 100, 100);
    evas_object_show(bg);
 
    //Score 오브젝트 생성
    ad->score = elm_label_add(ad->grid_main);
 
    elm_object_text_set(ad->score, "<align=center font_size=60 color=#FFFFFF>Score : 0</align>");
    elm_grid_pack(ad->grid_main, ad->score, 10, 5, 20, 50);
    evas_object_show(ad->score);
 
 
    ad->btn_home = elm_image_add(ad->grid_main);
    elm_image_file_set(ad->btn_home, "/opt/usr/apps/com.tistory.huiyu.memorygame/res/images/btn_home.png", NULL);
 
    elm_grid_pack(ad->grid_main, ad->btn_home, 80, 5, 20, 10);
    evas_object_show(ad->btn_home);
 
    evas_object_smart_callback_add(ad->btn_home, "clicked", pressed_home, ad);
 
    //Box_bottom 생성
    ad->box_game = elm_box_add(ad->grid_main);
    elm_box_horizontal_set(ad->box_game, EINA_TRUE);
    elm_box_padding_set(ad->box_game, 15, 0);
    elm_grid_pack(ad->grid_main, ad->box_game, 0, 30, 100, 70);
    evas_object_show(ad->box_game);
 
 
    //원하는 이쁜 색 값을 지정하자
    color color[7] = {{237,16,0},{245,106,3}, {249,167,6}, {2,138,4}, {0,172,170}, {63,72,204},{167,73,164}};
 
    for(int i=0; i<7; i++)
    {
        ad->rect[i] = evas_object_rectangle_add(ad->box_game);
        //rect[i]배열의 색상 변경
        evas_object_color_set(ad->rect[i], color[i].r, color[i].g, color[i].b, 255);
        evas_object_size_hint_min_set(ad->rect[i], 100, 300);
        evas_object_show(ad->rect[i]);
        elm_box_pack_end(ad->box_game, ad->rect[i]);
 
        //사각형별 이름등록
        char *num[1];
        num[0] = i+'0';
        evas_object_name_set(ad->rect[i], num);
        //사각형별 콜백함수 등록
        evas_object_event_callback_add(ad->rect[i],   EVAS_CALLBACK_MOUSE_DOWN, clicked_rect, ad);
    }
 
    ad->img_o = elm_image_add(ad->grid_main);
    elm_image_file_set(ad->img_o,  "/opt/usr/apps/com.tistory.huiyu.memorygame/res/images/btn_o.png", NULL);
    elm_grid_pack(ad->grid_main, ad->img_o, 0, 0, 100, 100);
 
    ad->img_x = elm_image_add(ad->grid_main);
    elm_image_file_set(ad->img_x,  "/opt/usr/apps/com.tistory.huiyu.memorygame/res/images/btn_x.png", NULL);
    elm_grid_pack(ad->grid_main, ad->img_x, 0, 0, 100, 100);
 
}

다음으로 naviframe과 naviframe_item으로 사용할 객체를 선언합니다.(appdata 내부)

//appdata 자료구조 내 선언
Evas_Object *nv;
Elm_Object_Item * nv_it;

다음으로 네이비프레임을 생성합니다. (create_base_gui 함수 내 conformant 생성 직후)

ad->nv = elm_naviframe_add(ad->conform);
elm_object_content_set(ad->conform, ad->nv);
evas_object_show(ad->nv);

네이비 프레임에 그리드를 삽입합니다.

ad->grid_start = elm_grid_add(ad->nv);

다음으로 grid를 push 해 줍니다. 반환값으로 naviframe_item을 반환하여 반환값으로 컨트롤이 가능합니다.

ad->nv_it = elm_naviframe_item_push(ad->nv, NULL, NULL, NULL, ad->grid_start,NULL);

(두번째 세번쨰 네번쨰 인자는 각각, title, prev, next로 상단에 표시될 제목, 좌측 상단 이동, 우측 상단 이동 시 오브젝트로 사용 안할 시 비워두셔도 됩니다.)

상단 부분 파란 바를 사용하지 않으려면 아래와 같이 설정합니다.

elm_naviframe_item_title_enabled_set(ad->nv_it, EINA_FALSE, EINA_FALSE);

다음으로 pop이벤트가 발동했을 때 콜백함수를 등록하고, 콜백함수에서 앱을 종료시킵니다.

elm_naviframe_item_pop_cb_set(ad->nv_it, naviframe_pop_cb, ad->nv);
 
static Eina_Bool
naviframe_pop_cb(void *data, Elm_Object_Item *it)
{
   ui_app_exit();
 
   // EINA_FALSE is returned, since the application is terminated anyway
   return EINA_FALSE;
}

게임화면도 naviframe을 이용하여 설정합니다.

    //grid_main 생성
    ad->grid_main = elm_grid_add(ad->nv);
    //elm_object_content_set(ad->conform, ad->grid_main);
    evas_object_show(ad->grid_main);
    ad->nv_it = elm_naviframe_item_push(ad->nv, NULL, NULL, NULL,ad->grid_main, NULL);
    elm_naviframe_item_title_enabled_set(ad->nv_it, EINA_FALSE, EINA_FALSE);

이렇게 되면 main화면에서 그대로 naviframe에 게임화면에 push되게 됩니다.

스타트 버튼을 눌렀을 때 게임이 시작될 수 있도록 스타트버튼 콜백함수에 UI를 설정합니다.

* 게임 소스에 적용한 부분이 많아 이해가 어려울 수 있는데, 간단한 naviframe 사용법을 정리하면 다음과 같습니다.

 - 생성

    Evas_Object *nv;
    Elm_Object_Item * nv_it;
 
    nv = elm_naviframe_add(<parent>);
    evas_object_show(nv);

- naviframe화면 push/옵션 설정

    //화면 push
    nv_it = elm_naviframe_item_push(nv, NULL, NULL, NULL, <추가할 content>, NULL);
    
    //상단바제거
    elm_naviframe_item_title_enabled_set(nv_it, EINA_FALSE, EINA_FALSE);
    
    //pop 콜백 추가
    elm_naviframe_item_pop_cb_set(nv_it, naviframe_pop_cb, nv);

- 화면 종료 시 pop수행

elm_naviframe_item_pop(nv);

화면이동하는 모습.