メイン･コンテンツまでスキップ

Slide Menu（スライド･メニュー）

TouchGFXのSlide Menuは、1つの内部Container、1つのImage、およびオプションで1つのButtonで構成されるContainerの特殊形態で、折りたたみ状態と展開状態の間の動きをアニメーション化できます。

シミュレータで実行されるSlide Menu

ウィジェット･グループ​

Slide Menuは、TouchGFX DesignerのContainersウィジェット･グループ内にあります。

TouchGFX DesignerのSlide Menu

プロパティ​

次のセクションでは、Slide Menuのプロパティについて説明します。

プロパティ･グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。
Slide Menuのサイズは背景とボタンの画像のサイズによって決まります。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。

Visibleは、ウィジェットの可視性を指定します。
ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
Expanding DirectionExpanding Directionは、Slide Menuを展開する方向を指定します。
StateStateは、Slide Menuの初期状態（折りたたみまたは展開）を指定します。

Collapsed: Visible Pixelsは、折りたたまれたときに表示されるピクセルを指定します。

Expanded: Hidden Pixelsは、展開されたときに非表示にするピクセルを指定します。

Expanded Timeoutは、展開された状態から自動的に折りたたまれた状態に戻るまでの時間を指定します。
BackgroundBackground Imageは、背景と使用する画像を指定します。

Background Locationは、 ウィジェットの座標を基準にした背景画像のx、y座標を指定します。
ButtonUse Buttonは、ウィジェットの状態を制御するためにボタンを使用するかどうかを指定します。

Released Imageは、ボタンがリリースされた状態のときに使用する画像を指定します。

Pressed Imageは、ボタンが押された状態のときに使用する画像を指定します。

Button Locationは、 ウィジェットの座標に対するボタンのx、y座標を指定します。
AnimationEasingおよびEasing Optionは、アニメーションに使用するイージング式（動きに緩急をつける）を指定します。

Durationは、アニメーションにかかる時間を指定します。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。

MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

インタラクション​

以下のセクションでは、Slide Menuによってサポートされるアクションとトリガについて説明します。

アクション​

ウィジェット固有のアクション説明
Change State of Slide MenuSlide Menuの状態を、折りたたみ状態または展開状態に変更します。
Reset Timer of Slide MenuSlide Menuの状態を、自動的に折りたたみに戻すためのタイマをリセットします。
標準のウィジェット･アクション説明
Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ​

トリガ説明
Slide Menu animation ended1つの状態から別の状態へのSlide Menuのアニメーションが終了しました。
Slide Menu state changedSlide Menuの状態が変更されました。

パフォーマンス​

Slide MenuはContainerタイプで、デフォルトでは描画チェーンに表示されません。 このため、パフォーマンスは主に子の描画パフォーマンスに依存します。

描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例​

生成済みコード​

ビューの基底クラスの生成済みコードを見ると、TouchGFX DesignerによるSlide Menuの設定方法がわかります。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"

Screen1ViewBase::Screen1ViewBase()
{
    slideMenuName.setup(touchgfx::SlideMenu::EAST,
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BACKGROUND_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        0, 0, 49, 111);
    slideMenuName.setState(touchgfx::SlideMenu::COLLAPSED);
    slideMenuName.setVisiblePixelsWhenCollapsed(24);
    slideMenuName.setHiddenPixelsWhenExpanded(0);
    slideMenuName.setAnimationEasingEquation(touchgfx::EasingEquations::circEaseInOut);
    slideMenuName.setAnimationDuration(18);
    slideMenuName.setExpandedStateTimeout(180);
    slideMenuName.setXY(0, 0);

    add(slideMenuName);
}
Tip
ユーザ･コードでは、これらの関数や、SlideMenuクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 Slide MenuName.invalidate() を呼び出して、再描画を行う必要があることを忘れないでください。

TouchGFX Designerの例​

Slide Menuをさらに探索するには、次のUIテンプレートを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのSlide Menu Example UIテンプレート

API参照​

Further reading
  • SlideMenuクラスのAPI参照