Corona SDK: Создаем выпадающий список активностей

Список, отображаемый в нижней части приложения, при нажатии полностью раскрывается.

Подготовка данных и интерфейс

Список выводит группированные активности. Урок состоит из трёх частей: подготовка данных, вывод в виде списка и отображение данных на экране при выборе пользователем.

В файле main.lua добавим переменные:

activityName: текст для отображения (например, «Ходьба 4 км/час»).
activityFactor: коэффициент активности (например, 3), используемый в расчёте калорий.
activityIndex: используется для прокрутки списка к выбранному пункту (например, 47).

В файле calc.lua, перед представлением объектов в sceneGroup, создадим группу:

local activityGroup = display.newGroup()

Создадим прямоугольник:

local activityRect = display.newRoundedRect( activityGroup, 0, 790, 200, 60, 15 )
activityRect:setFillColor( 0.76/255 )

Этот прямоугольник будет кнопкой для вызова списка. Создадим треугольник-индикатор с помощью display.newPolygon:

local activityTriangle = display.newPolygon( activityGroup, 500, 890, { 500, 452, 520, 452, 510, 466 } )
activityTriangle:setFillColor( 0.76/255 )

Добавим текст на прямоугольник:

local activityText = display.newText( activityGroup, activityName, 0, 790, native.systemFont, 22 )
activityText:setFillColor( 0.76/255 )
activityText:setReferencePoint( display.CenterReferencePoint )

Добавим обработчик событий для activityGroup:

activityGroup:addEventListener( "touch", function( event )
  if event.phase == "ended" then
    composer.showOverlay( "scenes/activity", { isModal = true, effect = "fade", time = 400 } )
  end
end )

Сцена списка (activity.lua)

Создадим файл activity.lua в папке scenes. Код можно получить здесь. Файл содержит данные для списка, включая категории и активности. Необходимо подключить библиотеки widget и файл data.lua (из папки scenes).

local composer = require( "composer" )
local widget = require( "widget" )
local scene = composer.newScene()
-- ... остальной код из файла activity.lua ...

Создадим прямоугольник-фон для всплывающего окна:

local backgroundRect = display.newRect( sceneGroup, 0, 0, display.contentWidth, display.contentHeight )
backgroundRect:setFillColor( 0.39/255, 0.46/255, 0.55/255, 0.8 )

Список с помощью widget.newTableView

Создадим activityList с помощью widget.newTableView:

local activityList = widget.newTableView( {
  x = 70,
  y = 40,
  width = 460,
  height = 850,
  onRowRender = onRowRender,
  onRowTouch = onRowTouch
} )
sceneGroup:insert( activityList )

Функции onRowRender и onRowTouch определены ниже. Добавим данные в список:

for i = 1, #activityData do
  local isCategory = (activityData[i].category == 1)
  -- ... (остальной код цикла) ...
end

В цикле проверяем категорию элемента и устанавливаем цвет. Добавляем ряд в activityList с помощью activityList:insertRow().

Функции onRowRender и onRowTouch

onRowRender отображает данные в строке списка:

function onRowRender( event )
  local row = event.row
  local rowId = event.row.id
  -- ... (код для отображения текста) ...
end

onRowTouch обрабатывает нажатие на строку:

function onRowTouch( event )
  if event.phase == "ended" then
    local row = event.target
    activityIndex = row.id
    -- ... (код для обновления данных и закрытия окна) ...
  end
end

В onRowTouch обновляем activityIndex, activityName и activityFactor, затем закрываем всплывающее окно с помощью composer.hideOverlay(). Изменим шрифт на native.systemFont. Добавим кнопку закрытия (файл close.png, доступен здесь). Обработчик нажатия на кнопку аналогичен обработчику для composer.hideOverlay().

Создан функциональный список во всплывающем окне (отдельная сцена). Это обеспечивает удобство и гибкость в дизайне.