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 місяця

Також варто подивитися