因项目需求首页做一个圆形菜单 一级二级都是圆形,首先网上寻找了很多相似的demo,始终达不到项目要求,索性自己写一个。先上效果图
有两种方法创建圆形布局
1.for循环创建
2.利用collectionView
我这里利用collectionView,因为刷新数据方便
首先我们先自定义layout 在.m中如下(一级菜单和二级菜单都要自定义layout)
自定义layout是创建圆形菜单的关键步骤 attibutes.size是collectionViewCellItem的尺寸,所有item围绕collectionView的中点也就是途中的center,在利用三角函数计算出每个item的中点位置。
剩下自定cell就按照需求放上图片和文字即可。在一级菜单中吧点击cell的事件传递出来
必须带上rect 这个rect就是点击的那个cell的rect 我们用她来告诉二级菜单 圆形要在什么位置上
在上诉的代理中将传递过来的rect 传给二级菜单 二级菜单这里我自定义了一个弹窗view 。背景搞个蒙版然后在蒙版上创建圆形的view 在圆形的view上放第二个collectionView
在二级view重写setrect方法 计算出圆形view的位置
这样每次点击都会根据我点的一级菜单的cell位置 弹出二级菜单并且二级菜单的中点跟随我点击那个cell中点
附上demo:https://github.com/FormerMonster/JCCircularMenu
网友评论