Corona SDK: Кнопки ‘+’ и ‘-‘ для слайдера веса

Добавление кнопок для управления весом

В текущей версии приложения используется слайдер для выбора веса пользователя. На небольших устройствах выбор точного значения (например, 59) с помощью слайдера неудобен. Для более точной и быстрой регулировки добавим кнопки «+» и «-». Нажатие на «-» уменьшит значение слайдера и отображаемый вес на 1, а нажатие на «+» — увеличит.

Необходимые компоненты

Для создания кнопок используется библиотека widget. Она предполагается подключенной в проекте. Метод widget.newButton принимает множество параметров, описанных в [официальной документации](ссылка в описании). В качестве основы кнопки используем roundrect (прямоугольник со скругленными углами).

Реализация кнопок

Создадим переменные weightMinusButton и weightPlusButton для хранения объектов кнопок:

weightMinusButton = widget.newButton{
    shape = "roundrect",
    radius = 15,
    width = 60,
    height = 60,
    x = 19,
    y = 90,
    labelSize = 40,
    tileColor = {
        default = {76/255, 76/255, 76/255},
        over = {150/255, 150/255, 150/255}
    },
    labelColor = {
        default = {1, 1, 1},
        over = {0, 0, 0}
    },
    label = "-"
}

weightPlusButton = widget.newButton{
    shape = "roundrect",
    radius = 15,
    width = 60,
    height = 60,
    x = 142,
    y = 90,
    labelSize = 40,
    tileColor = {
        default = {76/255, 76/255, 76/255},
        over = {150/255, 150/255, 150/255}
    },
    labelColor = {
        default = {1, 1, 1},
        over = {0, 0, 0}
    },
    label = "+"
}

tileColor определяет цвет кнопки: default — цвет в обычном состоянии, over — при нажатии. Аналогично работает labelColor для цвета текста.

Обработчики событий onRelease:

function weightMinusButton:onRelease()
    if weight > weightMin then
        weight = weight - 1
        weightText.text = weight
        weightSlider:setValue(100 * (weight - weightMin) / (weightMax - weightMin))
    end
end

function weightPlusButton:onRelease()
    if weight < weightMax then
        weight = weight + 1
        weightText.text = weight
        weightSlider:setValue(100 * (weight - weightMin) / (weightMax - weightMin))
    end
end

Эти методы уменьшают/увеличивают вес (weight), обновляют текст в текстовом поле (weightText) и позицию слайдера (weightSlider), проверяя, что вес не выходит за допустимые границы (weightMin, weightMax).

Группировка элементов

Для группировки элементов используем метод insert:

weightGroup:insert(weightSlider)
weightGroup:insert(weightMinusButton)
weightGroup:insert(weightPlusButton)

Это добавит слайдер и обе кнопки в группу weightGroup, позволяя управлять ими как единым целым.

Результат

Добавлены функциональные кнопки «+» и «-», улучшающие пользовательский интерфейс для выбора веса. Кнопки стилизованы и интегрированы в общую группу элементов. Приложение стало более удобным.

Что будем искать? Например,программа