組み込みGUILVGL「タイルビュースプライシングビューコントロール」の紹介

1.LVGLGUIスプライシングビューコントロールの概念

 

Tileviewは、要素(タイルと呼ばれる)をグリッドに配置できるコンテナオブジェクトです。スワイプすることで、ユーザーはこれらのステッカー間を移動できます。

Tileviewが画面サイズの場合、スマートウォッチで見たかもしれないユーザーインターフェイスを提供します。

2.LVGLGUIスティッチングビューウィジェットとスタイル

TileviewとPageには同じセクションがあります。LV_PAGE_PART_SCRLを使用する場合を除きます。これは、参照できず、常に透過的であるためです。このページの詳細なドキュメントを参照してください。

3.LVGLGUIスティッチングビューコントロールの使用

1.有効な位置

タイルは完全なグリッドを形成する必要はなく、すべての要素がそこにあります。グリッドには穴を付けることができますが、連続している必要があります。つまり、空の行や列を含めることはできません。

lv_tileview_set_valid_positions(tileview、valid_pos_array、array_len)を使用して、有効な位置を設定します。スクロールは、これらの位置にのみスクロールできます。インデックス0,0は、左上のタイルを表します。たとえば、lv_point_t valid_pos_array [] = { {0,0}、{0,1}、{1,1}、{ {LV_COORD_MIN、LV_COORD_MIN}}は、「L」字型のタイルビューを提供します。{1,1}にはタイルがないため、ユーザーはそこにスクロールできません。

つまり、valid_pos_arrayはタイルの場所を示します。特定のタイルの一部の位置を無効にするために、オンザフライで変更できます。たとえば、すべてのテクスチャが追加された2x2グリッドが存在する場合がありますが、最初の行(y = 0)は「メイン行」として機能し、2番目の行(y = 1)には上記のテクスチャのオプションが含まれます。水平スクロールはメイン行でのみ可能であり、2行目のオプション間では不可能であるとしましょう。この場合、新しいメインテクスチャを選択すると、valid_pos_arrayを変更する必要があります。

最初のメインマップの場合:{0,0}、{0,1}、{1,0}は、{1,1}オプションマップを無効にします

2番目のメインマップ{0,0}、{1,0}、{1,1}の{0,1}オプションマップを無効にします

2.タイルを設定します

lv_tileview_set_tile_act(tileview、x_id、y_id、LV_ANIM_ON / OFF)を使用して現在表示されているタイルを設定します

3.要素を追加します

要素を追加するには、Tileviewでオブジェクトを作成し、手動で目的の場所に配置します。

lv_tileview_add_element(tielview、element)は、tielviewの要素をスクロール(ドラッグ)するために使用する必要があります。たとえば、タイルマップにボタンがある場合、ユーザーがボタンを使用してタイルビューをスクロールできるように、ボタンをタイルビューに明示的に追加する必要があります。

4.スクロール伝播

ここでは、リストなどのページのようなオブジェクトのスクロール伝播機能を非常にうまく使用できます。たとえば、フルサイズのリストを作成し、リストが上部または下部の大部分に到達すると、ユーザーはタイルビューをスクロールします。

5.アニメーション時間

Tileviewのアニメーション時間は、lv_tileview_set_anim_time(Tileview、anim_time)で調整できます。

6.エッジフラッシュ

タイルビューが無効な位置に達したとき、またはスクロールタイルビューが終了したときに、「エッジフラッシュ」効果を追加できます。

この機能を有効にするには、lv_tileview_set_edge_flash(tileview、true)を使用します。

7.イベント

ベースイベントに加えて、特別イベントがあります

LV_EVENT_VALUE_CHANGED 新しいタイルがスクロールまたはでロードされたときに送信されます lv_tileview_set_actイベントデータは、新しいタイルのインデックスに設定されます valid_pos_array (タイプは uint32_t *

例を見てみましょう

void lvgl_title_view_test(void)
{
    static lv_point_t valid_pos[] = { {0,0}, {0, 1}, {1,1} };
    lv_obj_t* tileview;
    tileview = lv_tileview_create(lv_scr_act(), NULL);
    lv_tileview_set_valid_positions(tileview, valid_pos, 3);
    lv_tileview_set_edge_flash(tileview, true);

    lv_obj_t* tile1 = lv_obj_create(tileview, NULL);
    lv_obj_set_size(tile1, LV_HOR_RES, LV_VER_RES);
    lv_tileview_add_element(tileview, tile1);

    /*Tile1: just a label*/
    lv_obj_t* label = lv_label_create(tile1, NULL);
    lv_label_set_text(label, "Scroll down");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Tile2: a list*/
    lv_obj_t* list = lv_list_create(tileview, NULL);
    lv_obj_set_size(list, LV_HOR_RES, LV_VER_RES);
    lv_obj_set_pos(list, 0, LV_VER_RES);
    lv_list_set_scroll_propagation(list, true);
    lv_list_set_scrollbar_mode(list, LV_SCROLLBAR_MODE_OFF);

    lv_list_add_btn(list, NULL, "One");
    lv_list_add_btn(list, NULL, "Two");
    lv_list_add_btn(list, NULL, "Three");
    lv_list_add_btn(list, NULL, "Four");
    lv_list_add_btn(list, NULL, "Five");
    lv_list_add_btn(list, NULL, "Six");
    lv_list_add_btn(list, NULL, "Seven");
    lv_list_add_btn(list, NULL, "Eight");

    /*Tile3: a button*/
    lv_obj_t* tile3 = lv_obj_create(tileview, tile1);
    lv_obj_set_pos(tile3, LV_HOR_RES, LV_VER_RES);
    lv_tileview_add_element(tileview, tile3);

    lv_obj_t* btn = lv_btn_create(tile3, NULL);
    lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_tileview_add_element(tileview, btn);
    label = lv_label_create(btn, NULL);
    lv_label_set_text(label, "No scroll up");
}

さて、それは終わった、もっとエキサイティングな突っ込みを続ける↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

おすすめ

転載: blog.csdn.net/XiaoXiaoPengBo/article/details/114086862