你已经看够iOS鉴于这些默认的正方形块，整齐地显示？

本篇给出一个随机算法设计的三角布局的瓷砖和实施。

这样的规则，并提出妥协随机排列间。它看起来很凌乱，不会有一个新事物。

重点是设计和实施，以实现布局算法，能够改变颜色或者加入图片。

最新源码下载地址：https://github.com/duzixi/Varied-Layouts（持续维护。欢迎互粉）

博文首发地址：http://blog.csdn.net/duzixi

布局生成效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHV6aXhp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">       

核心算法设计以及代码实现例如以下：

//

//  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，请大家敬请期待