Corona Урок 7 «Button — Кнопка»

Поделиться.

Всем доброго времени суток , сегодня наш урок посвящен созданию кнопки используя библиотеку widget.

Создайте новый проект и откройте его в редакторе кода.

Начнем, первым делом подключим Библиотеку widget, для этого введем в редакторе следующий код:

local widget = require( "widget" )

Мы создали переменную widget и поместили в нее библиотеку widget, теперь можем обращаться к ее функциям.

Далее, создадим локальные переменные, которые будут хранить в себе ширину и высоту экрана.

local X = display.contentWidth
local Y = display.contentHeight

Чтоб проверить работу нашей еще несуществующей кнопки, создадим две переменные, для этого добавьте следующий код:

local Value = 0
local Tex = display.newText(Value, X/2, Y/4, Font, 40

Мы создали переменную Value она хранит в себе цифровое значение и переменную Tex в ней мы храним отрисованный текст, который выводит на экран значение переменной Value.

Затем. Обратимся к функции newButton(), для этого введем в редакторе следующий код:

local button = widget.newButton(
{
label = "click me",
onEvent = handleButtonEvent,
shape = "roundedRect",
width = 200,
height = 40,
cornerRadius = 15,
fillColor = { default={0,0,0,0}, over={0,0,0,0} },
strokeColor = { default={0,0,0.3,1}, over={0,0,1,1} },
strokeWidth = 4
}
)
button.x = X/2
button.y = Y/2

Мы создали локальную переменную button и поместили в нее  отрисованную кнопку, в качестве аргумента она принимает набор свойств, свойства записываются в фигурных скобках, через запятую

1) label = Текст который будет написан на кнопке.

2) onEvent = Название функции в которую мы будем передавать состояние кнопки.

3)shape = Форма кнопки.

4)width = Ширина.

5)height = Высота.

6)cornerRadius = Радиус закругления углов.

7)fillColor = Цвет и прозрачность фона (default = начальный, over= цвет при клике).

8)strokeColor = Цвет обводки (default = начальный, over= цвет при клике).

9)strokeWidth = Ширина обводки.

А также мы задали нашей кнопке позицию по "X" и по "Y".

Давайте теперь создадим функцию, которая будет принимать состояние кнопки:

local function handleButtonEvent( event )

if ( "ended" == event.phase ) then
Value = Value + 1
Tex.text = Value
end
end

Мы создали функцию handleButtonEvent, в качестве аргумента она принимает состояние кнопки, нас интересует текущая фаза - event.phase. Есть две фазы: начало клика - "began" и конец клика - "ended"Если текущая фаза ровна "ended", тогда  увеличиваем переменную Value на единицу  и отрисовываем его обновляя  текстовое значение переменной Tex.

На этом все, Удачи 🙂


Поделиться.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *