美文网首页
类似scrollView的ScrollIndicator的滑动条

类似scrollView的ScrollIndicator的滑动条

作者: 一只浩子 | 来源:发表于2019-08-25 15:22 被阅读0次

    前言:UI设计的一个小需求,这个滑动条,和之前接触到的都不一样,我拿着需求去问,他就给我说了一个app,他需要的是这种效果。我去搜索了,看有没现成的codeDome,没有发现,后来仔细想了想就是scrollView的自带滑动条的实现,感觉思路对了就写了写。

    滑动录屏.gif

    1.思路

    1. 固定蓝条长度并计算出占灰条总长度比值
        // 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;
    
    1. 首先找到蓝条相对于灰条的相对滚动的参照。我是以scrollView.contentOffset.x 相对于屏外剩余宽度 invisibleWidth = (scrollView.contentSize.width - screenWidth) 的相对移动的距离为参照。整个滚动过程起始点是scrollView.contentOffset.x = 0,结束点是scrollView.contentSize.width,有了这个参照,我们就可以算出scrollView.contentOffset.x 滑动屏外剩余宽度的占比rate。
    2. rate = contentOffset.x/invisibleWidth 就是蓝条相对灰条移动的比值。
    3. 计算蓝条相对灰条左边间距。
        // 计算蓝色滑动条相对父view左边距离
        CGFloat leftSpace = rate * ((1 - self.slideRate) * self.size.width);
    

    这样蓝条就像手势一样正常滑动啦。
    Demo传送

    相关文章

      网友评论

          本文标题:类似scrollView的ScrollIndicator的滑动条

          本文链接:https://www.haomeiwen.com/subject/pvvhectx.html