# 自定义控件

将特定 UI 布局封装成抽象类,以便复用代码,节省重复繁杂的操作

先看过 构造方法

首先 我们要定义一个新的类 例如 继承面板类的 新类 diy 应该这样写 必须要有一个构造方法 new 内容如下

class.diy = extends(class.panel)
{
    new = function (parent,path,x,y,width,height)
         local panel = class.panel.new(parent,path,x,y,width,height)
         --改变panel对象的类
         panel.__index = class.diy
         return panel
    end,
}


local diy = class.diy.create('x.blp', 0, 0, 256, 256)
1
2
3
4
5
6
7
8
9
10
11
12

再比如 如何写一个进度条类呢 简单的进度条布局是由几部分组成

  • 背景黑底图片
  • 上面有颜色用来显示进度的图片
  • 图片之上还有一个文本 用来查看具体数值的

然后开始定义一个类 这个类需要有

  • 构造方法
  • 设置进度条的方法
class.progress = extends(class.panel)
{
     --构造方法 派生进度条实例化对象所用
     new = function (parent, path, x, y, width, height)
          --底图是一张黑色的图片 这个可以写死
          local panel = class.panel.new(parent,'black.blp', x, y, width, height)
          panel.__index = class.progress

          --创建传进来路径的一张图片,用来显示进度条
          panel.texture = panel:add_texture(path, 0, 0, width, height)

          --创建一个文本控件 用来显示具体数值
          panel.text = panel:add_text('', 0, 0, width, height,'center')

          return panel
     end,


     --设置进度条方法
     --@ self 对象自己
     --@ value: number 当前进度
     --@ max_value: number 最大进度
     set_value = function (self, value, max_value)
          local rate = 0
          if max_value > 0 then
               rate = value / max_value
          end

          rate = math.max(0,rate)

          --改变图层尺寸 为进度值百分比
          self.texture:set_control_size(self.w * rate, self.h)

          local str = string.format(' %.0f / %.0f (%.2f)',value, max_value, rate)
          --设置文本内容
          self.text:set_text(str)
     end,
}

--派生实例化对象
local progress = class.progress.create('red.blp',100,100,256,32)

--调用对象方法 设置进度 改变UI
progress:set_value(50,100)


--派生实例化对象
local progress2 = class.progress.create('red.blp',100,500,256,32)

--调用对象方法 设置进度 改变UI
progress2:set_value(80,100)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52