zoukankan      html  css  js  c++  java
  • 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中的界面布局

    实现的简单效果:

           

  • 相关阅读:
    智能移动机器人背后蕴含的技术——激光雷达
    Kalman Filters
    Fiddler抓HttpClient的包
    VSCode开发WebApi EFCore的坑
    WPF之小米Logo超圆角的实现
    windows react打包发布
    jenkins in docker踩坑汇总
    Using ML.NET in Jupyter notebooks 在jupyter notebook中使用ML.NET ——No design time or full build available
    【Linux知识点】CentOS7 更换阿里云源
    【Golang 报错】exec gcc executable file not found in %PATH%
  • 原文地址:https://www.cnblogs.com/LifeTechnologySupporter/p/9774828.html
Copyright © 2011-2022 走看看