1.LVGLGUIスイッチ制御の概念

タブビューオブジェクトを使用して、コンテンツをタブに整理できます。

2.LVGLGUIスイッチのウィジェットとスタイル

タブビューオブジェクトにはいくつかの部分が含まれています。主にLV_TABVIEW_PART_BG。
これは、タブビューの残りの部分を保持する長方形のコンテナです。
2つの重要な実際の部分が背景に作成されます。

LV_TABVIEW_PART_BG_SCRL：これはページのスクロール可能な部分です。タブの内容を並べて表示します。ページの背景は常に透明で、外部からアクセスすることはできません。
LV_TABVIEW_PART_TAB_BG：タブボタン。ボタンマトリックスです。ボタンをクリックすると、LV_TABVIEW_PART_BG_SCRLが関連するタブの内容までスクロールします。タブボタンLV_TABVIEW_PART_TAB_BTNからアクセスできます。タブを選択すると、ボタンが選択され、設定されたスタイルLV_STATE_CHECKEDを使用できます。タブのボタンマトリックスの高さは、フォントの高さと背景とボタンのスタイルのパディングから計算されます。

リストされているすべてのセクションは、一般的な背景スタイルのプロパティとパディングをサポートしています。
LV_TABVIEW_PART_TAB_BGには、LV_TABVIEW_PART_INDICと呼ばれる追加の実際の部分であるインジケーターがあります。これは、現在選択されているタブの下にある薄い長方形のようなオブジェクトです。タブビューが別のタブをアニメーション化するように設定されている場合、インジケーターもアニメーション化されます。一般的な背景スタイルのプロパティを使用してスタイルを設定できます。この寸法スタイルプロパティは、その厚さを設定します。新しいタブが追加されると、そのページが作成され、LV_TABVIEW_PART_BG_SCRLの新しいボタンがLV_TABVIEW_PART_TAB_BGボタンマトリックスに追加されます。作成されたページは通常のページとして使用でき、通常のページセクションがあります。

3.LVGLGUIスイッチコントロールの使用

1.タブを追加します（タブの追加）

この関数を使用してタブを追加しますlv_tabview_add_tab（tabview、 "タブ名"）

2. [変更]タブ（[変更]タブ）

新しいタブを選択するには、次のことができます。

ボタンマトリックスセクションをクリックしてください
滑り台
関数lv_tabview_set_tab_act（tabview、id、LV_ANIM_ON / OFF）を使用します

3.タブの名前を変更します

この関数を使用してタブの名前を変更しますlv_tabview_set_tab_name（tabview、id、name）

4.タブボタンの位置

この関数でタブ位置を設定しますlv_tabview_set_btns_pos（tabview、LV_TABVIEW_TAB_POS_TOP / BOTTOM / LEFT / RIGHT / NONE）

デフォルトでは、タブセレクタボタンはタブビューの上部にあります。LV_TABVIEW_TAB_POS_NONEはタブを非表示にします。
ラベルを追加した後は、ラベルの位置を上または下から左または右に変更できないことに注意してください。

5.アニメーション時間

この関数を使用して、タブを切り替えるための時間アニメーションを設定しますlv_tabview_set_anim_time（tabview、anim_time_ms）

6.スクロール伝播

タブのコンテンツオブジェクトはページであるため、他のページのようなオブジェクトからスクロール伝播を受け取ることができます。たとえば、タブのコンテンツにテキスト領域が作成され、テキスト領域がスクロールされても最後に到達した場合、スクロール
はコンテンツページに伝播できます。を使用して有効にできます。lv_page / textarea_set_scroll_propagation（obj、true）
デフォルトでは、タブのコンテンツページでスクロール伝播が有効になっているため、水平方向にスクロールすると、スクロールが
LV_TABVIEW_PART_BG_SCRLページに伝播されるため、ページがスクロールされます。を使用すると、手動スワイプを無効にできます。lv_page_set_scroll_propagation（tab_page、false）

7.イベント

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

LV_EVENT_VALUE_CHANGED タブボタンをスライドまたはクリックして新しいタブを選択すると送信されます

複合例を見てみましょう

void lvgl_tabview_test(void)
{
    /*Create a Tab view object*/
    lv_obj_t* tabview;
    tabview = lv_tabview_create(lv_scr_act(), NULL);

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Tab 1");
    lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "Tab 2");
    lv_obj_t* tab3 = lv_tabview_add_tab(tabview, "Tab 3");


    /*Add content to the tabs*/
    lv_obj_t* label = lv_label_create(tab1, NULL);
    lv_label_set_text(label, "This the first tab\n\n"
        "If the content\n"
        "of a tab\n"
        "become too long\n"
        "the it \n"
        "automatically\n"
        "become\n"
        "scrollable.");

    label = lv_label_create(tab2, NULL);
    lv_label_set_text(label, "Second tab");

    label = lv_label_create(tab3, NULL);
    lv_label_set_text(label, "Third tab");
}

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

組み込みGUILVGL「テーブルビュータブコントロール」の紹介