[发明专利]一种基于LVGL的用户界面切换方法及装置

说明书

本申请公开了一种基于LVGL的界面切换方法。步骤S21：设置多张画布之间的上下位置关系，在每张画布上建立多个界面，每个界面的大小都等于屏幕的大小。步骤S22：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。步骤S23：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左、向右、向上、还是向下滑动；画布的X轴坐标跟随触控主体的左右滑动方向而同方向移动；画布之间的切换跟随触控主体的上下滑动方向而同方向移动。步骤S24：当触控主体离开触控屏时，决定屏幕上最终显示的界面。本申请在LVGL系统框架中实现了左右滑动以及上下滑动切换用户界面。

技术领域

本申请涉及一种电子设备上切换用户界面的方法。

背景技术

目前采用嵌入式系统（embedded system）的电子设备使用的GUI（graphical userinterface，图形用户界面）方案主要有两种，高端的电子设备使用安卓（Android）GUI系统框架，低端的电子设备则使用miniGUI系统框架。安卓GUI系统框架的代码量大，无法在存储空间有限的电子设备中保存。miniGUI系统框架的功能老旧，画面效果不够丰富，而且代码体积还是不够小。

LVGL（Light and Versatile Graphics Library，轻量通用图形库）是一种新的GUI系统框架，具有代码量小、易于开发UI（user interface，用户界面）的优点，仅用16MB的闪存（flash）空间就能加载电子设备的固件（firmware）。但是LVGL系统框架目前只提供了左右滑动切换用户界面的方法。

请参阅图1，LVGL系统框架中现有的界面切换方法包括如下步骤。

步骤S11：在唯一的画布上建立多个界面，每个界面的大小（宽度、高度）都等于屏幕的大小（宽度、高度）。画布的高度等于屏幕的高度；画布的宽度是多个界面的宽度之和。屏幕是画布上的一个窗口，用户只能通过屏幕看到画布上的部分内容。

步骤S12：当有触控主体接触到电子设备的触控屏时，记录下接触位置的X轴和Y轴坐标作为初始位置。所述触控主体包括用户手指、触控笔等。

步骤S13：当触控主体始终接触触控屏且滑动时，实时记录触控主体与触控屏的接触位置的X轴和Y轴坐标，并判断触控主体是向左还是向右滑动。所述实时记录的采样周期例如是30ms。每次采样时计算触控主体与触控屏的当前接触位置的X轴坐标与初始位置的X轴坐标的差值作为X轴偏移量。当X轴偏移量大于0，判定触控主体向右滑动。当X轴偏移量小于0，判定触控主体向左滑动。

屏幕的坐标固定不动，屏幕上显示的内容是画布当前移动到屏幕范围内的内容。画布的坐标跟随触控主体的滑动方向而同方向移动。当触控主体向右滑动，画布也向右移动。当触控主体向左滑动，画布也向左移动。画布的移动距离等于触控主体的X轴偏移量的绝对值。

例如，屏幕的大小是240像素×240像素，画布的大小是960像素（宽度）×240像素（高度），画布上有4个界面，从左到右分别是界面1到界面4。一开始，屏幕上显示界面2。当用户手指在屏幕上滑动的某一时刻，X轴偏移量是－100像素，表明用户手指向左滑动100像素，则画布也向左滑动100像素，此时屏幕上显示的内容是两个界面的拼接——界面2的宽度为140像素的靠右侧部分与界面3的宽度为100像素的靠左侧部分。

步骤S14：当触控主体离开触控屏时，决定屏幕上最终显示的界面。此时屏幕上显示的内容如果恰好为一个界面，则不做变动。此时屏幕上显示的内容如果是两个界面的拼接，则哪个界面出现在屏幕中的宽度更大，就将该界面完整地展现在屏幕中，例如移动画布以使该界面从部分在屏幕上显示变为完整在屏幕上显示。

LVGL系统框架目前不提供也不支持上下滑动切换用户界面。

发明内容