推荐一种LVGL图标管理代码

正点原子运营

以下文章摘自微信公众号——开源电子网《推荐一种LVGL图标管理代码》
更多技术文章，请扫下方二维码关注

一种LVGL图标管理代码

    如果我们使用LVGL制作一个类似手机上的APP界面，那么我们怎么管理图标呢，我们知道LVGL可以设置对象的位置，可以对齐等等操作，如果我们使用对象设置坐标的方法：可能必须先知道显示屏的大小才可以，当然我们也不知道APP的数量多少，一个显示屏的宽度到底放多个图标等等问题，有没有一种自动判断方法呢，让图表按照我们的思路排版。



    例如兼容显示屏(2.8/3.5/4.3/7/10.1)寸显示屏，显示屏宽度越大那么一行容纳的图标就越多，如果显示屏宽度越小，那么兼容图标就越少，例如5个图标，每个图标的宽度是64，那么对于2.8竖屏(240*320)一行可以容纳240/64= 3.75也就是说3个图标，剩下的两个可以在第二行显示，如下图所示：








  如果2.8寸横屏呢，那么显示屏该怎么样显示，320/64= 5 ，为啥一行等于4呢，主要就是图标之间有间隔，所以不足以容纳5个图标(除非不设置间隔)，如下图所示：






  其他尺寸的显示屏由上述类推。

  为了解决这个问题，我们必须利用一下LVGL的返回函数的API了，例如获取显示屏宽度，以及把图标放到数组里面去，如以下分析：


1.声明图片(LVGL必须操作的)

1. LV_IMG_DECLARE(Calculator)
   
2. 
   
3. LV_IMG_DECLARE(X2)
   
4. 
   
5. LV_IMG_DECLARE(X3)
   
6. 
   
7. LV_IMG_DECLARE(X4)
   
8. 
   
9. LV_IMG_DECLARE(X5)
   
10. 
    
11. LV_IMG_DECLARE(X6)
    
12. 
    
13. LV_IMG_DECLARE(X7)
    
14. 
    
15. LV_IMG_DECLARE(X8)
    
16. 
    
17. LV_IMG_DECLARE(X9)
    
18. 
    
19. LV_IMG_DECLARE(X10)
    
20. 
    
21. LV_IMG_DECLARE(X11)
    

复制代码

2.创建一个结构体获取图标信息的

1. typedef struct
   
2. 
   
3. {
   
4. 
   
5.     char* xxx;
   
6. 
   
7.     char* xxx1;
   
8. 
   
9.     const void* app_image;  /* 图片源 */
   
10. 
    
11. }app_image_info;
    
12. 
    
13. 
    
14. 
    
15. static const app_image_info app_image[] =
    
16. 
    
17. {
    
18. 
    
19.     {" "," ",NULL},
    
20. 
    
21.     {"Calculator","计算器",&Calculator},
    
22. 
    
23.     {"X1","x",&X1},
    
24. 
    
25.     {" X ","x",&X2},
    
26. 
    
27.     {" X ","x",&X3},
    
28. 
    
29.     {" X ","x",&X4},
    
30. 
    
31.     {" X ","x",&X5},
    
32. 
    
33.     {" X ","x",&X6},
    
34. 
    
35.     {" X ","x",&X7},
    
36. 
    
37.     {" X ","x",&X8},
    
38. 
    
39.     {" X ","x",&X9},
    
40. 
    
41.     {" X ","x",&X10},
    
42. 
    
43.     {" X ","x",&X11},
    
44. 
    
45. };

复制代码

3.获取图标的个数(12) + 一个NULL的等于13

1. /* 获取路径的个数 */
   
2. 
   
3. #define image_mun (int)(sizeof(app_image)/sizeof(app_image[0]))
   

复制代码

4.创建一个数组

该数组的大小等image_mun

1. 
   
2. /* 设置一个app图像数组 */
   
3. 
   
4. lv_obj_t *lv_app_t[image_mun];

复制代码

5.实现代码

1. void lv_mid_cont_add_app(lv_obj_t *parent)
   
2. 
   
3. {
   
4. 
   
5.    lv_width_x 获取一个图标的宽度和大小 */
   
6. 
   
7.     unsigned int lv_width_x = Calculator.header.w +10;
   
8. 
   
9.     int app_index = 1;                 
   
10. 
    
11.     /* 设置图标的索引为1 */
    
12. 
    
13.     int line_feed_num = 0;            
    
14. 
    
15.     /* 设置行数，图标的行数为0 */
    
16. 
    
17.     int i = 0;
    
18. 
    
19.     lv_app_t[0] = NULL;               
    
20. 
    
21.     /* 图标数组索引0为NULL */
    
22. 
    
23.     /* 图标数组索引1放第一个图标 */
    
24. 
    
25.     lv_app_t[app_index] = lv_imgbtn_create(parent);   
    
26. 
    
27. lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_RELEASED,
    
28. 
    
29.                      NULL,app_image[app_index].app_image,NULL);
    
30. 
    
31. lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_PRESSED,
    
32. 
    
33.                      NULL,app_image[app_index].app_image,NULL);
    
34. 
    
35. lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_CHECKED_RELEASED,
    
36. 
    
37.                      NULL,app_image[app_index].app_image,NULL);
    
38. 
    
39. lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_CHECKED_PRESSED,
    
40. 
    
41.                     NULL,app_image[app_index].app_image,NULL);
    
42. 
    
43.     lv_obj_align_to(lv_app_t[app_index], NULL, LV_ALIGN_TOP_LEFT, 10, 10);
    
44. 
    
45.   
    
46. 
    
47.     for (app_index = 2;app_index < image_mun;app_index ++) /* 遍历 */
    
48. 
    
49. {   
    
50. 
    
51. /* lv_app_t[app_index] = 创建图片按键 */
    
52. 
    
53.         lv_app_t[app_index] = lv_imgbtn_create(parent);   
    
54. 
    
55.         lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_RELEASED,
    
56. 
    
57.                            NULL,app_image[app_index].app_image,NULL);
    
58. 
    
59.         lv_imgbtn_set_src(lv_app_t[app_index], LV_IMGBTN_STATE_PRESSED,
    
60. 
    
61.                              NULL,app_image[app_index].app_image,NULL);
    
62. 
    
63.         lv_imgbtn_set_src(lv_app_t[app_index],
    
64. 
    
65.                              LV_IMGBTN_STATE_CHECKED_RELEASED,
    
66. 
    
67. NULL,app_image[app_index].app_image,NULL);
    
68. 
    
69.         lv_imgbtn_set_src(lv_app_t[app_index],
    
70. 
    
71.                              LV_IMGBTN_STATE_CHECKED_PRESSED,
    
72. 
    
73.                              NULL,app_image[app_index].app_image,NULL);
    
74. 
    
75. /* lv_width_x  = lv_width_x*2 + 10 */
    
76. 
    
77.         lv_width_x = lv_width_x*2 + 10;
    
78. 
    
79.         /* lv_width_x 小于父类的宽度就是显示屏的宽度 */
    
80. 
    
81.         if (lv_width_x < lv_obj_get_width(parent))  
    
82. 
    
83.         {
    
84. 
    
85.             /* 如果lv_width_x小于显示屏的宽度，
    
86. 
    
87. 那么后面的图片案件与它前面的图片按键右边中间对齐 */
    
88. 
    
89.             lv_obj_align_to(lv_app_t[app_index], lv_app_t[app_index - 1],
    
90. 
    
91.                                LV_ALIGN_OUT_RIGHT_MID, 10, 0);
    
92. 
    
93.         }
    
94. 
    
95.         else/* 如果lv_width_x大于显示屏的宽度 */
    
96. 
    
97.         {
    
98. 
    
99.             /* 行数加1 */
    
100. 
     
101.             line_feed_num ++;
     
102. 
     
103.             /* 设置这个图片按键的位置为第一行第一个 */
     
104. 
     
105.             lv_obj_set_pos(lv_app_t[app_index],10,
     
106. 
     
107. Calculator.header.w*line_feed_num + 30 + i*20);
     
108. 
     
109.             i ++;
     
110. 
     
111.             /* lv_width_x = 图片宽度 */
     
112. 
     
113.             lv_width_x = Calculator.header.w;
     
114. 
     
115.         }
     
116. 
     
117.     }
     
118. 
     
119. }
     

复制代码

    上面的代码就可以实现我们的功能了，具体就不分析了，可以使用多种显示屏试试，都是一样的效果。