ViewPager使用教程 Step5

完整Demo：ViewPagerDemo.lua

使用场景

1.自动滚动显示信息模块。

2.用户左右滑动或点击切换数据页。

初始化ViewPager

ViewPager继承自View,布局方法与View一致。下面主要介绍ViewPager的部分常用方法

copy下面代码，运行试试

---ViewPager初始化
local FirstViewPager = ViewPager()
FirstViewPager:width(MeasurementType.MATCH_PARENT):height(50)
---ViewPager是否自动滚动 默认false
FirstViewPager:autoScroll(true)
---ViewPager自动滚动的周期 单位s
FirstViewPager:frameInterval(5)
---ViewPager是否显示指示器
FirstViewPager:showIndicator(true)
---初始化ViewPager适配器
local firstadapter = ViewPagerAdapter()
---绑定ViewPager适配器
FirstViewPager:adapter(firstadapter)

local bannerView = View():width(MeasurementType.MATCH_PARENT):height(100)
window:addView(bannerView)
bannerView:addView(FirstViewPager)

在以上代码中，我们初始化了一个ViewPager并通过View的基本布局方式进行了调节,设定了当前ViewPager的几个属性，滚动显示且周期为5s，显示指示器。

autoScroll(boolean bool)	是否自动滚动默认false
recurrence(boolean bool)	是否循环滚动默认false
frameInterval(number num)	播放周期默认2s 单位s
showIndicator(boolean boll)	是否显示指示器
scrollToPage(number position,bool anim)	滚到到指定的位置
setPageClickListener(function (position))	设置点击指定页的回调

最后初始化了ViewPager调用adapter为其绑定适配器，至此ViewPager的初始化操作基本完成。上述代码中有部分方法并没有使用，后续代码中会用到。

Adapter

ViewPager 可以看做是一组View的集合，但是ViewPager 并不自己控制这些子View的创建以及每个子View中数据的显示，因此，它需要一个中间类来协助他完成对于子View的创建和控制，这个类就是Adapter(适配器)。

我们在滑动ViewPager过程中无非需要知道两个元素，每个View显示的内容和对应View的相对排序位置(position)

围绕这两个元素 我们开始配置我们的Adapter

---数据
dataSource = {
items = {
{
icon = "http://s.momocdn.com/w/u/others/2019/01/16/1547610372024-01.png",
text = "11111"
},
{
icon = "http://s.momocdn.com/w/u/others/2019/01/16/1547610372064-02.png",
text = "22222"
},
{
icon = "http://s.momocdn.com/w/u/others/2019/01/16/1547610372063-3.png",
text = "33333"
},
{
icon = "http://s.momocdn.com/w/u/others/2019/01/16/1547610372137-4.png",
text = "44444"
},
{
icon = "http://s.momocdn.com/w/u/others/2019/01/16/1547610372063-5.png",
text = "55555"
}
}
}
--- 子View的个数 根据数据的长度来判断
firstadapter:getCount(function ()
return #dataSource.items
end)
---初始化每个子View
firstadapter:initCell(function (cell)
cell.bgImage = ImageView():contentMode(ContentMode.SCALE_ASPECT_FIT):width(100):height(100)
cell.contentView:cornerRadius(10):clipToBounds(true)  --圆角
cell.contentView:bgColor(Color(255, 0, 0, 0.5))
cell.contentView:addView(cell.bgImage)

end)
---将数据与每个子View绑定
firstadapter:fillCellData(function (cell, position)  --设置初始化cell数据的回调
local items = dataSource.items[position]
cell.bgImage:image(items.icon)
end)
---设定点击时候的回调
FirstViewPager:setPageClickListener(function (position)  --设置点击指定页的回调
Toast("Click position: "..tostring(position),1)
end)

围绕ViewPager需要的两个元素，我们看到了Adapter的主要功能。以上就实现了一个简单的轮播的ViewPager

getCount(function() callback)	子View个数
initCell(function(cell))	初始化子View的样式
fillCellData(function(cell,position))	将子View与数据绑定
reuseId(function( number position) callback)	设置不同类型cell的id回调
initCellByReuseId(string reuseId, function(table cell , number position) callback)	根据reuseId设置初始化cell的回调
fillCellDataByReuseId(string reuseId, function(table cell, number position) callback )	根据reuseId设置初始化cell数据的回调

推荐使用reuseId一系列的初始化方法，通过reuseId能通过继承的方式来减少创建对象的次数，提高效率。

TabSegmentView

说道ViewPager就不得不介绍一下TabSegmentView。TabSegmentView是一个标签指示器View，与ViewPager绑定使用，指示当前viewpager索引。

初始化TabSegmentView

---提取数据中传过来的标题组成一个数组
local array = Array()
for _,v in ipairs(dataSource.items) do
array:add(v.text)
end
---初始化一个TabSegmentView
tabLayout = TabSegmentView(Rect(0,0,window:width(),50), array)
tabLayout:selectScale(1.6)  --选中时缩放比例
tabLayout:normalFontSize(15)  --默认字体大小
window:addView(tabLayout)

以上代码我能可以看到初始化一个TabSegmentView主要需要三个参数，指定的尺寸，标题数组和字体颜色(可以省略)。还有部分TabSegmentView的属性

selectScale(float f)	选中时缩放的比例
normalFontSize(float f)	默认字体大小
tintColor(Color c)	字体颜色

既然TabSegmentView是与ViewPager绑定使用的，下面就介绍一下如何绑定ViewPager

---先设置好一个ViewPager---
local viewPager = ViewPager()
viewPager:width(MeasurementType.MATCH_PARENT):height(MeasurementType.MATCH_PARENT):marginTop(50)
local adapter = ViewPagerAdapter()

adapter:getCount(function()  --设置cell数量回调
return #dataSource.items
end)

adapter:initCell(function (cell)  --设置初始化cell的回调
cell.bgImage = ImageView():contentMode(ContentMode.SCALE_ASPECT_FIT):width(200):height(200)
cell.bgImage:marginTop(200):marginLeft(80)
cell.contentView:cornerRadius(10):clipToBounds(true)  --圆角
cell.contentView:bgColor(Color(255, 0, 0, 0.5))
cell.contentView:addView(cell.bgImage)
end)

adapter:fillCellData(function (cell, position)  --设置初始化cell数据的回调
local items = dataSource.items[position]
cell.bgImage:image(items.icon)
end)

viewPager:setPageClickListener(function (position)  --设置点击指定页的回调
Toast("Click position: "..tostring(position),1)
viewPager:scrollToPage(3,true)
end)

viewPager:autoScroll(true)  --是否自动滚动
viewPager:frameInterval(5)  --播放的周期
viewPager:showIndicator(true)

viewPager:adapter(adapter)
window:addView(viewPager)

---实现联动
tabLayout:relatedToViewPager(viewPager, true)
---点击对应tab的回调
tabLayout:setTabSelectedListener(function (index)
Toast("select "..index,1)
end)
---设置标注数目
tabLayout:setTapBadgeNumAtIndex(30, 3)

上面代码中，我们首先重新绘制了一个ViewPager然后通过tabSegmentView的relatedToViewPager方法将两者关联。设置了对应tab点击的回调和设置了对应tab的标注。TabSegmentView的主要方法如下：

function relatedToViewPager(ViewPager viewPager)	与ViewPager绑定，实现联动效果 参数：绑定的ViewPager
function setTapBadgeNumAtIndex(Integer number,Integer index)	设置标注数 参数：标签数 标签索引
void setRedDotHiddenAtIndex(Integer index,boolean isShow)	改变标签状态 参数：标签索引 是否展示(默认隐藏)
setTabSelectedListener(function callback)	设置tab选中的索引
setItemTabClickListener(function(Integer index))	每个导航item点击回调
setAlignment(TabSegmentAlignment alignment)	布局样式，默认靠左 参数:LEFT,CENTER,RIGHT
setTapBadgeTitleAtIndex(String title,Integer index)	设置标注文本
setTabSpacing(Integer margin,Integer padding)	设置Tab之间间距，单位dp