Slide Menu

以下のリンクからサンプルのプロジェクトをダウンロードできます.

プロジェクトフォルダーのrootから探すと,slideMenu_menuBtn.lua, slideMenu_ini.lua と slideMenu_show.lua があることが確認できると思います.これらのファイルをKwik PanelのProject And Pagesから読み込みます.

slideMenu.luaとmatrialuiのモジュールウィジェットはbuild4/libフォルダーに配置されています.

slideMenu_menuBtn.luaとslideMenu.lua は pageNum と menu buttons のプロパティーを構成する必要があります.

slideMenu_menuBtn.lua main set pageNum
slideMenu_init.lua page3 Before layers
slideMenu_show.lua page3 After buttons and actions
build4/lib/slideMenu.lua set pageNum, add buttons in list table

slide menuを他のプロジェクトで使用したい時は,これらのファイルをコピーして同じ場所にペーストし,pageNum と menu button のプロパティーを編集する必要があります.

├─build4
│  ├─lib
│    ├─icon-font
│    └─materialui
|     slideMenu_init.lua
|     
└─
    slideMenu_init.lua
    slideMenu_menuBtn.lua
    slideMenu_show.lua

slideMenu_menuBtn.lua

page3.psdの中に,menuBtnのヘッダーイメージとslide menuのアイコンがあります.

  • pageNum
local pageNum  = 3
local composer = require("composer")
--
local UI = {
    scene ={view = display.newGroup()},
    layer = {}
}

local headerImage = require("components.page0"..pageNum.."headerImage_image_")
headerImage:localPos(UI)

local menuBtn = require("components.page0"..pageNum..".menuBtn_image_")
menuBtn:localPos(UI)
UI.layer.menuBtn:addEventListener("tap", function(e)
    composer.showOverlay("views.page0"..pageNum.."Scene")
end )

上のコードによって登録操作などと一緒にslideMenuをロードします.slide menuのコンテキストが読み込まれます.

page3 actions

それぞれのmenuボタンのアクションの名前は act_icon0{Num}と付ける必要があります.これによってslideMenu.luaのhideSlidePanel関数を呼び出されます.

slideMenu_init.lua

local slideMenu = require("lib.slideMenu")
slideMenu.init(UI)

slideMenu_show.lua

local slideMenu = require("lib.slideMenu")
slideMenu.showSlidePanel()

Project And Pages > Add Main.lua External Code

  • slideMenu.lua

Project And Pages > Add External Code

  • slideMenu_init.lua
  • Before layers

Project And Pages > Add External Code

  • slideMenu_show.lua
  • After butons and actions


build4/lib

以下に列挙したファイルがbulid4/libフォルダーにあることが確認できると思います.slideMenu.luaのpageNumとmenu buttonsのリストを編集する必要があります.

  • sideMenu.lua
  • icon-font/
  • materialui/

slideMenu.lua - hideSlidePanel()

local hideSlidePanel = function(event)
    UI.scene:dispatchEvent({name = "action_act_icon0"..event.value})
    mui.hideSlidePanel("slidepanel-demo")
end

action_act_icon0..event.value はpage3のアクションのうちの一つです.act_icon0{Num}を作成しない,もしくはmenu buttoがタップされた時のコードを変更したいと思わない限り,hideSlidePanel関数を変更する必要はありません.

http://kwiksher.com/doc/tutorials/kwik/programming/migrating_from_kwik3.html

newSlidePanel widgetのinit関数を編集する必要があります.以下のコードをご覧ください

init()

slide menuを構成する以下のパラメータを編集してください.

  • title
  • titleFontColor
  • headerImage
  • labelColor
  • labelColorOff
  • list

    • key
    • value
    • icon
    • iconImage
    • labelText
    • isActive
    • callBackData
  • headerImageはphotoshopのslide menu pageのheaderImageレイヤーを参照しています.

  • それぞれの menu button のプロパティーをlistに追加してください.それぞれのボタンはアイコンとラベルテキストによって構成されています.value はボタンのインデックスナンバーで,必ず1から始まり一つずつ増加させる必要があります.

例えば,1st button の value は "1" で,labelText は "Home",iconImage は "icon01.png"と設定します

            list = {
                {
                    key       = "Home",
                    value     = "1",
                    icon      ="home",
                    iconImage ="assets/images/p"..pageNum.."/icon01.png",
                    labelText ="Home",
                    isActive  = true,
                    callBack  = hideSlidePanel, callBackData = { item="home"}
                },
  • もし,iconImageパラメータを省略すると,widgetがlib/icon-fontからアイコンを探します.例えば,AboutUSはicon-font/MaterialIcons-Regular.ttfのアイコンを使用します.
local pageNum = 3
--
M.init = function(_UI)
    UI = _UI
    mui.init(nil, { parent=_UI.scene.view })
    if mui.getWidgetBaseObject("slidepanel-demo") ~= nil then
        mui.showSlidePanel("slidepanel-demo")
        mui.debug("slidePanel exists, show it")
    else
        mui.debug("slidePanel is new")
        mui.newSlidePanel({
            parent                    = mui.getParent(),
            name                      = "slidepanel-demo",
            title                     = "MUI Demo", -- leave blank for no panel title text
            titleAlign                = "center",
            font                      = native.systemFont,
            width                     = mui.getScaleVal(400),
            titleFontSize             = mui.getScaleVal(30),
            titleFontColor            = { 1, 1, 1, 1 },
            titleFont                 = native.systemFont,
            titleBackgroundColor      = { 0.25, 0.75, 1, 1 },
            fontSize                  = mui.getScaleVal(20),
            fillColor                 = { 0, 0, 0, 0.01 }, -- background color
            headerImage               = "assets/images/p"..pageNum.."/headerImage.png",
            buttonToAnimate           = nil,
            callBack                  = mui.actionForSlidePanel,
            callBackData              = { item  = "cake" },
            labelColor                = { 1, 1, 1, 1 }, -- active
            labelColorOff             = { 0.5, 0.5, 0.5, 1 }, -- non-active
            buttonHeight              = mui.getScaleVal(60),
            buttonHighlightColor      = { 0.5, 0.5, 0.5 },
            buttonHighlightColorAlpha = 0.5,
            lineSeparatorHeight       = mui.getScaleVal(1),
            list = {
                {
                    key       = "Home",
                    value     = "1",
                    icon      ="home",
                    iconImage ="assets/images/p"..pageNum.."/icon01.png",
                    labelText ="Home",
                    isActive  = true,
                    callBack  = hideSlidePanel, callBackData = { item="home"}
                },
                {
                    key       = "Newsroom",
                    value     = "2",
                    icon      ="news",
                    iconImage ="assets/images/p"..pageNum.."/icon02.png",
                    labelText ="News",
                    isActive  = true ,
                    callBack  = hideSlidePanel, callBackData = { item="newsroom"}
                },
                {
                    key       = "AboutUS",
                    value     = "3",
                    icon      ="copyright",
                    labelText ="About Us",
                    isActive  = true,
                    iconColor = { 1, 1, 1, 1 }, iconColorOff = { 0.5, 0.5, 0.5, 1 },
                    callBack  = hideSlidePanel, callBackData = { item="aboutus"}
                },
            },
            isVisible = false, -- do show immediately
        })
        mui.setBackgroundImage("slidepanel-demo", "assets/images/p"..pageNum.."/panel.png")
    end
    -- add some buttons to the menu!
end

background

fillColorの透明度(transparency)を0.01とし,画像をsetBackgroundImage関数に渡します.

  • fillColor = { 0, 0, 0, 0.01 }, -- background color
  • mui.setBackgroundImage("slidepanel-demo", "assets/images/p"..pageNum.."/panel.png")

もしpanel.pngを使わない場合,関数の行を削除し,好きなfillColorを設定してください.

UIの材料

lib/materialui/mui-slidepanel.luaはオリジナルのものからカスタマイズされています.

material.ioのサイトから,アイコンをプレビューすることができます.


License

https://github.com/arcadefx/material-ui

    The MIT License (MIT)

    Copyright (C) 2016 Anedix Technologies, Inc.  All Rights Reserved.

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    For other software and binaries included in this module see their licenses.
    The license and the software must remain in full when copying or distributing.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.

results matching ""

    No results matching ""