实现一个简单的滚动条
来源:互联网 发布:永安市招聘淘宝运营 编辑:程序博客网 时间:2024/05/26 07:27
bones 没有自带一个滚动条,主要是考虑到滚动条的样式非常多变,可以看下qq系列的滚动条
QQ新闻里的滚动条,如下
异于通常的windows风格滚动条
QQ电脑管家
典型的移动平台风格
再看下QQ聊天框的
类似于windows风格但垂直滚动条两边多了一个直接到顶部和底部的响应区域
由于滚动条如此多变想提供一个内置的并且美工设计都能认可的滚动条非常困难,相比与内置,能让用户容易写出一个自己需要的滚动条才应该是条正确的道路。
bones当前的版本已经可以通过scroller的接口让用户写出一个滚动条来,在这里就演示下如何实现一个滚动条 并用它来配合scroller滚动标签。
由于手头没有滚动条图片资源 我用了2个色块来替代,你也可以通过bones.shader创建渐变色来让滚动条更好看一点,效果图如下:
滚动条的编写同样使用了扩展标签scrollbar,具体如何使用扩展标签前文已经讲了,这里不再讲解。
先分析下滚动条的结构:
1:滚动条最少应该有一个滑动槽和一个滑块
2:鼠标在滑块上按下并移动时滑块要跟着鼠标滑动
在这里我以能绘制出矩形色块的shape标签来代表滑动槽和滑块,其中滑块是滑动槽的子标签如下:
<!--底色--> <shape> <!--滑块区域--> <shape> <event name ="onMouseDown" phase ="target" module ="scrollbar" func ="onSliderMouseDown"></event> <event name ="onMouseUp" phase ="target" module ="scrollbar" func ="onSliderMouseUp"></event> <event name ="onMouseMove" phase ="target" module ="scrollbar" func ="onSliderMouseMove"></event> <event name ="onMouseLeave" phase ="target" module ="scrollbar" func ="onSliderMouseLeave"></event> </shape> <notify name ="onCreate" module ="scrollbar" func ="onCreate"></notify> <notify name ="onSizeChanged" module ="scrollbar" func ="onSizeChanged"></notify> </shape>
通常滚动条有水平和垂直滚动2种 因此提供了setStyle来设置具体类型
--设置水平还是垂直local function setStyle(self, horiz) self.horiz_ = horizend
知道滚动条类型后,还需要根据滚动范围来计算滑块的大小,看下垂直滚动条如何计算
local function updateSliderV(self) -- view + min + max = bar.height local w, h = self:getSize() local view = self.view_ local min = self.min_ local max = self.max_ local cur = self.cur_ local total = view + min + max local scale_slider = view / total local slider_h = view / total * h local slider_t = (cur - min) / (max - min) * (h - slider_h) self.slider_:setSize(w, slider_h) self.slider_:setLoc(0, slider_t)end
接下来 需要在点击到滑块时, 滑块跟鼠标移动并且通知scroller当前的滚动值
--self是滑块function mod.onSliderMouseMove(self, e) if self.click_ then local x, y = e:getRootLoc() local ydelta = y - self.last_y_ local xdelta = x - self.last_x_ local parent = self.parent_ local w, h = self:getSize() local cur = 0 local horiz = parent.horiz_ if horiz then cur = xdelta / w * (parent.max_ - parent.min_) + parent.cur_ else cur = ydelta / h * (parent.max_ - parent.min_) + parent.cur_ end parent.slave_:setScrollPos(cur, horiz) end self.last_x_, self.last_y_ = e:getRootLoc()end
在这里self 指的代表滑块的标签 父则是代表滑动槽,具体的可以看onCreate函数,slave则是scroller标签 这个由外界初始化时调用setSlave时设置的
--关联scroller 和滚动条 local vbar = self:getChildAt(2) local hbar = self:getChildAt(3) self.scroller_.vbar_ = vbar self.scroller_.hbar_ = hbar vbar:setSlave(self.scroller_) vbar:setStyle(false) hbar:setSlave(self.scroller_) hbar:setStyle(true) --设置scroller大小 即视口 self.scroller_:setSize(w / 2, h / 2) self.scroller_:setLoc(w + 10, 10) --设置滚动条的位置 local bar_const = 12 vbar:setLoc(w + 10 + w / 2, 10) vbar:setSize(bar_const, h / 2) --滚动条的位置可以是任意的 垂直滚动条是紧贴 水平滚动条可以离远点 local delta = 20 hbar:setLoc(w + 10, 10 + h /2 + delta ) hbar:setSize(w / 2, bar_const) --需要滚动显示image标签大小为图片大小 local image = self.scroller_:getChildAt(0) image:setSize(w, h) image:setContent(pm_key) --scroller垂直方向的滚动范围是0-h/2 设置成image的高 scroller会自动计算滚动范围 self.scroller_:setScrollInfo(h, false) self.scroller_:setScrollInfo(w, true) --响应滚动要用到image标签 缓存一下 self.scroller_.image_ = self.scroller_:getChildAt(0)
本篇完整代码下载:
http://blog.csdn.net/dalixux/article/details/48830721
- 实现一个简单的滚动条
- 用BasicScrollBarUI实现一个简单的个性化滚动条皮肤
- 做一个简单的网页滚动条
- Tablayout 横向滚动条的简单实现
- JavaScript实现简单的广告滚动条
- 一个javascript实现的滚动条
- js实现一个自定义的滚动条
- zenity 实现一个滚动条
- zenity 实现一个滚动条
- 滚动条的实现;
- 一个简单的给DataGrid添加滚动条
- 用SDK创建一个简单带滚动条的窗口
- 实现一个简单的滚动视图
- 简单的Jquery控制滚动条滚动
- 简单的滚动条事件
- 关于滚动条控制一个或多个DataGridView的滚动条滚动的实现(VB.net)
- 一个简单的滚动
- 两个div滚动条同步简单实现
- pdb文件
- animate.css 动画制作
- 八大排序,各显神通
- Linux 献给初学者:谈谈如何学习Linux操作系统
- cordova-plugin-local-notifications本地通知推送在cordova 5.0.0以上版本编译报错解决办法
- 实现一个简单的滚动条
- PLSQL跳出嵌套循环的小例子
- DataGridView列长度大于30就以...形式显示
- 守护进程与僵尸进程
- Java 异常处理机制
- opencv中关于cvNorm函数的使用
- 网络编程 笔记(八) I/O复用
- maven引入json-lib报错
- iOS开发系列--地图与定位