源码分享:动态UI实现
2017-10-17 19:35:54

动态UI实现

作者:wuhensoft


研究一天,分享给大家动态布局UI。
代码写的水,大家凑合看。
先上效果图。 
代码也贴给大家。素材大家自己PS。。。。


  1. function UI_TroopsCfg_Iphone6Plus()

  2.   local ctrlWidth,ctrlHeight = 1300,800 --设置框的长宽

  3.   local picSize = 150                                        --图片尺寸长宽1:1

  4.   local startX,startY = 15,15 --起始点坐标

  5.   local editWidth,editHeight = 150,50  -- 编辑框的尺寸和图片同宽,高度为50

  6.   local ctrlMarginX,ctrlMarginY = 10,15        -- 控件和控件间的距离

  7.   

  8.   local troopsPicPath= {

  9.     "barbarain.png",

  10.     "archer.png",

  11.     "giant.png",

  12.     "goblin.png",

  13.     "wallbreaker.png",

  14.     "balloon.png",

  15.     "wizard.png",

  16.     "healer.png",

  17.     "dragon.png",

  18.     "pekka.png",

  19.     "minion.png",

  20.     "hogrIDEr.png",

  21.     "valkyeie.png",

  22.     "golem.png",

  23.     "witch.png",

  24.     "lavahound.png",

  25.   }

  26.   

  27.   --主界面

  28.   local UITable = {

  29.     ["style"] = "custom",

  30.     ["width"] = ctrlWidth,

  31.     ["height"] = ctrlHeight,

  32.     ["config"] = "TroopsCfg.dat",

  33.     ["okname"] = "确定",

  34.     ["cancelname"] = "取消",

  35.     ["views"] = {}

  36.   }

  37.   

  38.   --造兵设置

  39.   UITable["views"][1] = {

  40.     ["type"] = "Page",

  41.     ["style"] = "custom",

  42.     ["text"] = "造兵设置",

  43.     ["views"] = {}

  44.   }

  45.   

  46.   --添加图片和编辑框

  47.   local tb = UITable["views"][1]["views"],tbImg,tbEdt,tbLb

  48.   local myX = 0

  49.   local myY = 0

  50.   for row= 1,2 do --2行

  51.     for col = 1,8 do --每行8列

  52.       --图片框设置

  53.       tbImg = {}

  54.       tbImg["type"] = "Image"

  55.       tbImg["id"] = "img_"..string.sub(troopsPicPath[col + 5*(row-1)],1,-5)

  56.       tbImg["src"] = troopsPicPath[col + 8*(row-1)]

  57.       --编辑框设置

  58.       tbEdt = {}

  59.       tbEdt["type"] = "Edit"

  60.       tbEdt["id"] = "edt_"..string.sub(troopsPicPath[col + 5*(row-1)],1,-5)

  61.       tbEdt["text"] = "0"

  62.       tbEdt["align"] = "left"

  63.       tbEdt["size"] = 45

  64.       tbEdt["color"] = "0,0,0" --黑色

  65.                         tbEdt["kbtype"] = "number"

  66.       

  67.       --坐标处理

  68.       myY = (row - 1)*(picSize + ctrlMarginY + editHeight) + startX

  69.       myX = (col - 1)*(picSize + ctrlMarginX) + startY

  70.       tbImg["rect"] = myX..","..myY..","..picSize..","..picSize

  71.       tbEdt["rect"] = myX..","..(myY + picSize + 5)..","..editWidth..","..editHeight

  72.       --插入

  73.       table.insert(tb,tbImg)

  74.       table.insert(tb,tbEdt)

  75.     end

  76.   end

  77.   --添加说明文字

  78.         myY = myY + picSize + 5 + editHeight + ctrlMarginY;

  79.   tbLb = {

  80.     ["type"] = "Label",

  81.     ["text"] = "生产周期越长的兵种越靠前生产.智能检测已列队兵种.",

  82.     ["size"] = 50,

  83.     ["align"] = "center",

  84.     ["color"] = "255,0,0",

  85.                 ["rect"] = startX..","..myY..","..ctrlWidth..",100"

  86.   }

  87.         table.insert(tb,tbLb)

  88.   

  89.   --主面板-->关于

  90.   UITable["views"][2] = {

  91.     ["type"] = "Page",

  92.     ["style"] = "custom",

  93.     ["text"] = "关于",

  94.   }

  95.   UITable["views"][2]["views"] = {

  96.     {

  97.       ["id"] = "about_img",

  98.       ["type"] = "Image",

  99.       ["src"] = "about.png",

  100.       ["rect"] = ((ctrlWidth - 1000)/2)..",20,1000,523" 

  101.     }

  102.   }  

  103.   return UITable

  104. end


官方论坛原贴地址:http://bbs.xxzhushou.cn/thread-88897705-1-1.html