文章目录
- 一、控件的公共属性
- 二、常用控件的私有属性
- 三、控件的显示与隐藏
一、控件的公共属性
struct element {u32 highlight: 1; //高亮标志u32 state: 3; //内核记录控件的状态u32 ref: 5; //内核计数值u32 prj: 3; //工程序号u32 hide_action: 1; //HIDE_WITH_REDRAW,HIDE_WITHOUT_REDRAW,u32 css_num : 2; //CSS的数量u32 page: 8; //页面序号u32 prior: 9; //优先级序号，大的在上层int id; //控件idstruct element *parent; //指向父控件的指针struct list_head sibling; //兄弟控件链表头struct list_head child; //子控件链表头 struct element *focus; //焦点控件elementstruct element_css css; //css属性struct draw_context *dc; //dc，platform层使用const struct element_event_handler *handler;//库注册的handerint group; //特效使用
};
struct element_css {u8 align: 2; //对齐方式u8 invisible: 1; //是否隐藏u8 z_order: 5; //子元素排列int left; //相对于父控件的左边界坐标int top; //相对于父控件的上边界坐标int width; //相对与父控件的宽度int height; //相对于父控件的高度u32 background_color: 24; //纯色背景颜色u32 alpha: 8; //window/layer/layout背景透明度int background_image: 24; //背景图片idint image_quadrant: 8; //象限,23指针使用struct css_border border; //边框struct css_rotate rotate; //旋转属性struct css_ratio ratio; //缩放
};
控件element均放置在控件句柄的第一个元素，即element与控件句柄指向同一地址，因此在确定控件类型的情况下，可以做转换
可以通过struct element *ui_core_get_element_by_id(u32 id)获取，养成判空好习惯
二、常用控件的私有属性
LAYOUT
struct layout {struct element elm; //公共属性u8 hide: 1; //是否隐藏u8 inited: 1; //是否被加载u8 release: 6;
u8 page;
//lua使用u8 movable; // 移动标志u8 star_menu; // 满天星标志struct list_head *icon_root; // 满天星icon的listint lcd_w; // 用于移动计算int lcd_h; // 用于移动计算struct element_luascript_t *lua;struct layout *layout; const struct layout_info *info; //存储的结构const struct element_event_handler *handler; //应用层注册的句柄
};
布局是UI设计中最常用的容器
控件存放于布局之中
同一页面可以拥有多个布局，子布局之间可以进行切换（show/hide）
涉及到组合控件的情况，一般是以布局为整体进行操作（案例：抽屉列表）
PIC
struct ui_pic {struct element elm; //公共属性char source[8]; //数据源（id不唯一或不固定时使用）u8 index; //图片索引u8 page; //u8 play_mode; //播放模式:不播放、循环、单次u16 play_interval; //播放间隔msvoid *timer; //timer_idstruct element_luascript_t *lua; const struct ui_pic_info *info; //图片infoconst struct element_event_handler *handler; //应用层注册的句柄
};
struct ui_pic_info {struct ui_ctrl_info_head head;char source[8];u8 highlight;u16 cent_x;u16 cent_y;u8 play_mode;u16 play_interval;struct ui_image_list *normal_img; //非高亮图片链表struct ui_image_list *highlight_img; //高亮图片链表struct element_event_action *action;
}
struct ui_image_list {u16 num; //图片数量u16 image[0]; //图片资源id
};
显示单张图片：背景图、图片列表
显示多张图片：图片列表切换索引
切换索引的接口有如下两个：
int ui_pic_show_image_by_id(int id, int index);
int ui_pic_set_image_index(struct ui_pic *pic, int index);
id的接口是自带刷新的，常用于onkey、ontouch中
句柄接口是不带刷新的，常用于onchange事件、控件集中刷新（大面积、多控件、短时间）
一般通过切换图片索引、缩放、旋转实现需要的效果
旋转和缩放不能同时使用
缩放：比例为0.125~8，图片最大尺寸240*240
旋转：图片的旋转中心需位于图片内
TEXT\TIME\NUMBER（文本类）
struct ui_text {struct element elm; //公共属性struct ui_text_attrs attrs; //文本类公共属性char source[8]; //数据源u16 timer; //刷新定时器u16 _str[UI_TEXT_LIST_MAX_NUM]; //文本列表信息char _format[7]; //格式”strpic””text””ascii”u8 str_num; //文本列表数量u8 index; //文本列表索引u8 page; struct element_luascript_t *lua;const struct ui_text_info *info; //文本存储
const struct element_event_handler *handler; //应用层注册的句柄
};
struct ui_text_attrs {const char *str; //文本数组*生命周期长于控件显示周期const char *format; //类型int color; //文本颜色565u16 strlen; //str长度u16 offset; //偏移距离，用于滚动u8 encode: 2; //编码u8 endian: 1; //大小端u8 flags: 5; //滚动/多行等u16 displen; //文本长度const char *mulstr; //多国语言混合的数组*生命周期长于控件显示周期u16 mulstr_len; //混合长度
u16 default_code; //默认字符自定义功能（字符显示不了时，用什么符号代替）u8 x_interval; //文本水平间距
};
struct ui_time {struct element_text text; //文本型元素公共属性char source[8]; //数据源u16 year: 12; //年u16 month: 4; //月u8 day; //日u8 hour; //时u8 min; //分u8 sec; //秒u8 css_num; //css数量u8 auto_cnt; //自动计数u8 page; u32 css[2]; //css地址int color; //文本颜色int hi_color; //高亮文本颜色u16 buf[20]; //存放显示内容buffer（因此time控件不存在buffer生命周期的问题）void *timer; //定时器idstruct element_luascript_t *lua;const struct ui_time_info *info;const struct element_event_handler *handler;//应用层注册的句柄
};
struct ui_number {struct element_text text;char source[8];u16 number[2];u16 buf[20]; //存放显示数字int color;int hi_color;u8 css_num;u8 page;u8 nums: 6; //number个数u8 type: 2; //数字型or文本型u32 css[2];u8 *num_str; //指向传入文本型的字符串，因此需要考虑生命周期u8 *temp_str;u16 temp_str_len;struct element_luascript_t *lua;const struct ui_number_info *info;const struct element_event_handler *handler;//应用层注册的句柄
};
struct element_text {struct element elm; //公共属性char *str; //显示字符const char *format; //字符格式void *priv; //elementint color; //颜色值u8 x_interval; //文本间隔const struct element_event_handler *handler;//应用层注册的句柄
};
如在onchange中修改文本的值，要在show_probe中进行，在show/show_post修改需要等下一次刷新才起作用
文本包括四类显示：字库、多国语言、多国语言拼接、数字&符号图片
GRID
struct ui_grid {struct element elm; //公共属性char hi_index; //高亮项索引char touch_index; //触摸项索引char cur_dindex; //动态高亮项索引char onfocus; //列表焦点标志，用于响应touch事件u8 page_mode; //跟手滑动和按页滚动标志u8 slide_direction; //滑动方向u8 col_num; //列数u8 row_num; //行数u8 show_row; //显示行数u8 show_col; //显示列数u8 avail_item_num; //有效项数u8 pix_scroll; //触摸标志u8 ctrl_num; //传入的有效项数u8 page; //所在页面u8 child_init; //子控件初始化标志u8 rotate; //垂直列表转为旋转列表标志luaint x_interval; //水平项间距（相对数值）int y_interval; //垂直项间距（相对数值）int max_show_left; //ui库使用计算变量int max_show_top; //ui库使用计算变量int min_show_left; //ui库使用计算变量int min_show_top; //ui库使用计算变量int max_left; //ui库使用计算变量int max_top; //ui库使用计算变量int min_left; //ui库使用计算变量
int min_top; //ui库使用计算变量int energy_timer; //惯性定时器idfloat energy_vx0; //惯性速度，由tp给出float energy_vy0; //惯性速度，由tp给出float energy_a; //惯性负加速度，固定参数float energy_val; //惯性系数，用于调整惯性大小u8 energy_xdir; //惯性方向u8 energy_ydir; //惯性方向u8 energy_status; //惯性状态u8 energy_tslide; //惯性滑动时间间隔，固定参数u8 flick_endflag; //回弹结束标志u8 flick_status; //回弹状态u16 flick_cmpsize; //回弹项sizeint flick_timer; //回弹定时器idint flick_distance; //回弹距离，中间变量int flick_overdis; //回弹目标距离int flick_resdis; //回弹步进float flick_v0; //回弹初速u16 center_target_line; //居中目标中线位置：0-10000u16 center_next_threshold; //居中滑入下一项阈值：0-10000u8 center_item_offset; //居中项偏移阈值:0-(avail_item_num-1)u8 center_index_mode; //居中项：高亮项or触摸项u8 auto_center_enable; //居中模式使能u8 flick_close; //回弹关闭struct element_luascript_t *lua;struct scroll_area *area; //滑动区域，需要传入全局变量or局部静态struct layout *item; //列表子项属性struct layout_info *item_info; //列表子项infostruct ui_grid_dynamic *dynamic; //动态列表信息struct position pos; //触摸点位struct draw_context dc; //不使用struct element_touch_event *e; //不适用const struct ui_grid_info *info; //列表infoconst struct element_event_handler *handler; //应用层注册的句柄u8 key_jump; //key_jump:静态垂直或者水平列表才能使用，使用按键滚动u8 hi_move; //滑动highlight_ajust使能void (*highlight_ajust)(struct ui_grid *grid, int direction);void (*end_once)(struct ui_grid *grid);
};struct ui_grid_dynamic {int dhi_index; //动态高亮项int dcol_num; //动态列数量int drow_num; //动态行数量int min_row_index; //最小行索引int max_row_index; //最大行索引int min_col_index; //最小列索引int max_col_index; //最大列索引int min_show_row_index;int max_show_row_index;int min_show_col_index;int max_show_col_index;int grid_xval; int grid_yval; u8 grid_col_num;u8 grid_row_num;u8 grid_show_row;u8 grid_show_col;int base_index_once; //first_show第一行索引int init_step_once; //first_show初始化步进
};Slide
struct ui_slider {struct element elm; //公共属性struct element child_elm[SLIDER_CHILD_NUM]; //左右图片和点的elmu8 step; //步进，用于编码器u8 move; //char persent; //百分比s16 left; //左边界s16 width; //宽度s16 min_value; //最小值，用于文本显示s16 max_value; //最大值，用于文本显示u16 text_color; //文本颜色565struct element_luascript_t *lua;const struct ui_slider_info *info;const struct slider_text_info *text_info;const struct element_event_handler *handler;//应用层注册的句柄
};
垂直滑动条与水平滑动条一致
Compass
struct ui_compass {struct element elm; //公共属性struct element child_elm[COMPASS_CHILD_NUM]; //子控件属性struct compass_css_info child_css[COMPASS_CHILD_NUM]; //子控件csschar source[8]; //数据源int bk_angle : 16; //背景盘角度int indicator_angle : 16; //指针角度int last_bk_angle : 16; //上一次背景盘角度int last_indicator_angle : 16; //上一次指针角度u8 updata; //更新标志u8 ctrl_num; //子控件数量void *timer; //刷新定时器idconst struct layout_info *info;const struct compass_pic_info *pic_info[COMPASS_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};struct compass_pic_info {struct ui_ctrl_info_head head;u16 cent_x; //旋转中心xu16 cent_y; //旋转中心ystruct ui_image_list *img;
};
表盘
struct ui_watch {struct element elm; //公共属性struct element child_elm[WATCH_CHILD_NUM]; //子控件属性struct watch_css_info child_css[WATCH_CHILD_NUM]; //子控件csschar source[8]; //数据源u8 hour; //时u8 min; //分u8 sec; //秒u8 last_hour; //上一次时u8 last_min; //上一次分 u8 last_sec; //上一次秒u8 updata; //更新标志u8 ctrl_num; //子控件数量u8 sec_cnt; //秒计数，用于匀速表盘计数u8 slow_sec; //匀速表盘使能void *timer; //timeridconst struct layout_info *info;const struct watch_pic_info *pic_info[WATCH_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};
struct watch_pic_info {struct ui_ctrl_info_head head;u16 cent_x; //旋转中心u16 cent_y; //旋转中心u16 dst_cent_x; //偏移距离u16 dst_cent_y; //偏移距离struct ui_image_list *img;
};struct ui_progress {struct element elm; //公共属性struct element child_elm[PROGRESS_CHILD_NUM]; //子控件属性char source[8]; //数据源u16 center_x; //圆环中心u16 center_y; //圆环中心u16 radius; //圆环半径u16 angle_begin; //起始角度u16 angle_end; //结束角度u8 ctrl_num; //控件数量char percent; //百分比u8 *mask; //不使用u16 mask_len; //不使用void *timer; //不使用const struct layout_info *info;const struct progress_highlight_info *pic_info[PROGRESS_CHILD_NUM];const struct element_event_handler *handler;//应用层注册的句柄const struct element_luascript_t *lua;
};
struct progress_highlight_info {struct ui_ctrl_info_head head;u16 center_x; //圆环中心u16 center_y; //圆环中心u16 radius_big; //外径u16 radius_small; //内径u32 color; //颜色565u16 angle_begin; //起始角度u16 angle_end; //结束角度struct ui_image_list *img;
};struct multiprogress_highlight_info {struct ui_ctrl_info_head head;u16 number;u16 center_x;u16 center_y;u16 radius0_big;u16 radius0_small;u32 color0;u16 radius1_big;u16 radius1_small;u32 color1;u16 radius2_big;u16 radius2_small;u32 color2;u16 angle_begin;u16 angle_end;struct ui_image_list *img;
};
三、控件的显示与隐藏
- 控件
线程同步接口（带刷新）
将页面id post到ui线程调用，先释放原有页面，再加载新页面
int ui_show_main(int id);
int ui_hide_main(int id);
非线程同步接口（带刷新）
需要在ui线程调用，不会主动释放原页面，可以用于多页面同时加载
int ui_show(int id);
int ui_hide(int id);
非线程同步接口（不带刷新）
控件需要在页面内
int ui_core_show(void *_elm, int init);
int ui_core_hide(void *_elm);
动态加载
一般是在init的时候调用，跟随刷新
需要注意父子关系，不能将layout加载到window下面
int create_control_by_id(char *tabfile, int page_id, int id, int parent_id);
int delete_control_by_id(int id);