自定义 ---UICollectionViewLayout-正N变形居中布局
1. 自定义UICollectionLayout ---- 正三角形居中布局
支持多个图形的自动布局

2. 自定义UICollectionLayout ---- 正方形居中布局

滚动展示的区域

3. 自定义UICollectionLayout ---- 正六边形居中布局(蜂窝布局)

等等正n变形布局,其中 正六边形支持 间距大小的改变,图形的旋转。

旋转 --

间距

4. 核心代码 ---- 绘制正n边形 (贝塞尔曲线)
- (void)layoutSubviews
{
[super layoutSubviews];
// step 1: 绘制正n变形
CGFloat X = self.contentView.frame.size.width * 0.5;
CGFloat Y = self.contentView.frame.size.height * 0.5;
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
bezierPath.lineCapStyle = kCGLineCapRound;
bezierPath.lineJoinStyle = kCGLineCapRound;
CGFloat angle = labs(360/self.number);
[bezierPath moveToPoint: CGPointMake(X - mm , Y)];
for (int i = 0; i < self.number - 1; i ++) {
CGFloat angle1 = angle *(i + 1);
CGFloat XX = X + (mm * (COS(angle1)))*(-1);
CGFloat YY = Y + mm * (SIN(angle1));
[bezierPath addLineToPoint: CGPointMake(XX, YY)];
}
[bezierPath addLineToPoint: CGPointMake(X - mm , Y)];
// step 2: 根据路径生成蒙板
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [bezierPath CGPath];
self.backgroundColor = [UIColor redColor];
// step 3: 给cell添加模版
self.layer.mask = maskLayer;
self.titleLabel.frame = self.bounds;
}
5. 核心代码 --- 自定义Layout布局
- (void)prepareLayout
{
[super prepareLayout];
_itemCount = [self.collectionView numberOfItemsInSection:];
_attributeAttay = [[NSMutableArray alloc]init];
; i < _itemCount; i ++) {
//设置第一个正六边形的中心位置
CGFloat X = self.collectionView.frame.size.width*0.5;
CGFloat Y = self.TopMargin;
== ? -:i%;
== ? :i%;
X += CST(-num)*([self judgeXWithNumber:self.number]);
Y += ([self judgeSizeWithNumber:self.number].height + self.margin)*(i/) + CST(num2)*([self judgeSizeWithNumber:self.number].height/)+self.margin;
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForRow:i inSection:]];
// 设置每隔item的大小
attribute.size = [self judgeSizeWithNumber:self.number];
// 设置每隔item的圆心
// 计算每个item的中心坐标
attribute.center = CGPointMake(X, Y);
[_attributeAttay addObject:attribute];
}
}
// X轴方向的间隔
- (CGFloat)judgeXWithNumber:(NSInteger)xNumber
{
) {
/xNumber)*mm;
}
)
{
/xNumber)*mm;
}
)
{
/xNumber)*mm - ;
}
)
{
/xNumber)*mm;
}
)
{
/xNumber)*mm;
}
else
{
*mm + self.margin ;
}
}
// 就算正n变形的大小
- (CGSize)judgeSizeWithNumber:(NSInteger)sNumber
{
|| sNumber == ) {
*mm,*SIN(/sNumber)*mm);
}
else
{
*(mm),*mm);
}
}
//设置内容区域的大小
-(CGSize)collectionViewContentSize
{
CGFloat hh = [self judgeSizeWithNumber:self.number].height;
CGFloat height = (hh+self.margin)*(self.itemCount/ + ) + self.TopMargin + ;
if (height > Device_height) {
height = height;
}
else
{
height = Device_height;
}
return CGSizeMake(Device_width, height);
}
//返回设置数组
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return _attributeAttay;
}
View Layout
自定义 ---UICollectionViewLayout-正N变形居中布局的更多相关文章
- 自定义UICollectionViewLayout 布局实现瀑布流
自定义 UICollectionViewLayout 布局,实现瀑布流:UICollectionView和UICollectionViewCell 另行创建,这只是布局文件, 外界控制器只要遵守协议并 ...
- iOS 关于自定义UICollectionViewLayout实现复杂布局
UICollectionView的简单介绍 UICollectionView的结构 Cells Supplementary Views 追加视图 (类似Header或者Footer) Decorati ...
- 自定义UICollectionViewLayout并添加UIDynamic - scorpiozj(转)
转载自:http://www.tuicool.com/articles/jM77Vf 自定义UICollectionViewLayout并添加UIDynamic UICollectionVie ...
- 自定义UICollectionViewLayout并添加UIDynamic
大家也可以到这里查看. UICollectionView是iOS6引入的控件,而UIDynamicAnimator是iOS7上新添加的框架.本文主要涵盖3部分: 一是简单概括UICollectionV ...
- 自定义UICollectionViewLayout 实现瀑布流
今天研究了一下自定义UICollectionViewLayout. 看了看官方文档,要自定义UICollectionViewLayout,需要创建一个UICollectionViewLayout的子类 ...
- 自定义UICollectionViewLayout之CATransform3D
1.自定义UICollectionViewLayout旋转效果 之前有自定义UICollectionViewLayout(适用于多个section),本文是一个对cell进行CATransform3D ...
- CSS居中布局总结【转】
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- CSS居中布局总结
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- sass—使用自定义function和@each实现栅格布局
/*使用自定义function和@each实现栅格布局*/ @function buildLayout($num: 5){ $map: (defaultValue: 0); //不能直接生成col,需 ...
随机推荐
- 流程控制 if-while-for -语句
if 语句是用来判断条件的真假,是否成立,如果为ture就执行,为flase则跳过 1.python用缩进表示代码的归属 2.同一缩进的代码,称之为代码块,默认缩进4个 if 语句结构 ...
- maven隐含依赖
1.有时候,我们在pom.xml依赖了2个jar包,不过在工程lib里看到依赖包多于2个,这是为什么呢?原因是maven引入一个jar时,会连带引入这个jar包依赖的jar包,除非在配置引入这个jar ...
- 吴裕雄--天生自然python学习笔记:python 用 Open CV抓取摄像头视频图像
Open CV 除了可以读取.显示静态图片外 , 还可 以加载及播放动态影片, 以 及 读取内置或外接摄像头的图像信息 . 很多笔记本电脑都具有摄像头 , OpenCV 可通过 VideoC aptu ...
- How Cocoa Beans Grow And Are Harvested Into Chocolate
What is Cocoa Beans Do you like chocolate? Most people do. The smooth, brown candy is deliciously sw ...
- Nginx的下载与安装
.创建文件输入网页中需要复制的 cat >/etc/yum.repos.d/nginx.repo<<EOF [nginx-stable] name=nginx stable repo ...
- Python常用的数据结构详解
数据结构:通俗点说,就是储存大量数据的容器.这里主要介绍Python的4种基本数据结构:列表.字典.元组.集合. 格式如下: 列表:list = [val1,val2,val3,val4],用中括号: ...
- xpath-helper 插件下载
链接:https://pan.baidu.com/s/1YuTGrdwwAKQd2sIcuarBHQ 提取码:qb8p
- Serializable 接口(序列化)
目录 Serializable 接口(序列化) 前言 用途 如何实现 异常 serialVersionUID transient关键字 Serializable 接口(序列化) 前言 查看API文档时 ...
- Qt static关键字全局变量
创建全局变量.h文件 globalvariable.h #ifndef GLOBALVARIABLE_H #define GLOBALVARIABLE_H #include <QImage> ...
- t分布|F分布|点估计与区间估计联系|
应用统计学 推断统计需要样本形容总体,就要有统计量.注意必须总体是正态分布,否则统计量的分布不能得到.卡方分布和t分布只要样本大于30都近似于正态分布. t分布和F分布推导及应用(图): 总体比例是π ...