iOS开发UI篇—Quartz2D使用(信纸条纹)
2023-09-27 14:28:40 时间
iOS开发UI篇—Quartz2D使用(信纸条纹)
一、前导程序
新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺。
1 #import "YYViewController.h" 2 3 @interface YYViewController () 4 5 @end 6 7 @implementation YYViewController 8 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.m 3 // 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.m 3 // 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中的界面布局
实现的简单效果:
相关文章
- IOS测试程序运行耗时
- 《iOS应用开发》——2.5节总结
- iOS开发UI篇—CALayer简介
- iOS开发UI篇—UITabBarController生命周期(使用storyoard搭建)
- iOS开发UI篇—UITabBarController简单介绍
- 文顶顶 iOS开发UI篇—UITabBarController简单介绍 iOS开发UI篇—UITabBarController简单介绍
- iOS开发除了XCode还需要掌握的8个重要工具,让您开发更容易
- iOS - OC 与 JS 交互六种方式总结
- OS开发小记:iOS富文本框架DTCoreText在UITableView上的使用
- iOS开发UI调试神器----Reveal
- 苹果十月清理近五万款废弃及劣质iOS软件
- iOS - Reveal逆向分析任意iOS应用的UI界面
- IOS开发之UI布局
- IOS学习资源收集--开发UI控件相关
- iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例
- iOS之UI--微博个人详情页
- iOS之UI--通讯录的实例关键知识技术点积累
- IOS之UI -- UITableView -- 2 -- 等高的Cell
- iOS之UI--CAShapeLayer
- iOS之UI--富文本总结
- IOS开发--仿制网易新闻
- iOS之UI--指示器HUD的创建和设置
- IOS之UI--自定义按钮实现代理监听点击事件
- IOS之UI--小实例项目--添加商品和商品名(纯代码终结版)
- iOS Reachability检测网络状态