【iOS】隨機三角瓷磚布局演算法

標籤：

你已經看夠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" >       

核心演算法設計以及代碼實現例如以下：

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

著作權聲明：本文部落格原創文章。部落格，未經同意，不得轉載。

【iOS】隨機三角瓷磚布局演算法