前面写过一篇关于圆弧菜单的文章,但是那篇文章里介绍的方法太简单粗暴,并不适合大数据量的载入。后来又通过UICollectionView的流水布局+圆方程重新实现一遍。计算公式在代码里。
思路大致是,(这个是出发点,可以看一下)
UICollectionView创建一个类似tableView的列表,每个cell的y值是固定的,我在屏幕左边画一个圆,这些cell就类似直线,肯定会有和圆相交的地方,通过圆的方程和直线方程代入计算,就可以求出相交点x值。
下面看一下代码:
/// 因为item的x值随范围变化而实时变化,在-prepareLayout方法里计算缓存已经无用;
/// 需要在下述方法里亲自计算来返回布局对象数组
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
NSArray<UICollectionViewLayoutAttributes *> *attributesArray = [super layoutAttributesForElementsInRect:rect];
CGPoint contentOffset = self.collectionView.contentOffset;
//垂直滚动
CGFloat height = LYSCreenHeight - LYNavigationBarHeight() - LYTabbarHeight();
// 每个点根据距离中心点距离进行缩放
[attributesArray enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * _Nonnull attri, NSUInteger idx, BOOL * _Nonnull stop) {
CGRect myRect = attri.frame;
/*
*圆心和直线相交的计算公式
基本公式:(x-a)*(x-a) + (y-b)*(y-b) = r * r;
推导结果:x = sqrt(powf(r,2) - powf((y-b),2))+a;
开根号不可有负数,开之前判断一下
*/
///radius是半径,y是获取当前cell所在屏幕的y值,a是圆心的x值,b是圆心的y值
CGFloat radius = height/2 + 120;
//减去contentOffset.y是因为collectionView的y轴偏移量
CGFloat y = myRect.origin.y - contentOffset.y;
CGFloat b = height/2-50;
CGFloat a = -self.collectionView.bounds.size.width*0.65 - 100;
CGFloat sqNum = (powf(radius,2) - powf((y - b),2)) > 0 ? (powf(radius,2) - powf((y - b),2)):0;
CGFloat X = sqrt(sqNum) + a;
myRect.origin.x = X;
attri.frame = myRect;
}];
return attributesArray;
}
主要逻辑在这个方法里,其他方法与网上实现瀑布流的类似
网友评论