你是否已经看够iOS里默认给出的那些方方正正的块状和规规矩矩的陈列?
本篇给出一种随机三角形平铺布局的算法设计和实现。这种布局在规矩与随机之间做了折中,使其看上去有新鲜感又不会很乱。
本次实现重点在于布局算法的设计和实现,可以改变颜色或者添加图片。
最新源代码下载地址:https://github.com/duzixi/Varied-Layouts(持续维护,欢迎互粉)
博文首发地址:http://blog.csdn.net/duzixi
布局生成效果如下:
核心算法设计以及代码实现如下:
// // TriangleViewController.m // TriangleLayout // // Created by 杜子兮(duzixi) on 14-8-24. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import "TriangleViewController.h" #import "Triangle.h" #import <QuartzCore/QuartzCore.h> #define PADDING 10 #define SIZE 100 #define COL (self.view.frame.size.width / SIZE) #define ROW (self.view.frame.size.height / SIZE) @interface TriangleViewController () @end @implementation TriangleViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. _randomPoints = [NSMutableArray array]; _triangles = [NSMutableArray array]; int oy = - SIZE / 2; for (int i = 0; i < ROW + 1; i++) { for (int j = 0; j < COL; j++) { int ox = (i % 2 == 1) ? j * SIZE : j * SIZE - 0.5 * SIZE; ox -= SIZE / 4; // step 1:画格子 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(ox, i * SIZE + oy, SIZE, SIZE)]; if ((j + i ) % 2 == 0) { view.backgroundColor = [UIColor grayColor]; } // [self.view addSubview:view]; // step 2:在格子中产生随机点 int x = arc4random() % (SIZE - PADDING * 2) + view.frame.origin.x + PADDING; int y = arc4random() % (SIZE - PADDING * 2) + view.frame.origin.y + PADDING; CGPoint p = CGPointMake(x, y); NSValue *v = [NSValue valueWithCGPoint:p]; [_randomPoints addObject:v]; UIView *pView = [[UIView alloc] initWithFrame:CGRectMake(p.x, p.y, 2, 2)]; pView.backgroundColor = [UIColor blueColor]; // [self.view addSubview:pView]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(p.x, p.y, 50, 20)]; label.text = [NSString stringWithFormat:@"%lu",(unsigned long)[_randomPoints count]]; // [self.view addSubview:label]; } } int k = 0; for (int i = 0; i < ROW; i++) { NSLog(@"-----------------"); for (int j = 0; j < COL - 1; j++) { // step 3: 俺三角形将点归类 k = i * COL + j + i; Triangle *t = [[Triangle alloc] init]; t.p1 = [_randomPoints[k] CGPointValue]; t.p2 = [_randomPoints[k + 1] CGPointValue]; int col = i % 2 == 0 ? COL : COL + 1; t.p3 = [_randomPoints[k + 1 + col] CGPointValue]; NSLog(@"%d %d %d", k , k + 1, k + 1 + col); [_triangles addObject:t]; // step 4: 生成三角形所在的矩形区域 int minX = t.p1.x < t.p2.x ? t.p1.x : t.p2.x; minX = minX < t.p3.x ? minX : t.p3.x; int minY = t.p1.y < t.p2.y ? t.p1.y : t.p2.y; minY = minY < t.p3.y ? minY : t.p3.y; int maxX = t.p1.x > t.p2.x ? t.p1.x : t.p2.x; maxX = maxX > t.p3.x ? maxX : t.p3.x; int maxY = t.p1.y > t.p2.y ? t.p1.y : t.p2.y; maxY = maxY > t.p3.y ? maxY : t.p3.y; k++; UIImageView *view = [[UIImageView alloc] initWithFrame:CGRectMake(minX, minY, maxX - minX, maxY - minY)]; view.backgroundColor = [UIColor orangeColor]; // step 5: 根据三角形生成蒙板 UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(t.p1.x - minX, t.p1.y - minY)]; [path addLineToPoint:CGPointMake(t.p2.x - minX, t.p2.y - minY)]; [path addLineToPoint:CGPointMake(t.p3.x - minX, t.p3.y - minY)]; [path closePath]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = [path CGPath]; view.layer.mask = maskLayer; [self.view addSubview:view]; } } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
// // Triangle.h // TriangleLayout // // Created by 杜子兮(duzixi) on 14-8-24. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import <Foundation/Foundation.h> @interface Triangle : NSObject @property (nonatomic, assign) CGPoint p1; @property (nonatomic, assign) CGPoint p2; @property (nonatomic, assign) CGPoint p3; @end
为了让大家看清布局过程,代码中保留了一些中间过程(注释掉了)。
打开注释即可看到格子,随机点等内容。
下一次的目标是将其改写成UICollectionView的Layout,请大家敬请期待
原文地址:http://blog.csdn.net/duzixi/article/details/38800669