itProger Видеокурсы Мобильное приложение на Corona SDK #11 - Работа со сценами и добавление полей

#11 - Работа со сценами и добавление полей

Сцены отвечают за разные экраны в приложении. В ходе урока мы научимся работать с библиотекой composer, а также научимся создавать и переходить между сценами.

Видеоурок

Сцены позволяют разделить приложение на различные экраны. Код таким образом распределяется на несколько файлов и выглядит чище и читабельнее.

В нашем приложение будет создана структура из нескольких сцен, которая схематически будет выглядеть так:

Через главный файл мы будем вызывать основную сцену приложения - calc.lua. Через неё будут вызываться две другие: вывод результатов и выбор активности.

Для работы со сценами необходимо использовать библиотеку «composer». После её подключения вы можете создавать сцены, переходить между ними, а также вызывать сцены во всплывающих окнах.

Материалы для курса

corona_app_scenes.zip

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Слайдер для возраста

-- Возраст
------------------------------------------------------------------
local ageGroup = display.newGroup()

display.newCircle(ageGroup, display.contentCenterX, 374, 60):setFillColor(244/255)

display.newRoundedRect(ageGroup, display.contentCenterX, 410, w, 100, 15):setFillColor(244/255)

display.newText(ageGroup, "Укажите возраст", display.contentCenterX, 390, "Obelix", 22)

local myAge = display.newText({
  parent = ageGroup,
  fontSize = 50,
  text = age,
  x = display.contentCenterX,
  y = 343,
  font = "SuezOne",
})

myAge:setFillColor(186 / 255, 98 / 255, 98 / 255)

ageSlider = widget.newSlider {
  sheet = graphics.newImageSheet("img/slider.png", optionSlider),
  leftFrame = 1,
  middleFrame = 2,
  rightFrame = 3,
  fillFrame = 4,
  handleFrame = 5,
  frameWidth = 15,
  frameHeight = 45,
  handleWidht = 45,
  handleHeight = 45,
  top = 405,
  left = 91,
  width = 360,
  height = 47,
  orientation = "horizontal",
  value = 100 * (age - ageMin) / (ageMax - ageMin),
  listener = function(event)
      age = math.round(ageMin + (ageMax - ageMin) * event.value / 100)
      myAge.text = age
  end
}

ageGroup:insert(ageSlider)

ageMinusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 19, top = 390,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "-",

  onPress = function(event)
      if (age > ageMin) then
          age = age - 1
          myAge.text = age
          ageSlider:setValue(100 * (age - ageMin) / (ageMax - ageMin))
      end
  end
}

agePlusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 462, top = 390,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "+",

  onPress = function(event)
      if (age < ageMax) then
          age = age + 1
          myAge.text = age
          ageSlider:setValue(100 * (age - ageMin) / (ageMax - ageMin))
      end
  end
}

ageGroup:insert(ageMinusButton)
ageGroup:insert(agePlusButton)

Слайдер для роста

-- Рост
------------------------------------------------------------------
local heightGroup = display.newGroup()

display.newCircle(heightGroup, display.contentCenterX, 224, 60):setFillColor(244/255)

display.newRoundedRect(heightGroup, display.contentCenterX, 260, w, 100, 15):setFillColor(244/255)

display.newText(heightGroup, "Укажите рост в см", display.contentCenterX, 240, "Obelix", 22)

local myHeight = display.newText({
  parent = heightGroup,
  fontSize = 50,
  text = height,
  x = display.contentCenterX,
  y = 193,
  font = "SuezOne",
})

myHeight:setFillColor(186 / 255, 98 / 255, 98 / 255)

heightSlider = widget.newSlider {
  sheet = graphics.newImageSheet("img/slider.png", optionSlider),
  leftFrame = 1,
  middleFrame = 2,
  rightFrame = 3,
  fillFrame = 4,
  handleFrame = 5,
  frameWidth = 15,
  frameHeight = 45,
  handleWidht = 45,
  handleHeight = 45,
  top = 250,
  left = 91,
  width = 360,
  height = 47,
  orientation = "horizontal",
  value = 100 * (height - heightMin) / (heightMax - heightMin),
  listener = function(event)
      height = math.round(heightMin + (heightMax - heightMin) * event.value / 100)
      myHeight.text = height
  end
}

heightGroup:insert(heightSlider)

heightMinusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 19, top = 240,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "-",

  onPress = function(event)
      if (height > heightMin) then
          height = height - 1
          myHeight.text = height
          heightSlider:setValue(100 * (height - heightMin) / (heightMax - heightMin))
      end
  end
}

heightPlusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 462, top = 240,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "+",

  onPress = function(event)
      if (height < heightMax) then
          height = height + 1
          myHeight.text = height
          heightSlider:setValue(100 * (height - heightMin) / (heightMax - heightMin))
      end
  end
}

heightGroup:insert(heightMinusButton)
heightGroup:insert(heightPlusButton)

Слайдер для времени

-- Время
------------------------------------------------------------------
local timeGroup = display.newGroup()

display.newCircle(timeGroup, display.contentCenterX, 524, 60):setFillColor(244/255)

display.newRoundedRect(timeGroup, display.contentCenterX, 560, w, 100, 15):setFillColor(244/255)

display.newText(timeGroup, "Укажите время в минутах", display.contentCenterX, 540, "Obelix", 22)

local myTime = display.newText({
  parent = timeGroup,
  fontSize = 50,
  text = time,
  x = display.contentCenterX,
  y = 493,
  font = "SuezOne",
})

myTime:setFillColor(186 / 255, 98 / 255, 98 / 255)

timeSlider = widget.newSlider {
  sheet = graphics.newImageSheet("img/slider.png", optionSlider),
  leftFrame = 1,
  middleFrame = 2,
  rightFrame = 3,
  fillFrame = 4,
  handleFrame = 5,
  frameWidth = 15,
  frameHeight = 45,
  handleWidht = 45,
  handleHeight = 45,
  top = 550,
  left = 91,
  width = 360,
  height = 47,
  orientation = "horizontal",
  value = 100 * (time - timeMin) / (timeMax - timeMin),
  listener = function(event)
      time = math.round(timeMin + (timeMax - timeMin) * event.value / 100)
      myTime.text = time
  end
}

timeGroup:insert(timeSlider)

timeMinusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 19, top = 540,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "-",

  onPress = function(event)
      if (time > timeMin) then
          time = time - 1
          myTime.text = time
          timeSlider:setValue(100 * (time - timeMin) / (timeMax - timeMin))
      end
  end
}

timePlusButton = widget.newButton {
  shape = 'roundedRect',
  radius = 5,
  width = 50, height = 50,
  left = 462, top = 540,
  fontSize = 40,
  fillColor = { default={ 76 / 255 }, over={ 150 / 255 } },
  labelColor = { default={ 1 }, over={ 0 } },
  label = "+",

  onPress = function(event)
      if (time < timeMax) then
          time = time + 1
          myTime.text = time
          timeSlider:setValue(100 * (time - timeMin) / (timeMax - timeMin))
      end
  end
}

timeGroup:insert(timeMinusButton)
timeGroup:insert(timePlusButton)

Посмотреть остальной код можно после подписки на проект!

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Corona SDK

Андроид

iOS