前言:UI设计的一个小需求,这个滑动条,和之前接触到的都不一样,我拿着需求去问,他就给我说了一个app,他需要的是这种效果。我去搜索了,看有没现成的codeDome,没有发现,后来仔细想了想就是scrollView的自带滑动条的实现,感觉思路对了就写了写。
滑动录屏.gif1.思路
- 固定蓝条长度并计算出占灰条总长度比值
// slideRate:蓝条占灰条总长度比值,默认0.6,最小值为0.2(可以自己设置)
// total:总共几个Cell
// column:一行几个
self.slideRate = 0.6;
// 0.2 是指除了默认的第一个屏幕外,其它每个column占的相对比值
self.slideRate = self.slideRate - ((total - self.column)/self.column * 0.2 + total%self.column/self.column * 0.2);
// 最小值
if (self.slideRate <= 0.2) self.slideRate = 0.2;
- 首先找到蓝条相对于灰条的相对滚动的参照。我是以scrollView.contentOffset.x 相对于屏外剩余宽度 invisibleWidth = (scrollView.contentSize.width - screenWidth) 的相对移动的距离为参照。整个滚动过程起始点是scrollView.contentOffset.x = 0,结束点是scrollView.contentSize.width,有了这个参照,我们就可以算出scrollView.contentOffset.x 滑动屏外剩余宽度的占比rate。
- rate = contentOffset.x/invisibleWidth 就是蓝条相对灰条移动的比值。
- 计算蓝条相对灰条左边间距。
// 计算蓝色滑动条相对父view左边距离
CGFloat leftSpace = rate * ((1 - self.slideRate) * self.size.width);
这样蓝条就像手势一样正常滑动啦。
Demo传送
网友评论