houmee实习日记22-30<1>-优快云博客

本文介绍如何使用CocosStudio编辑器构建排行榜UI，包括界面设计与代码实现。详细解析了MVC模式下界面、控制器和数据管理的分工，展示了如何通过Lua脚本动态加载UI元素和数据配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

----1

首先open的cocosstudio 打开UI编辑器，在画布列表里面新建画布，命名为:RankingList

(至于ui编辑器的使用百度一下吧) 可以参考下这：http://www.tuicool.com/articles/mIvyqi

编辑器里长这样的：

然后我们看看效果图：

基本添加的过程，层机构参考下图

panel代表容器层，（不懂的回到上面百度），slider表示滑动条，button按钮，listview滚动层,Label文本层

基本工作准备好，那现在用代码来实现这个界面，并且用代码添加按钮，文本，以及对各个控件的控制的实现

这里采用MVC的模式，创建3个文件来管理分别为

rankingList_ui ,(V界面)

rankingList_ctl,(C控制器 )

rankingList_data,(M数据存放)

上代码.lua

--rankingList_data
--排行榜数据管理系统data_mgr
--created by gun on 2015-4-22

--排行榜配置项--获取cocos studio json数据

module(...,package.seeall)

-- 迭代器
local  fistNum = 0
local  gidtor = function ( ) 
	fistNum = fistNum + 1
	return fistNum
end


--------#define------
GRADE = gidtor() --等级
RANKS = gidtor() --队伍
A_COPY_OF_THE_CLEARANCE = gidtor() -- 副本通关   --3
COMPETITIVE = gidtor() --竞技
CARD  = gidtor() --卡牌
WEEK_BOSS = gidtor() --周常BOSS   --6
WORLD_BOSS = gidtor() --世界BOSS
ASSOCIATION = gidtor() --公会 
WAR_ASSOCIATION = gidtor() --公会战  --9
-----
-- A_RANKING = gidtor() --一击排名
-- INTEGRAL_RANKING = gidtor() --积分排名

-- MAKE_SURE = gidtor() --确定

---------------对应上面，在json中获取button----

gRankingListUIConfig = {  
    [GRADE] = {btnName = "等级"},
    [RANKS] = {btnName = "队伍"},
    [A_COPY_OF_THE_CLEARANCE] = {btnName = "副本通关"},
    [COMPETITIVE] = {btnName = "竞技"},
    [CARD] = {btnName = "卡牌"},
    [WEEK_BOSS] = {btnName = "周常BOSS"},
    [WORLD_BOSS] = {btnName = "世界BOSS"},
    [ASSOCIATION] = {btnName = "公会"},
    [WAR_ASSOCIATION] = {btnName = "公会战"},
    -- ---------
    -- [A_RANKING] = {btnName = "Button_oTouchSort"},
    -- [INTEGRAL_RANKING] = {btnName = "Button_jCountSort", rootFile = gRes_CSUIPath .. "/RankingList.json"},
    -- [MAKE_SURE] = {btnName = "Button_sure", rootFile = gRes_CSUIPath.. "/RankingList.json"},
}

-------------------基类------

RankingListData = class("RankingListData",BaseClass)

function  RankingListData:ctor( ... )        --相当于java中的构造方法,用来初始化参数
	self.rObjList = nil
	self.rShowTable ={}
	self.currentPage = nil               
end

gRankingListData = RankingListData:new()     --RankingListData类的一个新对象gRankingListData

function RankingListData:Init(  )            --类似的响应方法，都是调出同一个listView
    self.rObjList = { --  1.....{self.IsShowSameView} 
    [GRADE] = self.IsShowSameView ,
    [RANKS] = self.IsShowSameView ,
    [A_COPY_OF_THE_CLEARANCE] = self.IsShowSameView ,
    [COMPETITIVE] = self.IsShowSameView ,
    [CARD] = self.IsShowSameView ,
    [WEEK_BOSS] = self.IsShowSameView ,
    [WORLD_BOSS] = self.IsShowSameView ,
    [ASSOCIATION] = self.IsShowSameView ,
    [WAR_ASSOCIATION] = self.IsShowSameView ,
    ---------点击按钮判断开启排行榜情况------------
     
    }
    self.rShowTable = {}                     --对rObjList遍历，然后对值进行判断,存在则按增序添加到rShowTable里
    for i,v in ipairs(self.rObjList) do
    	if v(self) then
    		table.insert(self.rShowTable,i)  --rShowTable{1,2,3,4,5,6,7,8,9,10,11,12}
    	end
    end		
end

---界面是否显示--
-- function RankingListData:GetNothing(  )
-- 	return false
-- end

-- function RankingListData:GetShow(  )
-- 	return true
-- end

---如果上面没有初始化，在这里初始化---
function RankingListData:GetShowTable(  )
	print(">>>GetShowTable")
	if not self.rObjList then
		self.Init()
	end
	print_table(self.rShowTable)
	return self.rShowTable	
end

function RankingListData:GetDataByIndex( nPage )
	
	return {}   --返回一个表
end

-- ---???
-- GRADE = gidtor() --等级   --1
-- RANKS = gidtor() --队伍   --2
-- A_COPY_OF_THE_CLEARANCE = gidtor() -- 副本通关   --3
-- COMPETITIVE = gidtor() --竞技  --4
-- CARD  = gidtor() --卡牌   --5
-- WEEK_BOSS = gidtor() --周常BOSS   --6
-- WORLD_BOSS = gidtor() --世界BOSS --7
-- ASSOCIATION = gidtor() --公会    --8
-- WAR_ASSOCIATION = gidtor() --公会战  --9
function RankingListData:IsShowSameView( )
	-- if gidtor() == 1 then return  1 end-- 
	-- print("->>")
	-- if gidtor() == 2 then return  1 end-- 
 --    if gidtor() == 3 then return  1 end-- 
 --    if gidtor() == 4 then return  1 end-- 
 --    if gidtor() == 5 then return  1 end-- 
 --    if gidtor() == 6 then return  1 end-- 
 --    if gidtor() == 7 then return  1 end-- 
 --    if gidtor() == 8 then return  1 end-- 
 --    if gidtor() == 9 then return  1 end--
       return true
end
--等UI弄好--
------------------------------------
---这上面的判断由下面data_mgr提供---
------------------------------------

RankingListDataMgr = class("RankingListDataMgr",BaseClass)

function RankingListDataMgr:ctor( ... )  --第二个基类的构造函数,初始化参数
	self.rObjList = nil
	self.currentPage = nil
end

gRankingListDataMgr = RankingListDataMgr:new() --新对象2

-----调用上面的getshowtable()来init-----
function RankingListDataMgr:Init(  )
	--rShowTable{1,2,3,4,5,6,7,8,9,10,11,12}
	local  tabList = gRankingListData:GetShowTable()  --用对象1来调用getshowtable方法
	self.rObjList = {}
	for i,v in ipairs(tabList) do
	    table.insert(self.rObjList,{id = v,obj = gRankingListUIConfig[v]}) --重新插入后的把值当作KEY，json只作为value
	end    	
end

---如果上面没有初始化，在这里初始化---
function RankingListDataMgr:GetInitConfig(  )
	--
    if not self.rObjList then
    	self.Init()
    end
    return self.rObjList	
end

--rankingList_ui
----------->>>请看houmee实习日记22-30<2>

转载于:https://my.oschina.net/u/1862653/blog/410881