Style เป็นตัวจัดการคุณสมบัติแบบต่างๆของ screen รวมถึง widget ทั้งหลายด้วย การจัดการคุณสมบัติของตัว object นี้มีทั้งการ เปลี่ยนสี การทำให้โปร่งแสง การตีขอบ การจัดการขอบเขตของแต่ละ object ว่าให้ชิดกันได้มากสุดแค่ไหน
สร้าง Style
การสร้าง style ขึ้นมาจะเหมือนกับการประกาศ Object อื่นๆ ทั่วไปโดยการสร้าง style จะใช้คำสั่งต่อไปนี้
static lv_style_t ชื่อ_style;
lv_style_init(&ชื่อ_style);
จากนั้นเราจะได้ style เปล่าๆของเราขึ้นมา จากนนี้การปรับแต่งใดๆก็ตามที่ใส่ไปใน style นี้จะทำหน้าที่เป็นเหมือน template ให้กับ object อื่นๆที่เรียก style นี้มาใช้
Background
เป็นฟังก์ชั่นจัด style เกี่ยวกับพื้นหลังทั้งหมด รวมถึงการจัดสี การไล่สี การตั้งค่าความโปร่งแสง โดยชุดคำสั่งที่เกี่ยวข้องกับการจัดการพื้นหลังมีดังต่อไปนี้
lv_style_set_radius(&style, 5); // ลบมุม object ให้เป็นโค้งรัศมี 5
/*Make a gradient*/
lv_style_set_bg_opa(&style, LV_OPA_COVER); // ตั้งค่าความโปร่งแสงโดยค่าความใส เปลี่ยนจาก LV_OPA_COVER(ไม่มีโปร่งแสง) -> 0-255
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));// เปลี่ยนสีพื้นหลังหลัก [LV_PALLETTE_ชื่อสี] หรือ lv_color_hex(0x000000) ตามด้วยความสว่างสี 1-5
lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE));// สีพื้นหลังรอง
lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);// ทิศทางการ gradient โดย LV_GRAD_DIR_VER = แนวตั้ง, LV_GRAD_DIR_HOR = แนวนอน
/*Shift the gradient to the bottom*/
lv_style_set_bg_main_stop(&style, 128); // จุดที่สีหลักเริ่ม gradient (0-255)
lv_style_set_bg_grad_stop(&style, 192); // จุดที่สีรองเริ่ม gradient (0-255)
Border
การตั้งค่า style บนขอบของวัตถุ เราสามารถไฮไลท์ขอบของวัตถุได้ โดยฟังก์ชั่นเกี่ยวกับการตั้งค่าขอบของวัตถุมีดังต่อไปนี้
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); //เปลี่ยนสีขอบ
lv_style_set_border_width(&style, 5);// ตั้งความกว้างของขอบ(pixel)
lv_style_set_border_opa(&style, LV_OPA_50); // ตั้งค่าความโปร่งใสของขอบเป็น 50%
lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT); // เลือกให้มีขอบแค่ด้านล่างกับด้านขวา
border side สามารถเลือกทิศต่างๆได้ดังนี้
LV_BORDER_SIDE_NONE = ไม่มีขอบ
LV_BORDER_SIDE_LEFT = ขอบด้านซ้าย
LV_BORDER_SIDE_RIGHT = ขอบด้านขวา
LV_BORDER_SIDE_TOP = ขอบด้านบน
LV_BORDER_SIDE_BOTTOM = ขอบด้านล่าง
LV_BORDER_SIDE_FULL = ขอบทุกด้าน
Outline
เส้นขอบนอก ส่วนนี้จะเป็นฟังก์ชั่นเกี่ยวกับการตั้งค่าต่างๆของเส้นขอบด้านนอก object เราสามารถตั้งค่าให้ หนา /บาง ตามที่ต้องการได้ สามารถตั้งค่าความห่างระหว่างเส้นขอบกับตัววัตถุได้
lv_style_set_outline_width(&style, 2); //ตั้งค่าความกว้างของเส้นขอบ (pixel)
lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));// ตั้งค่าสีเส้นขอบ
lv_style_set_outline_pad(&style, 8); // ตั้งค่าความห่างระหว่างเส้นขอบกับobject (pixel)
lv_style_set_outline_opa(&style, LV_OPA_50); // ตั้งค่าความโปร่งแสงของเส้นขอบ (0-255)
LV_OPA สามารถตั้งค่าให้โปร่งแสงได้ทุก 10%
e.g. LV_OPA_10, LV_OPA_20, LV_OPA_50
Shadow
เป็นการตั้งค่าให้มีเงาฉายมาจาก object โดยเราสามารถตั้งค่าสีของเงา และตำแหน่งของเงาได้ โดยฟังก์ชั่นเกี่ยวกับการตั้งค่าเงาของวัตถุมีดังต่อไปนี้
lv_style_set_shadow_width(&style, 25); // ตั้งค่าความเบลอของขอบเงา
lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_shadow_ofs_x(&style, 10); // ตำแหน่งของเงาในแกน x
lv_style_set_shadow_ofs_y(&style, 20); // ตำแหน่งของเงาในแกน y
lv_style_set_shadow_ofs_y(&style, 5); // ขยายขนาดของเงา
ขนาดของเงาจะมีขนาดเท่ากับขนาดของ object
Text
ฟังก์ชั่นเกี่ยวกับการตั้งค่าตัวอักษร ไม่ว่าจะเป็นเลือก font, ปรับขนาด, เปลี่ยนสี ปรับช่องไฟ ของตัวหนังสือได้ โดยชุดคำสั่งทั้งหมดจะมีดังนี้
lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE)); // ปรับสีตัวหนังสือ
lv_style_set_text_letter_space(&style, 5); //ปรับช่องไฟ
lv_style_set_text_line_space(&style, 20); //ปรับระยะเว้นบรรทัด
lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE); //ปรับแต่ง ขีดเส้นใต้,ขีดฆ่า
//lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_label_set_text(obj, "Text of\n"
"a label");
lv_obj_center(obj);
Text decor มี 3 แบบให้ใช้ด้วยกันคือ
LV_TEXT_DECOR_NONE = ไม่มีการตกแต่ง
LV_TEXT_DECOR_UNDERLINE = ขีดเส้นใต้ตัวหนังสือ
LV_TEXT_DECOR_STRIKETHROUGH = ขีดเส้นทับตัวหนังสือ
เราสามารถดู font ที่ใช้งานได้ในไฟล์ lv_conf.h บรรทัดที่ 265
การนำ Style ไปใส่บน object
เราสามารถนำไปใส่ได้ด้วยการใช้คำสั่งดังต่อไปนี้
lv_obj_add_style(obj, &style, 0);
โดย agreement ทั้งสามคือ
Object ที่จะนำ style ไปใส่
style ที่เราจะนำมาใส่ใน object
สถานะของ object นั้นที่จะแสดงผล
สถานะตอนแสดงผลมีหลายสถานะสถานะเช่น
LV_STATE_DEFAULT = ขณะ object อยู่เฉยๆ
LV_STATE_PRESSED = ขณะ object ถูกกด
LV_STATE_FOCUSED = ขณะ object ถูกเลือก
