Overlaying UI on Every Other Page

これらのサンプルはpage1のUIを他のページで再利用しています.2つのサンプルプロジェクトが入手可能です.ここではOverlay projectについて説明します.

Luaプログラミングの知識が若干必要です。

page01/*.luaをcustom folderにコピー

Overlay projectのpage1の要素が他のページでも再利用します。page1のluaファイルとして、以下のファイルがパブリッシュされています。

  • commands/page01/*.lua
  • components/page01/*.lua
  • components/page01UI.lua
  • contexts/page01Context.lua
  • mediators/page01Mediators.lua

これらのbuild4に含まれているluaファイルを、build4/custom フォルダーにコピー&ペーストすることで、他のページでも再利用できるようになります.

それでは、context switchingをカストマイズしてみましょう。

tmplt/contexts/ApplicationContext.luaの変更

page01Contextsはcustom folderからpage01UIを読み込みます。また、custom.commandsを再読み込みさせます。

  • tmplt/contexts/ApplicationContext.lua
  local page01Context = require("custom.contexts.page01Context")

build4/custom/ファイルの変更

contexts/page01Context.lua

Before

  self:mapMediator("views.page01Scene", "mediators.page01Mediator")
  self:mapCommand("page01.action_act_hide_all", "commands.page01.action_act_hide_all")
  ...

After custom. が追加された後

  self:mapMediator("views.page01Scene", "custom.mediators.page01Mediator")
  self:mapCommand("page01.action_act_hide_all", "custom.commands.page01.action_act_hide_all")
  ...

tmplt/components/pageXXXUI.luaの変更

他のページを覆うoverlayを作成するために,page01UIのfunctionsをpageXXXUI.luaに追加します.

  _Class.new = function(scene)
    ...
    -- Reuse custom.page01UI for overlay
    local page01UI = nil
    if UI.curPage ~= 1 then
      page01UI = require("custom.components.page01UI").new(scene)
      page01UI.curPage = {{page}}
      UI = setmetatable( UI, {__index=page01UI})
      UI.layer = setmetatable( UI.layer, {__index=page01UI.layer})
    end
    ...
 function UI:setLanguge()
    ...
    if page01UI then  page01UI:setLanguge() end
  end
  --
  function UI:setVars()
    ...
    if page01UI then  page01UI:setVars() end
  end
  --
  function UI:create()
    ...
    if page01UI then  page01UI:create() end
  end
  --
  function UI:didShow(params)
    ...
    if page01UI then page01UI:didShow(params) end
  end
  --
  function UI:didHide(params)
    ...
    if page01UI then page01UI:didHide(params) end
  end
  --
  function UI:destroy(params)
    ...
    if page01UI then page01UI:destroy(params) end
  end

custom/components/page01UI.luaの変更

  • それぞれの要素はcustomフォルダーから読み込まれる必要があります.そのために3番目のパラメータをtrueにする必要があります.

Before

  function UI:create()
    self:_create("common",  const.page_common, false)
  ...
  end
  --
  function UI:didShow(params)
    self:_didShow("common",  const.page_common, false)
  ...
  end
  --
  function UI:didHide(params)
    self:_didHide("common",  const.page_common, false)
  ...
  end
  --
  function UI:destroy(params)
    self:_destroy("common",  const.page_common, false)
  ...
  end

After

  function UI:create()
    self:_create("common",  const.page_common, true)
  ...
  end
  --
  function UI:didShow(params)
    self:_didShow("common",  const.page_common, true)
  ...
  end
  --
  function UI:didHide(params)
    self:_didHide("common",  const.page_common, true)
  ...
  end
  --
  function UI:destroy(params)
    self:_destroy("common",  const.page_common, true)
  ...
  end

Disable preload in page01/page_common.lua

50行目のpreloadsを無効にします

       -- Preloads next scene. Must be off to use page curl
       -- if not _K.exportCurrent then
       -- _K.timerStash.timer_pl = timer.performWithDelay( 5000, function()
       --    composer.loadScene( "views.page02Scene")
       -- end)
       -- end

custom folderのその他のファイルについて

UI.curPage を探してそれぞれを"01"に置き換えます

Before
```lua
_AC.Action:playAction("page"..UI.curPage..".action_act_hide_all", params)
```

After
```lua
_AC.Action:playAction("page".."01".."action_act_hide_all", params)
```

これによって、例えば、page02からactionが呼ばれた時,page01のactionが呼ばれます.

  • pageNum_text.lua

    • elFontSize は 100
    • text="0"..UI.curePage
      local elFontSize = 100
      ...
      --
      function _M:localPos(UI)
        local pageNum_options = { text = "0"..UI.curPage, x = mX, y = mY, fontSize = elFontSize,
      
  • 他のページについては,Layer_1_image.luaの背景画像を無効にします. curPage=1 の時のみ、背景が表示されます.

    function _M:localPos(UI)
     ...
     if UI.curPage == 1 then
         layer.Layer_1 = display.newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)
       ...
     end
    end
    

以上

results matching ""

    No results matching ""