Overlaying UI Simply

You can overlay buttons or icons of a page to other pages with the external code that you can find in the following sample project

• https://kwiksher.com/tutorials/Kwik4/OverlaySimple.zip

  in the ext folder you find these lua files

  • overlay_button_next.lua
  • overlay_button_prev.lua
  • overlay_show.lua
  

the project consists of 4 pages

• page1
• page2
• page3
• overlay page

overlay page

the buttons to go to next or previous page needs the external code lua.

• rightBtn
• leftBtn

each button loads the following external code. Notice if the current page is page1 or page3, it should not go beyond it.

• overlay_button_prev.lua

• overlay_button_next.lua

  local _AC           = require("commands.kwik.actionCommand")
  local nextPage = _K.curPage < 3 and _K.curPage + 1 or _K.curPage
  _AC.Page:gotoPage(nextPage, "slideRight", 300, 0);
  

  

page1, page2, page3

then add the overlay_show.lua for each page’s external code

local composer = require("composer")

_K.curPage = UI.curPage
_K.curUI = UI
composer.showOverlay("views.page04Scene") -- overlay page

That’s all

Publish and check it with Solar2D simulator.

Reference

• https://docs.coronalabs.com/api/library/composer/showOverlay.html
• https://kwiksher.com/doc/kwik_tutorial/page_controls/slide_menu/