LVGL7.0高级界面开发-1

综合界面开发-1

1. 创建一个类似安卓的界面，用到的知识有style,tabview,imgbtn,img,list,label,cont，bar。

2. style用于修改控件的风格

3. tabview创建一个主页菜单

4. imgbtn用于自定义图像APP

5. img纯贴图用

6. list用于长按APP的快捷方式

7. label显示文本

8. bard动态显示电量

9. cont容器，各种控件都可以放在里面，在屏幕上可以作为一个整体显示，毕竟page、win等也是基于cont创建的，不想显示直接调用lv_obj_del()直接删除，非常好用，一定要掌握哦。

 home_page.c源文件代码

#include "lvgl/lvgl.h"
#include "../inc/gui_gloab.h"
#include "../inc/gui_func.h"

#define TITLE_WIN_SIZE       20

//按键控制
LV_EVENT_CB_DECLARE(imgbtn1_event_handler)
{
    switch (e)
    {
    case LV_EVENT_CLICKED://轻点
        break;
    case LV_EVENT_RELEASED://按压
        break;
    case LV_EVENT_PRESSED://松开
     //   env_set.cur_page = SW_CTRL_PAGE;
        break;
    case LV_EVENT_LONG_PRESSED://长按

        break;
    default:break;
    }
}
lv_obj_t* list1;
lv_obj_t* imgbtn2;
static void event_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_CLICKED) {
        printf("Clicked: %s\n", lv_list_get_btn_text(obj));
        lv_obj_del(imgbtn2);
        lv_obj_del(list1);
    }
}


lv_obj_t* list_btn;
//按键控制
LV_EVENT_CB_DECLARE(imgbtn2_event_handler)
{
    switch (e)
    {
    case LV_EVENT_CLICKED://轻点
        lv_obj_del(list1);
        break;
    case LV_EVENT_RELEASED://按压
        break;
    case LV_EVENT_PRESSED://松开
        
        break;
    case LV_EVENT_LONG_PRESSED://长按
        list1 = lv_list_create(lv_scr_act(), NULL);
        lv_obj_set_size(list1, 160, 200);
        lv_obj_align(list1, NULL, LV_ALIGN_IN_TOP_LEFT, 150, 130);
        /*Add buttons to the list*/
        list_btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
        lv_obj_set_event_cb(list_btn, event_handler);

        list_btn = lv_list_add_btn(list1, LV_SYMBOL_DIRECTORY, "Open");
        lv_obj_set_event_cb(list_btn, event_handler);

        list_btn = lv_list_add_btn(list1, LV_SYMBOL_TRASH, "Del");
        lv_obj_set_event_cb(list_btn, event_handler);
        break;
    default:break;
    }
}
static void notice_board(lv_obj_t* parent)
{
    //设置容器风格
    lv_style_init(&env_set.page_style);
    lv_style_set_radius(&env_set.page_style, LV_STATE_DEFAULT, 0);//设置页面圆角度数
    lv_style_set_bg_opa(&env_set.page_style, LV_STATE_DEFAULT, LV_OPA_TRANSP);//设置为透明
    // lv_style_set_bg_color(&env_set.page_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);//设置页面底色
    lv_style_set_border_opa(&env_set.page_style, LV_STATE_FOCUSED, LV_OPA_TRANSP);//设置为透明
    //   lv_style_set_border_color(&env_set.page_style, LV_STATE_FOCUSED, LV_COLOR_WHITE);//页面聚焦边线色
    lv_style_set_border_opa(&env_set.page_style, LV_STATE_DEFAULT, LV_OPA_TRANSP);//设置为透明
    //   lv_style_set_border_color(&env_set.page_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);//页面默认边线色
    lv_obj_t* cont = lv_cont_create(parent, NULL); //创建容器
    lv_obj_set_size(cont, LV_HOR_RES_MAX, TITLE_WIN_SIZE);//设置大小
    lv_obj_align(cont, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);//左上角对齐
    lv_obj_add_style(cont, LV_PAGE_PART_BG, &env_set.page_style);//添加风格

    lv_obj_t* label = lv_label_create(cont, NULL);//容器上创建时间标签
    lv_obj_align(label, cont, LV_ALIGN_IN_LEFT_MID, 400, 0);//居中对齐
    lv_label_set_text(label, "12:23");

    lv_obj_t* bar1 = lv_bar_create(cont, NULL);//创建一个电量显示
    lv_obj_set_size(bar1, 40, 15);
    lv_obj_align(bar1, NULL, LV_ALIGN_IN_LEFT_MID, 10, 0);
    lv_bar_set_anim_time(bar1, 2000);
    lv_bar_set_value(bar1, 100, LV_ANIM_ON);

    lv_obj_t* label1 = lv_label_create(cont, NULL);//容器上创建时间标签
    lv_obj_align(label1, cont, LV_ALIGN_IN_LEFT_MID, 60, 0);//居中对齐
    lv_label_set_text(label1, "100%");

    lv_obj_t* mouse_cursor = lv_img_create(cont, NULL);//显示符号通知
    lv_img_set_src(mouse_cursor, LV_SYMBOL_WIFI);
    lv_obj_align(mouse_cursor, cont, LV_ALIGN_IN_LEFT_MID, 760, 0);
}

static void First_Page_Create(lv_obj_t* parent)
{
    //声明图片
    LV_IMG_DECLARE(H_PIC_0);
    LV_IMG_DECLARE(H_PIC_1);

    static lv_style_t style;
    lv_style_init(&style);//对象风格初始化
    lv_style_set_image_recolor_opa(&style, LV_STATE_PRESSED, LV_OPA_30);//设置按下时的背景色深
    lv_style_set_image_recolor(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);//设置按下时的背景色

    lv_obj_t* imgbtn1 = lv_imgbtn_create(parent, NULL);//创建图片按键
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PRESSED, &H_PIC_0);//按下
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_RELEASED, &H_PIC_0);//抬起
    lv_obj_align(imgbtn1, NULL, LV_ALIGN_IN_TOP_LEFT, 30, 25);//左上角对齐
    lv_obj_set_event_cb(imgbtn1, imgbtn1_event_handler);//设置按钮回调
    lv_obj_add_style(imgbtn1, LV_IMGBTN_PART_MAIN, &style);//对象添加风格
    lv_obj_set_drag(imgbtn1, true);//使能移动

     imgbtn2 = lv_imgbtn_create(parent, NULL);//创建图片按键
    lv_imgbtn_set_src(imgbtn2, LV_BTN_STATE_PRESSED, &H_PIC_1);//按下
    lv_imgbtn_set_src(imgbtn2, LV_BTN_STATE_RELEASED, &H_PIC_1);//抬起
    lv_obj_align(imgbtn2, NULL, LV_ALIGN_IN_TOP_LEFT, 150, 25);//左上角对齐
    lv_obj_set_event_cb(imgbtn2, imgbtn2_event_handler);//设置按钮回调
    lv_obj_add_style(imgbtn2, LV_IMGBTN_PART_MAIN, &style);//对象添加风格
    
}

static void Second_Page_Create(lv_obj_t* parent)
{
    LV_IMG_DECLARE(H_PIC_2);
    static lv_style_t style;
    lv_style_init(&style);//对象风格初始化
    lv_style_set_image_recolor_opa(&style, LV_STATE_PRESSED, LV_OPA_30);//设置按下时的背景色深
    lv_style_set_image_recolor(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);//设置按下时的背景色

    lv_obj_t* img1 = lv_imgbtn_create(parent, NULL);//创建图片按键
    lv_imgbtn_set_src(img1, LV_BTN_STATE_PRESSED, &H_PIC_2);//按下
    lv_imgbtn_set_src(img1, LV_BTN_STATE_RELEASED, &H_PIC_2);//抬起
    lv_obj_align(img1, NULL, LV_ALIGN_IN_TOP_LEFT, 30, 25);//左上角对齐
    lv_obj_set_event_cb(img1, imgbtn2_event_handler);//设置按钮回调
    lv_obj_add_style(img1, LV_IMGBTN_PART_MAIN, &style);//对象添加风格
}


//菜单页
void Home_Page_Create(void)
{
    /*Create a Tab view object*/
    lv_obj_t* tabview;
    tabview = lv_tabview_create(lv_scr_act(), NULL);//创建一个tabview
    lv_obj_set_size(tabview, LV_HOR_RES_MAX, LV_VER_RES_MAX);//设置大小
    lv_obj_align(tabview, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);//对齐
    lv_tabview_set_btns_pos(tabview, LV_TABVIEW_TAB_POS_NONE);//不显示btns

    lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Tab 1");//创建第一页
    lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "Tab 2");//创建第二页

    notice_board(tabview);//创建通知栏
    First_Page_Create(tab1);//第一页
    Second_Page_Create(tab2);//第二页
}

main.c源文件代码

int main(int argc, char** argv)
{
……//省略若干代码

Home_Page_Create();



……//省略若干代码