文章目录
- 一、控件的公共属性
- 二、常用控件的私有属性
- 三、控件的显示与隐藏
一、控件的公共属性
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; //控件id
struct element *parent; //指向父控件的指针
struct list_head sibling; //兄弟控件链表头
struct list_head child; //子控件链表头
struct element *focus; //焦点控件element
struct element_css css; //css属性
struct draw_context *dc; //dc，platform层使用
const struct element_event_handler *handler;//库注册的hander
int 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; //背景图片id
int 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的list
int 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; //播放间隔ms
void *timer; //timer_id
struct element_luascript_t *lua;
const struct ui_pic_info *info; //图片info
const 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; //文本颜色565
u16 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; //定时器id
struct 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; //element
int 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; //垂直列表转为旋转列表标志lua
int 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; //惯性定时器id
float 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; //回弹项size
int flick_timer; //回弹定时器id
int flick_distance; //回弹距离，中间变量
int flick_overdis; //回弹目标距离
int flick_resdis; //回弹步进
float flick_v0; //回弹初速
u16 center_target_line; //居中目标中线位置：0-10000
u16 center_next_threshold; //居中滑入下一项阈值：0-10000
u8 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; //列表子项info
struct ui_grid_dynamic *dynamic; //动态列表信息
struct position pos; //触摸点位
struct draw_context dc; //不使用
struct element_touch_event *e; //不适用
const struct ui_grid_info *info; //列表info
const 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]; //左右图片和点的elm
u8 step; //步进，用于编码器
u8 move; //
char persent; //百分比
s16 left; //左边界
s16 width; //宽度
s16 min_value; //最小值，用于文本显示
s16 max_value; //最大值，用于文本显示
u16 text_color; //文本颜色565
struct 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]; //子控件css
char 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; //刷新定时器id
const 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; //旋转中心x
u16 cent_y; //旋转中心y
struct 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]; //子控件css
char 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; //timerid
const 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; //颜色565
u16 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);
