【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" 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,请大家敬请期待
版权声明:本文博客原创文章。博客,未经同意,不得转载。
【iOS】随机三角瓷砖布局算法的更多相关文章
- 从 Auto Layout 的布局算法谈性能
这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...
- 6月27日 OGDF不同的布局算法
检查不同布局算法 备注 CircularLayout 可以非连通 FastMultipoleMultilevelEmbedder FMMMLayout 可以非连通 StressMajoriz ...
- Redesign Your App for iOS 7 之 页面布局
Redesign Your App for iOS 7 之 页面布局 http://www.vinqon.com/codeblog/?detail/11109
- 【转】iOS,搜索标签布局
前一阵时间,看过这样一个demo,代码不多,但是简洁易懂. 转自: // 代码地址: https://github.com/iphone5solo/PYSearch // 代码地址: http:/ ...
- IOS开发之绝对布局和相对布局(屏幕适配)
之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...
- IOS随机随学
1.Objective-C是一种面向对象的语言. 2.Objective-C类声明和实现包括两个部分:接口部分和实现部分. 3.Objective-C中方法不是在“.”运算符,而是采用“[]”运算符. ...
- iOS面试中常见的算法题目
一.前言 这里是在iOS求职中自己遇到的算法题,希望对大家有所帮助.不定期更新.如果大家想在线运行代码调试,可以将代码拷贝到这里.然后进行调试.下面就是常见的算法题目. 二.正文 1.就n的阶乘.(这 ...
- iOS开发~UI布局(三)深入理解autolayout
一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...
- iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
随机推荐
- NET实现的DDD、CQRS与微服务架构
WeText项目:一个基于.NET实现的DDD.CQRS与微服务架构的演示案例 最近出于工作需要,了解了一下微服务架构(Microservice Architecture,MSA).我经过两周业余时间 ...
- jquery在元素上收购事件
jquery的给元素绑定的事件能够用data方法取出来 通过$(element).data("events")来获取 // 比方给一个button绑定两个click事件 $(&qu ...
- HADOOP2.6
LINUX下HADOOP2.6.0集群环境的搭建 本文旨在提供最基本的,可以用于在生产环境进行Hadoop.HDFS分布式环境的搭建,对自己是个总结和整理,也能方便新人学习使用. 基础环境 JDK的安 ...
- WebService开启远程测试
WebService部署成站点之后,如果在本地测试webservice的接口可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或者"The test form is only a ...
- asp.net EF6.0中出现未找到具有固定名称“System.Data.SqlClient”的 ADO.NET提供程序的实体框架提供程序解决办法
出现的错误信息如下所示: 指定的架构无效.错误: DataModel.ssdl(2,2) : 错误 0152: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提 ...
- shell 脚本之if、for、while语句
(1)if语句 root@ubuntu:/mnt/shared/shellbox/shellif# cat shellif.sh #!/bin/bash #推断字符串 if [ "$1&qu ...
- HTML中的div标签
在网页制作过程过中,能够把一些独立的逻辑部分划分出来.放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 为了使逻辑更加清晰,我们能够为这一个独立的逻辑部分设 ...
- Struts2 开发环境搭建
一.开发环境 eclipse+tomcat+struts-2.2.3 eclipse下载地址:http://www.eclipse.org/downloads/ tomca ...
- WPF界面设计技巧(10)-样式的继承
原文:WPF界面设计技巧(10)-样式的继承 PS:现在我的MailMail完工了,进入内测阶段了,终于可以腾出手来写写教程了哈,关于MailMail的介绍及内测程序索取:http://www.cnb ...
- cfa,cpa,
CFA考试内容分为三个不同级别,分别是方式是Level I.Level II和Level III. 考试在全球各个地点统一举行,每个考生必须依次完成三个不同级别的考试.CFA资格考试采用全英文,候选人 ...