2019 年 9 月 27 日
为 Corona 提供的简单进度视图
Corona 如此出色的原因之一是我们提供了 1000 多个 API 调用，让您的开发人员生活更轻松。 这包括各种便利 API，使我们易于使用的 API 更加简单。
但是，有时当您尝试将这些便利方法用于超出其设计用途时，它们可能不再是便利，而更像是令人头疼的问题。 让我们以 widget.* 库为例进行研究。
widget.* 库包含用于创建按钮、开关、表格视图等的 API，但它们的创建目的是模仿 iOS 和 Android UI 元素的外观和感觉。 Corona Labs 最终添加了更改其外观的选项，以便可以对其进行主题化，以更好地适应您的游戏或应用程序。 问题在于，尝试为这些小部件设置主题可能比自己构建自定义小部件更复杂。 其中一个小部件是 widget.newProgressView。
在其最简单的设置中，widget.newProgressView 非常简单
|
1 2 3 4 5 6 7 8 9 10 |
local widget = require( "widget" ) local progressView = widget.newProgressView({ left = 50, top = 100, width = 220, isAnimated = true }) progressView:setProgress( 0.5 ) |
你会得到
当进度设置为 50% 时。这是一个简单的 iOS 样式的进度视图。 如果您将小部件主题更改为 Android，它将更类似于原生 Android 应用程序。 但是，如果您想做一些更适合您的应用程序的事情怎么办？ 好吧，您可以使用图像表来实现。 让我们先看看代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
local options = { width = 64, height = 64, numFrames = 6, sheetContentWidth = 384, sheetContentHeight = 64 } local progressSheet = graphics.newImageSheet( "widget-progress-view.png", options ) local progressView = widget.newProgressView({ sheet = progressSheet, fillOuterLeftFrame = 1, fillOuterMiddleFrame = 2, fillOuterRightFrame = 3, fillOuterWidth = 64, fillOuterHeight = 64, fillInnerLeftFrame = 4, fillInnerMiddleFrame = 5, fillInnerRightFrame = 6, fillWidth = 64, fillHeight = 64, left = 50, top = 200, width = 220, isAnimated = true }) progressView:setProgress( 0.5 ) |
您需要做更多的事情才能在代码方面进行设置，此外，您还必须提供一个必须经过特殊构建的图像表。 这是一个六帧、每帧 64px X 64px 的图像，其中有一个外框架和一个内部填充。 帧 1 和 3 代表外框架的端盖，帧 4 和 6 代表端盖的填充。 帧 2 是拉伸以填充您设置的大小（上面的宽度 = 220）的外框架，帧 5 是实际进度图像，它将拉伸到视图设置的百分比。 即使这样，它也是有限的。此图像表（忽略背景颜色，它们只是用来显示每个帧）
将产生如下外观的进度视图
该框架和填充可能不是您想要的。 如果您想要一个红色到黄色到绿色的渐变，并且可能有一个指针显示您在红色到绿色范围内的位置怎么办？ 好吧，您无法真正使用此小部件做到这一点。 为什么？ 因为中间帧会拉伸到宽度，然后添加端盖。
但是，如果您不介意使用矩形，则可以使用一个图像和一个 display.newRect() 来完成此操作，如果您想要圆角，则可以使用第三个图像作为遮罩。
让我们看一个示例，它将为您提供渐变“温度计”。 从此图像和遮罩开始
和
该图像将作为我们进度视图的背景，而遮罩将用于为其提供圆角。 我们还将使用 display.newRect() 并用海军蓝色填充，这将阻止尚未达到的渐变百分比。 进度为 75% 时，我们应该得到如下所示的内容
此代码非常简单。 让我们创建一个函数来创建一个新的渐变进度视图，并创建一个设置百分比的方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
local function customProgressView(percent) local thisProgressView = display.newGroup() thisProgressView.backgound = display.newImageRect(thisProgressView, "pvBackground.png", 200, 40) local mask = graphics.newMask("pvMask.png") thisProgressView:setMask(mask) thisProgressView.progress = display.newRect(thisProgressView, 100, 0, 200, 40) thisProgressView.progress:setFillColor(0,0.25, 0.5) thisProgressView.progress.anchorX = 1 thisProgressView.progress.width = 200 - (percent * 200) function thisProgressView:setProgress( percent ) self.progress.width = 200 - (percent * 200) end return thisProgressView end local progressView3 = customProgressView(0) progressView3:setProgress( 0.75 ) progressView3.x = display.contentCenterX progressView3.y = 350 |
首先创建一个display.newGroup()来容纳进度条视图。这不仅可以作为一个我们可以轻松定位的单个显示对象，还可以作为一个表格来保存三个显示对象和一个设置百分比的函数。该函数将返回一个指向display.newGroup()的句柄，你将在代码中操作它。
接下来，使用display.newImageRect()设置背景图像，以加载我们的渐变背景图像。本教程硬编码了大小，但你可以轻松地将大小参数传递给创建函数。将graphics.newMask()添加到组中，以便添加到组中的任何其他显示对象都将受到遮罩的影响。
创建一个display.newRect()并将其存储在组中。这将隐藏尚未实现的进度。这需要一些技巧才能正确工作。将矩形锚定到右侧。设置颜色并使用矩形的.width值来调整其大小，以达到你想要阻止的程度。
向组中添加一个函数，该函数可用于在初始创建后设置百分比。它与上面使用的数学方法相同。
最后，将组返回给调用函数。然后在调用函数中，你可以初始化进度条视图，然后设置百分比。
整个函数和用于定位和设置值的代码共 22 行。尝试使用 widget.newProgressView() 的主题选项需要 28 行代码（加上小部件本身！），无法进行这种自定义，而且代码更多。
希望这能证明一些你认为很难的事情实际上非常简单。
抱歉，评论表单目前已关闭。