スライドメニュー表示をしたい

スライドメニュー

１

スライドメニュー表示をしたい

１

SlideMenuクラス（スライドメニューを操作するクラス）とSlideMenuContentクラス（スライドメニューの内容を表示するクラス）を使用することで、スライドメニューを作成することができます。
SlideMenuContentは、通常のFormと同様に独立したCRSファイルとして作成しておくことが可能です。

サンプル（SlideMenu.crs）を起動後、画面左上の「≡」ボタンを押下するか、右方向にフリック操作を行うとスライドメニューが表示されます。
スライドメニュー左上の「←」ボタンを押下するか、左方向にフリック操作を行うとスライドメニューが閉じられます。

[実行イメージ]

[ SlideMenu.crs ]

Form SlideMenu {
  Width = 432;
  Height = 960;
  BgColor = $WHITE;
  UseGesture = $True;
  
  /* スライドメニュー */
  SlideMenu sm;
  
  Function OnGesture(e){
    /* 右方向のフリックでスライドメニュー表示 */
    if( e.action == $FLICK && e.direction == 3 ){
      sm.Open();
    }
  }
  
  FlexView FlexView1 {
    X = 27;
    Y = 194;
    Width = 369;
    Height = 735;
    FlexRecord FlexRecord1;
  }
  Label Label1 {
    X = 31;
    Y = 66;
    Width = 143;
    Height = 34;
    BgColor = $STD;
    Value = "項目１";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    BorderColor = $333399;
    Border = $TRUE;
    BorderStyle = $SOFT;
    CornerRadius = 2;
  }
  Label Label2 {
    X = 31;
    Y = 104;
    Width = 143;
    Height = 34;
    BgColor = $STD;
    Value = "項目２";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    BorderColor = $333399;
    Border = $TRUE;
    BorderStyle = $SOFT;
    CornerRadius = 2;
  }
  TextBox TextBox1 {
    X = 177;
    Y = 66;
    Width = 203;
    Height = 34;
    BorderColor = $333399;
  }
  TextBox TextBox2 {
    X = 177;
    Y = 104;
    Width = 203;
    Height = 34;
    BorderColor = $333399;
  }
  Button Button1 {
    X = 267;
    Y = 150;
    Width = 129;
    Height = 39;
    Title = "検索";
    CornerRadius = 2;
  }
  ImageButton Button2 {
    X = 7;
    Y = 8;
    Width = 40;
    Height = 40;
    BgColor = $White;
    ButtonStyle = $SURFACE;
    Resize = $FREE;
    title = "≡";
    FontSize = 18;
    HorizontalAlign = $CENTER;
    VerticalAlign = $CENTER;
    CornerRadius  =10;
    FgColor = $000066;
    FontFace = $BOLD;
    
    Function onTouch(e){
      /* スライドメニューをOpenする */
      ^.sm.Open();
    }
  }
  
  if ( !$DESIGNTIME ) {
    Width &= //.Width;
    Height &= //.Height;
    HorizontalScale &= Width / 432;
    VerticalScale &= Height / 960;
    
    /* SlideMenuオブジェクトの下位にSlideMenuContentをGETする */
    sm.Get("SlideMenuContent.crs");
    /* SlideMenuContentオブジェクトに、Close処理実行時用のSlideMenuオブジェクトを引き渡す */
    sm.smc.init( sm );

    /* タイトルバーを非表示にする */
    //.ShowMenu(Root.TitleBar);
  }
}

[ SlideMenuContent.crs ]

SlideMenuContent smc {
  Width = 200;
  Height = 960;
  BgColor = $333333;
  BorderColor = $000033;
  
  Array smObj;
  
  ImageButton Button2 {
    X = 7;
    Y = 8;
    Width = 40;
    Height = 40;
    BgColor = $333333;
    ButtonStyle = $SURFACE;
    Resize = $FREE;
    title = "←";
    FontSize = 18;
    HorizontalAlign = $CENTER;
    VerticalAlign = $CENTER;
    CornerRadius  =10;
    FgColor = $WHITE;
    FontFace = $BOLD;
    
    Function onTouch(e){
      /* スライドメニューを閉じる */
      ^.smObj[0].Close();
    }
  }
  
  Label Label1 {
    X = 0;
    Y = 53;
    Width = 200;
    Height = 41;
    BgColor = $666666;
    FgColor = $CCCCCC;
    Value = "動作";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    FontSize = 12;
  }
  ImageButton ImageButton1 {
    X = 1;
    Y = 94;
    Width = 199;
    Height = 45;
    ButtonStyle = $SURFACE;
    BgColor = $333333;
    Title = "　ホーム";
    FgColor = $CCCCCC;
    HorizontalAlign = $LEFT;
    FontSize = 12;
  }
  Label Label2 {
    X = 0;
    Y = 139;
    Width = 200;
    Height = 41;
    BgColor = $666666;
    FgColor = $CCCCCC;
    Value = "設定";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    FontSize = 12;
  }
  ImageButton ImageButton2[3] {
    X = 1;
    Y = 180;
    Width = 199;
    Height = 45;
    ButtonStyle = $SURFACE;
    BgColor = $333333;
    Title = "";
    FgColor = $CCCCCC;
    HorizontalAlign = $LEFT;
    FontSize = 12;
  }
  ImageButton2[0].Title = "　キャッシュ設定";
  ImageButton2[1].Title = "　スケーリング設定";
  ImageButton2[2].Title = "　プリンタ設定";
  
  
  Label Label3 {
    X = 0;
    Y = 315;
    Width = 200;
    Height = 41;
    BgColor = $666666;
    FgColor = $CCCCCC;
    Value = "情報";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    FontSize = 12;
  }
  ImageButton ImageButton3[2] {
    X = 1;
    Y = 356;
    Width = 199;
    Height = 45;
    ButtonStyle = $SURFACE;
    BgColor = $333333;
    Title = "";
    FgColor = $CCCCCC;
    HorizontalAlign = $LEFT;
    FontSize = 12;
  }
  ImageButton3[0].Title = "　接続ライセンス情報";
  ImageButton3[1].Title = "　バージョン情報";
  
  
  Label Label4 {
    X = 0;
    Y = 445;
    Width = 200;
    Height = 41;
    BgColor = $666666;
    FgColor = $CCCCCC;
    Value = "その他";
    VerticalAlign = $CENTER;
    Format = "\"　\"@";
    FontSize = 12;
  }
  ImageButton ImageButton4 {
    X = 1;
    Y = 486;
    Width = 199;
    Height = 45;
    ButtonStyle = $SURFACE;
    BgColor = $333333;
    Title = "終了";
    FgColor = $CCCCCC;
    HorizontalAlign = $LEFT;
    FontSize = 12;
  }
  
  /* スライドメニューを閉じるためのSlideMenuオブジェクトを受け取る */
  Function init( _sm ){
    smObj[0] = _sm;
  }
}

管理番号：SmcHt_001


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser HT・Biz/Browser SmartDevice・Biz/Browser AI TIPS集トップへ