Corona手游教程之widget：Button篇

在corona sdk里，创建界面交互元素widget，非常方便灵活，并且具备极强的可定制性。

我们创建按钮使用如下代码：

widget.newButton( options )

我们有多种方式来创建按钮，不管哪一种，options都可以包含的公共字段如下：

  • id：（可选）一个关联到此按钮的可选的字符串标识，默认为”widget_button“
  • x, y：（可选）origin坐标
  • left, top：（可选）左上角坐标
  • isEnable：是否启用，默认为true。通过button:setEnable()来设置，设置为false时，按钮不响应任何事件。
  • OnPress\onRelease\onEvent：事件

我们也可以通过object:setLabel()和object:getLabel()来设置和获取按钮文字。根据不同的需求，我们有不同的方式来创建按钮，差别主要在options额外的参数上：

1 基本视觉方式

  • label：（可选）显示在按钮顶部的标题
  • labelAlign：（可选）按钮标题对齐方式，可选值为left，right，center，默认为center
  • labelColor：（可选）一个table，保存两个RBGA值，用于表示默认和按下时颜色。格式如：labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 0, 0.5 } }
  • labelXOffset, labelYOffset：（可选）按钮标题的x和y方向上的偏移。例如，labelYOffset=-8将会把标题往上移动8个像素
  • font：（可选）按钮标题使用的字体，如native.systemFont
  • fontSize：（可选）按钮标题的字体大小，单位是像素。默认为14
  • emboss：（可选）如果设置为true，按钮标题将呈现为浮雕状（内凹）
  • textOnly：（可选）如果设置为true，按钮将只能通过一个文本对象来构造 （无背景元素，貌似没有周围的空隙了），默认为false
local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )

    if ( "ended" == event.phase ) then
        print( "Button was pressed and released" )
    end
end

-- Create the widget
local button1 = widget.newButton
{
    left = 100,
    top = 200,
    id = "button1",
    label = "Default",
    onEvent = handleButtonEvent
}

只有文字的按钮，如下图：

2 2-Image方式

顾名思义，就是用两张图片来构造的按钮。这也是最简单的构造按钮的方法---只需要两张图片，一个作为默认一个作为按下状态。

width, height：（可选）图片文件的宽度和高度

baseDir：（可选）图片的基本路径。默认是你的工程文件夹（system.ResourceDirectory)

defaultFile：默认图片的文件名。（抬起状态）

overFile：按下图片的文件名。（按下状态）

local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )

    if ( "ended" == event.phase ) then
        print( "Button was pressed and released" )
    end
end

local button1 = widget.newButton
{
    width = 240,
    height = 120,
    defaultFile = "buttonDefault.png",
    overFile = "buttonOver.png",
    label = "button",
    onEvent = handleButtonEvent
}

-- Center the button
button1.x = display.contentCenterX
button1.y = display.contentCenterY

-- Change the button‘s label text
button1:setLabel( "2-Image" )

defaultFile和overFile可以制作成如下图样式：

3 2-Frame方式

这种方式是使用ImageSheet中的两帧--一帧表示默认，一帧表示抬起。在这种方式里，需要引用一个sheet参数来引用一个ImageSheet。然后分别给defaultFrame和overFrame指定帧数。

  • sheet：按钮用到的ImageSheet。
  • defaultFrame：默认帧位于第几帧
  • overFrame：抬起帧位于第几帧
local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )

    if ( "ended" == event.phase ) then
        print( "Button was pressed and released" )
    end
end

-- Image sheet options and declaration
local options = {
    width = 240,
    height = 120,
    numFrames = 2,
    sheetContentWidth = 480,
    sheetContentHeight = 120
}
local buttonSheet = graphics.newImageSheet( "buttonSheet.png", options )

-- Create the widget
local button1 = widget.newButton
{
    sheet = buttonSheet,
    defaultFrame = 1,
    overFrame = 2,
    label = "button",
    onEvent = handleButtonEvent
}

-- Center the button
button1.x = display.contentCenterX
button1.y = display.contentCenterY

-- Change the button‘s label text
button1:setLabel( "2-Frame" )

4 Shape方式

这种方式允许你通过下列内建的corona形状函数来创建按钮：

  • display.newRect()
  • display.newRoundedRect()
  • display.newCircle()
  • display.newPolygon()

  • shap：定义按钮外形（背景）需要的形状。有效的值为”rect“，”roundedRect“，”circle“，”polygon“
  • fillColor：（可选）同前=> fillColor = { default={ 1, 0.2, 0.5, 0.7 }, over={ 1, 0.2, 0.5, 1 } }
  • strokeColor：（可选）同上=> strokeColor = { default={ 0, 0, 0 }, over={ 0.4, 0.1, 0.2 } }
  • strokeWidth：（可选）形状对象边框的宽度。只在strokeColor被定义时才有效。
  • conerRadius：（可选）当为roundedRect形状（圆角矩形）。其他形状时会忽略这个字段。
  • radius：（可选）当为circle形状（圆形）。其他形状会忽略这个字段。
  • vertices：（可选）一个x，y坐标数组，用于polygon形状（多边形）。其他形状会忽略这个字段。如vertices = { -20, -25, 40, 0, -20, 25 }

示例代码如下：

local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )

    if ( "ended" == event.phase ) then
        print( "Button was pressed and released" )
    end
end

-- Create the widget
local button1 = widget.newButton
{
    label = "button",
    onEvent = handleButtonEvent,
    emboss = false,
    --properties for a rounded rectangle button...
    shape="roundedRect",
    width = 200,
    height = 40,
    cornerRadius = 2,
    fillColor = { default={ 1, 0, 0, 1 }, over={ 1, 0.1, 0.7, 0.4 } },
    strokeColor = { default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 } },
    strokeWidth = 4
}

-- Center the button
button1.x = display.contentCenterX
button1.y = display.contentCenterY

-- Change the button‘s label text
button1:setLabel( "Shape" )

5 9-slice方式

这种方式使用一个imageSheet里的9个切片，来组装一个大小可伸缩的按钮。如下图所示，9个切片分别是4个角（红色），2个水平的边（绿色），2个垂直的边（黄色），还有一个中间部分。根据按钮的大小，角依然保持在Imagesheet中的大小，而边和中部，将会根据按钮的宽度和高度来拉伸填充。记住要构造整个按钮，实际需要18个切片：分别用于默认状态和抬起状态。

  • width，height：按钮的宽度和高度
  • sheet：用于按钮的ImageSheet对象
  • middleFrame,middFrameOver：默认和按下状态中部填充区域的帧序号
  • topLeftFrame，topLeftOverFrame：默认和按下状态左上角填充区域的帧序号
  • 。。。

详细 参数具体见API手册，就不罗列了。

local widget = require( "widget" )

-- Function to handle button events
local function handleButtonEvent( event )

    if ( "ended" == event.phase ) then
        print( "Button was pressed and released" )
    end
end

-- Image sheet options and declaration
local options = {
    frames =
    {
        { x=0, y=0, width=21, height=21 },
        { x=21, y=0, width=198, height=21 },
        { x=219, y=0, width=21, height=21 },
        { x=0, y=21, width=21, height=78 },
        { x=21, y=21, width=198, height=78 },
        { x=219, y=21, width=21, height=78 },
        { x=0, y=99, width=21, height=21 },
        { x=21, y=99, width=198, height=21 },
        { x=219, y=99, width=21, height=21 },
        { x=240, y=0, width=21, height=21 },
        { x=261, y=0, width=198, height=21 },
        { x=459, y=0, width=21, height=21 },
        { x=240, y=21, width=21, height=78 },
        { x=261, y=21, width=198, height=78 },
        { x=459, y=21, width=21, height=78 },
        { x=240, y=99, width=21, height=21 },
        { x=261, y=99, width=198, height=21 },
        { x=459, y=99, width=21, height=21 }
    },
    sheetContentWidth = 480,
    sheetContentHeight = 120
}
local buttonSheet = graphics.newImageSheet( "buttonSheet.png", options )

-- Create the widget
local button1 = widget.newButton
{
    width = 340,
    height = 100,
    sheet = buttonSheet,
    topLeftFrame = 1,
    topMiddleFrame = 2,
    topRightFrame = 3,
    middleLeftFrame = 4,
    middleFrame = 5,
    middleRightFrame = 6,
    bottomLeftFrame = 7,
    bottomMiddleFrame = 8,
    bottomRightFrame = 9,
    topLeftOverFrame = 10,
    topMiddleOverFrame = 11,
    topRightOverFrame = 12,
    middleLeftOverFrame = 13,
    middleOverFrame = 14,
    middleRightOverFrame = 15,
    bottomLeftOverFrame = 16,
    bottomMiddleOverFrame = 17,
    bottomRightOverFrame = 18,
    label = "button"
}

-- Center the button
button1.x = display.contentCenterX
button1.y = display.contentCenterY

-- Change the button‘s label text
button1:setLabel( "9-Slice" )
时间： 2024-12-11 07:43:03

Corona手游教程之widget：Button篇的相关文章

Corona手游教程之widget：PickerWheel篇

首先什么是pickerWheel,如下图所示: 这是移动设备上交互创新的典型控件,非常适合触屏进行选择,对应PC上的下拉框. 在Corona中pickerWheel被设定为320X222像素大小.我们可以使用默认样式或定制化的pickerWheel.另外,请注意列的总宽度实际是280像素,因为要扣除左右两边的20像素边框大小. 为了节约内存,pickerWheel在定制化的时候同样使用Image Sheet.pickerWheel不支持对其宽度和高度进行伸缩(scale)或改变其.width或h

Corona手游教程之widget：Slider篇

废话不多说,同Corona SDK其他widget一样,出于节约内存考虑定制化的slider也需要使用ImageSheet,并且不可以伸缩(scale)或通过.width或.height属性改变宽度和高度. 我们创建一个slider的基本分方法是: widget.newSlider( options ) options的公共参数为: id:(可选)一个赋予slider的可选字符串标识.默认值为"widget_slider" x, y:(可选)origin的坐标 left, top:(可

Corona手游教程之widget：ProgressView篇

通常为了节省内存,我们通过ImageSheet来创建进度条(progressView),进度条也不支持伸缩.我们创建进度条的方式如下: widget.newProgressView( options ) options的公共字段包括如下: id:(可选)一个赋予progressView的标识字符串,默认为default_progressView x, y:(可选)widget的位置坐标的x和y left, top:(可选)左上角的坐标 width:进度条的总长度 isAnimated:(可选)如

Tkinter教程之Text(2)篇

本文转载自:http://blog.csdn.net/jcodeer/article/details/1811347 '''Tkinter教程之Text(2)篇''''''6.使用tag来指定文本的属性'''#创建一个指定背景颜色的TAG# -*- coding: cp936 -*-from Tkinter import *root = Tk()t = Text(root)# 创建一个TAG,其前景色为红色t.tag_config('a',foreground = 'red')# 使用TAG '

Tkinter教程之Text(1)篇

本文转载自:http://blog.csdn.net/jcodeer/article/details/1811343 '''Tkinter教程之Text篇(1)''''''1.创建第一个Text'''from Tkinter import *root = Tk()t = Text(root)t.pack()root.mainloop()#root中含有一Text控件,可以在这个控件内输入文本,可以使用Ctrl+C/V向Text内添加剪切板上的内容(文本),不接受Ctrl+Z执行操作'''2.向T

谷歌移动UI框架Flutter教程之Widget

引言 在之间我已经介绍了关于Flutter的下载安装以及配置,还有开发工具Android Studio的配置,还不知道的同学可以看看我这篇博客--谷歌移动UI框架Flutter入门.这里为什么非要用Android Studio,我可以解释一下.Android Studio是Google的亲儿子,由谷歌一手开发,而Flutter也是谷歌推出的技术,所以在支持和兼容问题上,Android Studio是非常有优势的.老话说得好,肥水不流外人田,谷歌内部肯定是将Android Studio对Flutt

# IT明星不是梦 # WIFI模块开发教程之W600连云篇1：onenet三色灯项目小程序篇②

前言 本文研究如何使用小程序连接云平台,进而控制上一节中连接到onenet云平台的RGB三色灯设备. 一.理论基础 1.先睹为快 视频地址:https://www.ixigua.com/i6806304062091297292/ 2.功能点简述 小程序开机页面 小程序界面布局 小程序访问onenet接口 小程序3秒刷新数据状态 小程序控制弹出编辑框设置房间号 小程序调用storage接口存取数据 二.使用实例 1.云端创建产品 接下来咱们进入正题,首先需要在云端创建一个产品,步骤如下: 创建产品

WIFI模块开发教程之W600网络篇1：AP模式下TCP Client通信

前言 本文研究如何在AP模式下进行TCP Client通信,所谓AP模式是说模块起来一个softAP热点,可以供其他WIFI设备连接,当其他设备连接成功后,另WIFI模块作为客户端,局域网中其他设备作为服务端进行TCP数据通信. 一.理论基础 本节要处理的有两个问题,其一是如何利用RT_Thread起来一个softAP,其二是如何使用Socket套接字编程搞定TCP Client程序编写. 1.模块开启SoftAP 模块需要起来一个名字为sand,密码为12345678的热点,RT_Thread

WIFI模块开发教程之W600网络篇2：AP模式下TCP Server通信

前言 本文研究如何在AP模式下进行TCP Server通信,所谓AP模式是说模块起来一个softAP热点,可以供其他WIFI设备连接,当其他设备连接成功后,另WIFI模块作为服务端,等待局域网中其他客户端连接后通信. 一. 理论基础 本节要处理的有两个问题,其一是如何利用RT_Thread连接路由器,其二是如何使用Socket套接字编程搞定TCP Server程序编写. 1.连接路由器 模块需要开启station,并且连接到一个路由器,RT_Thread中只需要调用wlan.mgnt.h中的函数