iOS开发UI篇—Quartz2D使用(信纸条纹)


一、前导程序

新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺。

 1 #import "YYViewController.h"2 3 @interface YYViewController ()4 5 @end6 7 @implementation YYViewController8 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12
13     UIImage *image=[UIImage imageNamed:@"me"];
14     UIColor *color=[UIColor colorWithPatternImage:image];
15     self.view.backgroundColor=color;
16 }
17
18 @end

效果:

二、实现信纸条纹的效果

利用上面的这种特性来做一个信纸的效果。
默认的view上没有分割线,要在view上加上分割线有两种方式:
(1)让美工做一张专门用来做背景的图片,把图片设置为背景。缺点:信的长度不确定,所以背景图片的长度也难以确定。
(2)通过一张小的图片来创建一个颜色,平铺实现背景效果。
第一步:生成一张以后用以平铺的小图片。
画矩形。
画线条。
第二步:从上下文中取出图片设置为背景。黑乎乎一片?(其他地方时透明的,控制器的颜色,如果不设置那么默认为黑色的)
实现代码:
 1 //2 //  YYViewController.m3 //  01-信纸条纹4 //5 //  Created by 孔医己 on 14-6-11.6 //  Copyright (c) 2014年 itcast. All rights reserved.7 //8 9 #import "YYViewController.h"
10
11 @interface YYViewController ()
12
13 @end
14
15 @implementation YYViewController
16
17 - (void)viewDidLoad
18 {
19     [super viewDidLoad];
20
21
22     // 1.生成一张以后用于平铺的小图片
23     CGSize size = CGSizeMake(self.view.frame.size.width, 35);
24     UIGraphicsBeginImageContextWithOptions(size , NO, 0);
25
26     // 2.画矩形
27     CGContextRef ctx = UIGraphicsGetCurrentContext();
28     CGFloat height = 35;
29     CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
30     [[UIColor whiteColor] set];
31     CGContextFillPath(ctx);
32
33     // 3.画线条
34
35     CGFloat lineWidth = 2;
36     CGFloat lineY = height - lineWidth;
37     CGFloat lineX = 0;
38     CGContextMoveToPoint(ctx, lineX, lineY);
39     CGContextAddLineToPoint(ctx, 320, lineY);
40     [[UIColor blackColor] set];
41     CGContextStrokePath(ctx);
42
43
44     UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
45     UIColor *color=[UIColor colorWithPatternImage:image];
46     self.view.backgroundColor=color;
47 }
48
49 @end

效果:

三、应用场景

完成一个简陋的电子书阅读器

代码:

 1 //2 //  YYViewController.m3 //  01-信纸条纹4 //5 //  Created by 孔医己 on 14-6-11.6 //  Copyright (c) 2014年 itcast. All rights reserved.7 //8 9 #import "YYViewController.h"
10
11 @interface YYViewController ()
12
13 @property (weak, nonatomic) IBOutlet UITextView *textview;
14 - (IBAction)perBtnClick:(UIButton *)sender;
15 - (IBAction)nextBtnClick:(UIButton *)sender;
16 @property(nonatomic,assign)int index;
17 @end
18
19 @implementation YYViewController
20
21 - (void)viewDidLoad
22 {
23     [super viewDidLoad];
24
25
26     // 1.生成一张以后用于平铺的小图片
27     CGSize size = CGSizeMake(self.view.frame.size.width, 26);
28     UIGraphicsBeginImageContextWithOptions(size , NO, 0);
29
30     // 2.画矩形
31     CGContextRef ctx = UIGraphicsGetCurrentContext();
32     CGFloat height = 26;
33     CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
34     [[UIColor brownColor] set];
35     CGContextFillPath(ctx);
36
37     // 3.画线条
38
39     CGFloat lineWidth = 2;
40     CGFloat lineY = height - lineWidth;
41     CGFloat lineX = 0;
42     CGContextMoveToPoint(ctx, lineX, lineY);
43     CGContextAddLineToPoint(ctx, 320, lineY);
44     [[UIColor blackColor] set];
45     CGContextStrokePath(ctx);
46
47
48     UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
49     UIColor *color=[UIColor colorWithPatternImage:image];
50     //self.view.backgroundColor=color;
51     self.textview.backgroundColor=color;
52 }
53
54 - (IBAction)perBtnClick:(UIButton *)sender {
55     self.index--;
56     self.textview.text=[NSString stringWithFormat:@"第%d页",self.index];
57     CATransition *ca = [[CATransition alloc] init];
58     ca.type = @"pageCurl";
59
60     [self.textview.layer addAnimation:ca forKey:nil];
61
62 }
63
64 - (IBAction)nextBtnClick:(UIButton *)sender {
65     self.index++;
66     self.textview.text=[NSString stringWithFormat:@"第%d页",self.index];
67     CATransition *ca = [[CATransition alloc] init];
68     ca.type = @"pageCurl";
69
70     [self.textview.layer addAnimation:ca forKey:nil];
71 }
72 @end

storyboard中的界面布局

实现的简单效果:

       

转载于:https://www.cnblogs.com/LiLihongqiang/p/5766607.html

iOS开发UI篇—Quartz2D使用(信纸条纹)相关推荐

  1. iOS开发UI高级—26Quartz2D使用(信纸条纹)

    iOS开发UI篇-Quartz2D使用(信纸条纹) 一.前导程序 新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺. 1 #import "YYViewCon ...

  2. iOS开发UI篇—Quartz2D使用(绘图路径)

    iOS开发UI篇-Quartz2D使用(绘图路径) 一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepat ...

  3. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

  4. iOS开发UI篇—Quartz2D使用(绘制基本图形)

    一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以 ...

  5. iOS开发UI篇—Quartz2D使用(矩阵操作)

    一.关于矩阵操作 1.画一个四边形 通过设置两个端点(长和宽)来完成一个四边形的绘制. 代码: 1 - (void)drawRect:(CGRect)rect 2 { 3 //画四边形 4 //获取图 ...

  6. android tableview实现多选功能,iOS开发UI篇-tableView在编辑状态下的批量操作(多选)...

    先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...

  7. iOS开发UI篇—transframe属性(形变)

    iOS开发UI篇-transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...

  8. iOS开发UI篇—多控制器和导航控制器简单介绍

    iOS开发UI篇-多控制器和导航控制器简单介绍 一.多控制器 一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理 有多个vi ...

  9. iOS开发UI篇—UIWindow简单介绍

    iOS开发UI篇-UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...

最新文章

  1. python简单爬虫程序分析_[Python专题学习]-python开发简单爬虫
  2. [ARM-assembly]-ARMv8-A64指令集总结和学习
  3. agent docker zabbix_docker部署zabbix
  4. hdu 2896 病毒侵袭(AC自动机)
  5. js函数中的参数的个数
  6. python库和模块的区别_在函数中导入python库与全局导入之间有何区别?
  7. 依赖注入_set方法注入_构造器注入
  8. spring(7)spring mvc 的高级技术
  9. eclipse linux windows 乱码,Ubuntu下Eclipse打开Windows下的工程文件乱码解决办法
  10. kerberos验证_SQL Server中的服务主体名称和Kerberos身份验证概述
  11. 爬虫入门之绘图matplotlib与词云(七)
  12. 【java笔记】类/接口作为成员变量类型
  13. sql server 查询数据库所有的表名+字段
  14. GetRows的用法详解
  15. 李广难封--有感于团队建设
  16. Eclipse中查看源代码
  17. c语言关键字之auto
  18. 泳道流程图:跨职能流程图
  19. 卡巴斯基实验室被攻陷后的四个未解之谜
  20. 18 打印日期 华科复试

热门文章

  1. 什么是SQL?3个字讲明白
  2. 复试面试-数据库面试题
  3. 路径是否存在 如果不存在则创建此路径
  4. web前端 --- HTML基础
  5. identifier of an instance of was altered from to null
  6. 领域驱动设计之设计原则篇
  7. Vue-nginx反向代理
  8. 数据库学习计划——learning plan
  9. oracle中计算两个日期之间得天数、月数、年数以及结合使用常用函数
  10. CMD中获取命令返回值