演示事例 – 联系星球

完成作用：

【iOS】基于UIScrollView实现的圆环转盘效果

需求布景

单个星球会有0~15个联系用户，每个用户以星球中点为圆心盘绕摆放，星球只展示一半，并且能上下拖动查看更多用户，如图所示：

【iOS】基于UIScrollView实现的圆环转盘效果

完成方案

1. 坐标核算

从设计图可得知，半边星球最多展示6个用户，一圈360，半圈180，也便是多个用户顺次相隔30盘绕星球中心摆放。

已知圆心、半径、每个用户的弧度，经过三角函数就可以核算出每个用户的（初始）坐标了：

let centerX: CGFloat = circlePoint.x + radius * cos(radian)
let centerY: CGFloat = circlePoint.y + radius * sin(radian)

2. 手指滚动

现在每个用户的方位都可以确认了，还需要经过手指进行滚动。

既然是用手指进行滚动，是不是加个UIPanGestureRecognizer然后改动弧度就可以完成滚动了呢？

是可以，只不过只能单纯滚动，没有任何惯性，作用很是僵硬，尽管也可以经过一些数学公式完成惯性作用，不过对于我来说过于杂乱且不好操控，所以作罢。

那UIKit里面有没有这种惯性拖动的控件呢？— 很明显，UIScrollView自带惯性作用，这能满足我的需求。

首要，想要UIScrollView能够拖动，就得设置一个比它本身Size还要大的contentSize，至于要设置多高的contentSize（这儿需求是笔直方向，因而只需要设置contentSize.height即可）才合适呢？

由设计图可得知，星球一圈最多12个，半圈则是6个，也便是说，contentSize.height等于1个星球高度时可包容6个用户，等于2个星球高度可包容12个用户，也便是刚好包容一圈用户所需的内容高度。所以均匀一个用户占用内容高度为planet.height / 6，很好，这样不管有多少个用户，都可以动态设置contentSize.height了。

contentSize.height = (planet.height / 6) * CGFloat(peopleViews.count)

确认好contentSize.height了，接下来该如何经过拖拽进行滚动呢？

既然现已知道了包容一圈用户所需的内容高度，也知道了一个用户的占用内容高度和视点，那就可以依据当时偏移量和包容一圈用户的内容高度，算出滚动百分比，有了这个滚动百分比，去改写所有用户的当时滚动方位了。

let radian360 = CGFloat.pi * 2
let radian90 = CGFloat.pi / 2
let singlePeopleRadian = radian360 / 12.0
let oneRoundContentHeight = planet.frame.height * 2
let offsetY = scrollView.contentOffset.y
let progress = offsetY / oneRoundContentHeight
peopleViews.forEach { peopleView in
    let index = peopleView.tag
    // 弧度
    var radian: CGFloat = singlePeopleRadian * CGFloat(index) - radian90 // iOS的0为水平方位，-90为了回去会笔直方位
    radian -= progress * radian360 // 逆时针滚动，相减
    // 中点
    let centerX: CGFloat = circlePoint.x + radius * cos(radian)
    let centerY: CGFloat = circlePoint.y + radius * sin(radian)
    // 加上offsetY是为了让所有用户滚动时能保持在scrollView的显现区域内
    peopleView.center = CGPoint(x: centerX, y: offsetY + centerY)
}

其他需求

有了这个滚动百分比，剩下的需求就很容易完成了，例如操控姓名的渐变显现、只显现右半屏的用户等，这些都是给定一个限值，然后依据百分比渐渐改写的事情，这儿就不赘述了。

【iOS】基于UIScrollView实现的圆环转盘效果

优化

  1. 复用机制【已完成】：从视觉上，一个屏幕也就最多显现6~7个联系用户，那就可以参阅UITableView的做法，运用一个调集当作联系用户的缓存池，滚动过程中，但转出显现规模（半屏）就把该视图丢进缓存池，然后下一个用户行将显现时则从缓存池里取出来。最多只需要创建8个联系用户视图，即可完成无数个用户的滚动作用，大大减少CPU的核算量。

【iOS】基于UIScrollView实现的圆环转盘效果

  1. 动态刺进/删除【未完成】：如果用整体改写的动画来进行刺进/删除，更新只会以两个用户之间的直线轨迹进行位移动画，这不符合转盘的形式，需加入圆弧动画，现在暂未完成，将日后供给。

Demo

下载地址：TurntableView-Demo

  • 供给了调试功能，以便更好了解。