【XSLVGL2.0】如何新增一个页面

---

---

1、概述

本文档意在指导新人在XSLVGL2.0上如何新建一个页面。

2、步骤

下载好项目代码后，执行以下步骤，就可以创建一个新的页面。本文档以新建一个launcher页面为例说明，以后需要新建一个页面只需要将launcher换成你想要的名字即可。

2.1 复制模板到项目目录

cp framework/template/xspage-template.c page/xspage-launcher.c

2.2 替换模板中字段的成项目名

sed 's/template/launcher/g' -i page/xspage-launcher.c
sed 's/TEMPLATE/LAUNCHER/g' -i page/xspage-launcher.c
sed 's/#if 0/#if 1/g' -i page/xspage-launcher.c

2.3 在page/xspage-register.c中加入注册信息

diff --git a/page/xspage-register.c b/page/xspage-register.c
index c08a884..62f4107 100644
--- a/page/xspage-register.c
+++ b/page/xspage-register.c
@@ -3,6 +3,9 @@
 
 void xs_page_register_project_page(void)
 {
+#if XSLV_PAGE_SUPPORT_launcher
+       XS_PAGE_REGISTER_CALL(launcher);
+#endif
 #if XSLV_PAGE_SUPPORT_template
        XS_PAGE_REGISTER_CALL(template);
 #endif

2.4 在project_conf.h加入页面控制宏

diff --git a/project_conf.h b/project_conf.h
index 40a9e69..818d9cf 100644
--- a/project_conf.h
+++ b/project_conf.h
@@ -3,6 +3,7 @@
 
 extern void xs_page_register_project_page(void);
 
+#define XSLV_PAGE_SUPPORT_launcher                  1
 #define XSLV_PAGE_SUPPORT_template                  0
 
 #if 0

3、页面跳转方法

有两种方法可以跳转到指定的页面：

• 按ID的跳转的方式（该方式加载速度更快）如下：

XS_PAGE_ID_DECLARE(PAGE_ID_LAUNCHER);
xs_page_navto(NULL,PAGE_ID_LAUNCHER, NULL);

其中 PAGE_ID_LAUNCHER 字段定义在新加入的页面page/xspage-launcher.c 中，如下所示：

#ifndef XSLV_PAGE_DEFINED_PAGE_ID_LAUNCHER
int PAGE_ID_LAUNCHER = -1; 
#endif

• 按名字跳转的方式如下：

xs_page_navto_byname("launcher", NULL); 

而通过 xs_page_back(NULL, -1, NULL) 可以返回到上一个页面(如果-1换成指定页面的ID即可返回到指定页面)

4、指定页面标记

新创建的页面可以通过struct xs_page_t 结构体中的flags字段来设置不同的状态（包含唯），例如设置成XSLV_PAGE_FLAGS_TOP_LAYER，页面将会被加载在top_layer图层上，如下：

static struct xs_page_t THIS_page = { 
    .flags = XSLV_PAGE_FLAGS_TOP_LAYER,
    .create = Create,
    .on_new_options = OnNewOptions,
    .on_show = OnShow,
    .on_hide = OnHide,
};

用户可配置flags的值定义如下：

    // 常驻页面，即退出栈时，不主动释放页面
#define XSLV_PAGE_FLAGS_AWAYS                 (1<<0)
    // 预置页面，在xslvgl启动之前初始化好页面，这会导致第一帧显示时间加长
#define XSLV_PAGE_FLAGS_PRESET                (1<<2)
    // create返回必不为空，如果为空表示创建页面失败
#define XSLV_PAGE_FLAGS_HANDLE_NOT_NULL       (1<<3)
    // 是否LAUNCHER页面，多屏时，可对不同的屏指定不同的首页
#define XSLV_PAGE_FLAGS_LAUNCHER              (1<<6)
    // POP进栈时，会检查是否存在，如果已存在，会将其移至栈顶
#define XSLV_PAGE_FLAGS_ONLY_ONE_IN_STACK     (1<<7)
    // 当前页面显示在 top_layer 图层上
#define XSLV_PAGE_FLAGS_TOP_LAYER             (1<<9)
    // 当前页面显示在 sys_layer 图层上
#define XSLV_PAGE_FLAGS_SYS_LAYER             (1<<10)
    // 是否为产测页面
#define XSLV_PAGE_FLAGS_FACTORY               (1<<11)
    // 页面动画设置
#define XSLV_PAGE_FLAGS_ANIM_IN_MASK          (0x0F << 16)
#define XSLV_PAGE_FLAGS_ANIM_OUT_MASK         (0xF0 << 16)
#define XSLV_PAGE_FLAGS_ANIM_NONE             ((0x00) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OVER_LEFT        ((0x01) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OVER_RIGHT       ((0x02) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OVER_TOP         ((0x03) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OVER_BOTTOM      ((0x04) << 16)
#define XSLV_PAGE_FLAGS_ANIM_MOVE_LEFT        ((0x05) << 16)
#define XSLV_PAGE_FLAGS_ANIM_MOVE_RIGHT       ((0x06) << 16)
#define XSLV_PAGE_FLAGS_ANIM_MOVE_TOP         ((0x07) << 16)
#define XSLV_PAGE_FLAGS_ANIM_MOVE_BOTTOM      ((0x08) << 16)
#define XSLV_PAGE_FLAGS_ANIM_FADE_IN          ((0x09) << 16)
#define XSLV_PAGE_FLAGS_ANIM_FADE_OUT         ((0x10) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OUT_LEFT         ((0x20) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OUT_RIGHT        ((0x30) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OUT_TOP          ((0x40) << 16)
#define XSLV_PAGE_FLAGS_ANIM_OUT_BOTTOM       ((0x50) << 16)