Layout

Layout with composer

• controller/ApplicationUI.lua

  function M.create(scene, model)
  local UI = {}
      UI.scene            = scene
      UI.sceneGroup       = display.newGroup()

• controller/scene.lua

  M.new = function(sceneName, model)
      -- sceneName is like App.book01.scenes.page01.index
      local parent = sceneName:match("(.-)[^%.]+$")
      local scene = composer.newScene(sceneName)
  
      function scene:create(event)
          self.UI.sceneGroup.x = display.contentCenterX
          self.UI.sceneGroup.y = display.contentCenterY
          self.UI.sceneGroup.anchorX = .5
          self.UI.sceneGroup.anchorY = .5
          self.view:insert(self.UI.sceneGroup)
      ...
      ...
      --
      -- orientation
      --
      local ratio = display.contentCenterX/display.contentCenterY
      local function onOrientationChange (event)
        if scene.view then
          local sceneGroup = scene.UI.sceneGroup
          local currentOrientation = event.type
          local ratio = 480/320
          local reverse = 320/480
  
          sceneGroup.x, sceneGroup.y = display.contentCenterX, display.contentCenterY
  
          if event.type =="portrait" and event.delta == -90  then
            sceneGroup:scale(ratio, ratio)
          elseif event.type =="portraitUpsideDown" and event.delta == -90  then
            sceneGroup:scale(ratio, ratio)
          ...
          ...

• components/kwik/layer_image.lua

  function M:createImage(UI)
    local sceneGroup = UI.sceneGroup
    local obj = display.newImageRect(
      UI.props.imgDir..self.imagePath,
      UI.props.systemDir,
      self.imageWidth,
      self.imageHeight)
    ...
    ...
    sceneGroup:insert( obj)