实现效果:
左侧有弧形区域的tableview,实现简单屏幕适配,可修改弧度和cell高度.
可增加中间cell最大,上下端cell依次变小的效果.
实现方式:
1.实现根据tableView.contentOffset.y获取偏移角度方法
2.获取屏幕中显示的cell,并在layoutSubviews方法中设置每个cell的偏移值
1.实现根据tableView.contentOffset.y获取偏移角度方法
/// 实现根据tableView.contentOffset.y获取偏移角度方法
func getAngleForYOffset(yOffset: CGFloat) -> CGFloat{
let shift: CGFloat = CGFloat(Int(self.contentOffset.y) % Int(self.rowHeight))
let percentage: CGFloat = shift / self.rowHeight
let angle_gap: CGFloat = CGFloat(.pi / Double(mTotalCellsVisible + 1))
var rows = 0
if yOffset < 0.0 {
rows = Int(fabsf(Float(yOffset)) / Float(self.rowHeight))
}
return CGFloat(fabsf(Float(angle_gap * (1.0 - percentage)))) + CGFloat(rows) * angle_gap
}
2.获取屏幕中显示的cell,并在layoutSubviews方法中设置每个cell的偏移值
func setupShapeFormationInVisibleCells(){
let indexpaths: Array = self.indexPathsForVisibleRows!
let totalVisibleCells = indexpaths.count
let angle_gap = CGFloat(.pi / Double(mTotalCellsVisible + 1))
let vRadius = (self.frame.size.height - self.rowHeight * 2.0) / 2.0
let hRadius = self.frame.size.height / 2.0
let radius = vRadius < hRadius ? vRadius : hRadius
/// 修改xRadius修改弧度
let xRadius = radius - 100
var firstCellAngle: CGFloat = self.getAngleForYOffset(yOffset: self.contentOffset.y)
for i in 0..<totalVisibleCells{
let cell: UITableViewCell = self.cellForRow(at: indexpaths[i] )!
var frame: CGRect = cell.frame
var angle = firstCellAngle
firstCellAngle += angle_gap
angle -= .pi/2
let x = xRadius * CGFloat(cosf(Float(angle)))
// 适配
frame.origin.x = x - 90 + (812 - UIScreen.main.bounds.height) * 95/145
// cell高度渐变效果,实现最中间的最大,上下逐渐变小
// frame.size.height = self.rowHeight * CGFloat(cosf(Float(angle * 0.6)))
if !x.isNaN {
cell.frame = frame
}
}
}
demo地址:ArcTableView.求star.
思路很简单,方法实现也很简单,复杂地方在于使用了部分三角函数知识,这个我也不擅长,参考自https://github.com/bharath2020/UITableViewTricks,有兴趣的同学可以自己了解下.
有问题欢迎探讨.!
|
请发表评论