Corona SDK: Добавление изображений в мобильное приложение

Урок посвящен работе с изображениями в приложениях Corona SDK и добавлению их на экран.

Добавление изображений

В Corona SDK изображения добавляются с помощью двух методов: display.newImageRect и display.newImage. display.newImageRect позволяет изменять размер изображения, включая изменение пропорций. В этом уроке используется display.newImage, так как изменение размера изображений не требуется. Для изменения размера используйте display.newImageRect. Дополнительная информация доступна в документации (ссылка будет предоставлена).

Подготовка проекта

Необходимы четыре изображения: по два для отображения выбранного и невыбранного женского и мужского пола. Изображения можно скачать с сайта [ссылка на сайт] (ссылка будет предоставлена). Добавьте их в папку img проекта.

Реализация интерфейса

Создадим переменные и группы объектов:

-- Переменная для выбранного пола
local sex = "мужской" -- По умолчанию выбран мужской пол

-- Группа для элементов управления полом
local sexGroup = display.newGroup()

-- Фон для картинок и текста
local bgRect = display.newRoundedRect( 0, 680, w - 20, 80, 10 )
bgRect.x = display.contentCenterX
bgRect.fill = { 244/255, 244/255, 244/255 } -- Практически белый цвет
sexGroup:insert( bgRect )

-- Текст "Укажите пол"
local txtSexLabel = display.newText( "Укажите пол", 105, 660, native.systemFont, 24 )
sexGroup:insert( txtSexLabel )

-- Текст для выбранного пола
local txtSex = display.newText( sex, 105, 700, native.systemFont, 18 )
txtSex.fill = { 76/255, 76/255, 76/255 } -- Серый цвет
sexGroup:insert( txtSex )

Добавим изображения:

-- Переменные для изображений
local maleOn = display.newImage( sexGroup, "img/male_active.png", 300, 680 )
local maleOff = display.newImage( sexGroup, "img/male.png", 300, 680 )
local femaleOn = display.newImage( sexGroup, "img/female_active.png", 440, 680 )
local femaleOff = display.newImage( sexGroup, "img/female.png", 440, 680 )

-- Начальная видимость изображений
maleOff.isVisible = false
femaleOn.isVisible = false

Обработка событий

Добавим обработчики событий нажатия:

maleOff:addEventListener( "touch", selectMale )
femaleOn:addEventListener( "touch", selectFemale )

-- Выбор мужского пола
local function selectMale( event )
  if ( event.phase == "began" ) then
    sex = "мужской"
    txtSex.text = sex
    maleOn.isVisible = true
    maleOff.isVisible = false
    femaleOn.isVisible = false
    femaleOff.isVisible = true
    return true
  end
end

-- Выбор женского пола
local function selectFemale( event )
  if ( event.phase == "began" ) then
    sex = "женский"
    txtSex.text = sex
    maleOn.isVisible = false
    maleOff.isVisible = true
    femaleOn.isVisible = true
    femaleOff.isVisible = false
    return true
  end
end

Урок показал добавление и управление изображениями в Corona SDK, создав простой интерфейс выбора пола с использованием изображений и обработки событий. Это демонстрирует базовые принципы работы с изображениями и обработчиками событий в Corona SDK.