zoukankan      html  css  js  c++  java
  • 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)

    目录:

    1. Storyboard

    2. Views

    3. View的基本概念介绍

    4. 绘制图形

    5. UIBezierPath

    回到顶部

    1. Storyboard

     

          1.1 静态表视图

               1)Section可以增加、删除、修改头脚文字

               2)Cell可以增加、删除、调整类型、修改文字、修改辅助视图类型

               3)  自定义accessoryView:

                     将需要做辅助视图的控件拖拽到VC下的小黑条

                     选择Cell,第6个检查器,连线accessoryView到小黑条上的控件

               4)自定义Cell  

                     拖拽一个Cell或选择一个已有的Cell

                     检查器4中将Style设置为Custom

                     拖拽需要的控件到Cell中

               5) 调整TableView的高度

                     选择场景, 检查器4  Size-->freeForm

                     从左侧选择TableView, 检查器5  View-->Height 修改此值

               6) 增加Cell

                     从右侧对象库中拖拽一个Cell到TableView

               7) 头视图

                     tableView.tableHeaderView

                     直接拖拽一个视图到表头

               8) 复制Cell

                     Command+C Command+V

               9) 跳转

                     选中你要从哪个Cell跳转

                     直接拉线到新的场景

               10)需要增加自定义Cell中的控件代码时,需要再定义一个类

                     1>定义TableViewController类,继承UITableViewController

                     2>删除datasource和delegate协议规定的所有相关方法,否则不会显示静态的Cell

                     3>选择场景,在检查器3绑定类

                     4>增加Cell中的控件需要的代码(连接属性,定义方法)

          1.2 动态表视图

               1) 系统Cell原型

                     拖拽一个TableViewController后,选择Cell原型,在Style中选择一种系统样式(总共有4种)

                     给原型起名字: identifier属性

                     在代码中dequeue时,使用起的名字即可,保证一定会成功创建Cell对象

               2) 自定义Cell原型

                     1>创建时和系统原型做法一样,但是Style选择Custom

                     2>定义一个Cell类,在检查器3中绑定这个类

                     3>根据实际需要拖拽自定义的控件到类中形成属性

                     4>给自定义的Cell起名, identifier属性

                     5>创建TableViewController类, 将场景绑定到此类

                     6>在TableViewController中就可以dequeue自定义的Cell用了

               3) 混合Cell原型

                     在一个TableView中存在多个Cell原型, 这些原型可以是系统原型,也可以是自定义原型

          自定义Cell在Storyboard中仅限于当前TableView使用,如果在其他TableView中重用的话,就需要拷贝。

          有时候,一个自定义的Cell希望在多个场景中使用,那么就将此Cell单独定义成xib文件。

    回到顶部

    2. Views

          绘制   quartz 2D

               底层图形绘制技术,功能强大,难以掌握,不是面向对象,全部都是C语言API

          贴图  美化

          手势

          变形

          布局

          动画

    回到顶部

    3. View的基本概念介绍

          3.1 view层主要负责

                     根据Controller的配置,提供显示界面

                     负责和用户交互

          3.2 图型和图像

               显示器

                     上面有很多显像晶体,每一个晶体可以显示三种颜色(红绿蓝)

                     三种颜色的亮度不同,会合成各种不同的颜色

                     有1280x800个显像晶体,显示器支持的像素1280x800

     

           像素: 一张图片的像素3200x2000

                     这张图片有3200x2000个颜色信息

     

                     R   0~255     1Byte    100

                     G  0~255     1Byte    150

                     B   0~255     1Byte    200

              

                     3200x2000x3Byte

     

          图像划分:

                     位图(bitmap), 点阵图

                                可以用一个二维数组来保存数据

                                RGB组成每一个点

                                有自己的分辨率, 放大后就能看到点

                                这种图一般会进行压缩: png(无损压缩),jpg(有损压缩),gif,bmp(不压缩)

     

                     矢量图

                          一般是几何图形, 曲线,直线,圆,半径, 阴影

                          可以用代码写出这种图

                          放大和缩小不会失真

                          quartz 2D

     

    回到顶部

    4. 绘制图形

          4.1 绘制代码写在View中

                     Controller      ---->   viewDidLoad

                     View             ---->   drawRect

                     需要自己写视图类,覆盖drawRect方法,在此方法中进制绘制

          4.2 绘制的基本步骤:

                1) 获取画布

                1.5) 保存上下文状态

                2) 勾勒

                3) 着色

                3.5)恢复上下文状态

     1     // 1.获取画布
     2 
     3     CGContextRef context = UIGraphicsGetCurrentContext();
     4 
     5     CGContextSaveGState(context); // 保存目前上下文状态
     6 
     7    
     8 
     9     // 2.勾勒
    10 
    11     CGContextMoveToPoint(context, 100, 100);
    12 
    13     CGContextAddLineToPoint(context, 100, 200);
    14 
    15     CGContextAddLineToPoint(context, 200, 100);
    16 
    17     CGContextAddLineToPoint(context, 100, 100);
    18 
    19    
    20 
    21     // 3.着色
    22 
    23     [[UIColor redColor] setFill]; // 设置填充颜色
    24 
    25     [[UIColor greenColor] setStroke]; // 设置描边颜色
    26 
    27     CGContextDrawPath(context, kCGPathFillStroke);
    28 
    29    
    30 
    31     // 恢复状态
    32 
    33     CGContextRestoreGState(context);

               [Demo3]

                     拖拽一个UIView到view里,然后将UIView的类型设置成我们自己的TRView类型。

     

               注意: drawRect方法永远是自动调用的,程序员不能主动去调用drawRect方法。

                     如果需要刷新界面, 向view发消息:setNeedDisplay, 系统会去调用drawRect方法进行界面的重新显示。

     

    回到顶部

    5. UIBezierPath

          5.1 Bezier  贝塞尔曲线

          5.2 干什么用

               用于包装绘制的C语言API,使之成为面向对象代码

          5.3frame 和bounds初步

               frame 代表一个视图的坐标,此坐标保存了相对于父视图的位置

               bounds代表一个视图自身的坐标

               一般情况下,bounds中的size和frame中的size相同,而bounds中的origin永远为0

          5.4 UIBezierPath中的三个属性:

                     .lineWidth          线宽

                     .lineCapStyle   线终点的风格

                     .lineJoinStyle    两条线连接的风格

     1     CGContextRef context = UIGraphicsGetCurrentContext();
     2 
     3     CGContextSaveGState(context);
     4 
     5    
     6 
     7     // 贝塞尔曲线
     8 
     9     UIBezierPath *path = [UIBezierPath bezierPath];
    10 
    11     [path moveToPoint:CGPointMake(100, 100)];
    12 
    13     [path addLineToPoint:CGPointMake(100, 200)];
    14 
    15     [path addLineToPoint:CGPointMake(200, 100)];
    16 
    17     [path addLineToPoint:CGPointMake(100, 100)];
    18 
    19    
    20 
    21     [[UIColor redColor] setFill];
    22 
    23     [[UIColor greenColor] setStroke];
    24 
    25     [path fill];
    26 
    27     [path stroke];
    28 
    29    
    30 
    31     CGContextRestoreGState(context);

          5.5 画弧线

     1 - (void)drawRect:(CGRect)rect
     2 
     3 {
     4 
     5     // Drawing code
     6 
     7     [super drawRect:rect];
     8 
     9     CGContextRef context = UIGraphicsGetCurrentContext();
    10 
    11     CGContextSaveGState(context);
    12 
    13 
    14     UIBezierPath *path = [UIBezierPath bezierPath];
    15 
    16     [path moveToPoint:CGPointMake(10, 10)];
    17 
    18     [path addLineToPoint:CGPointMake(10, self.bounds.size.height - 10)];
    19 
    20     [path addLineToPoint:CGPointMake(self.bounds.size.width - 10, 10)];
    21 
    22     //[path closePath];
    23 
    24 
    25     [[UIColor redColor] setFill];
    26 
    27     [[UIColor blueColor] setStroke];
    28 
    29     path.lineWidth = 10;
    30 
    31     path.lineJoinStyle = kCGLineJoinRound;
    32 
    33     path.lineCapStyle = kCGLineCapRound;
    34 
    35 
    36     [path fill];
    37 
    38     [path stroke];
    39 
    40     CGContextRestoreGState(context);
    41 }

    作业:

          1. 画一个圆角矩形

               四个圆角的半径必须一样

     1     // 圆角巨型
     2 
     3     [super drawRect:rect];
     4 
     5     CGContextRef context = UIGraphicsGetCurrentContext();
     6 
     7     CGContextSaveGState(context);
     8 
     9     UIBezierPath *path = [UIBezierPath bezierPath];
    10 
    11     [path addArcWithCenter:CGPointMake(105, 105) radius:5 startAngle:M_PI endAngle:M_PI * 1.5 clockwise:YES];
    12 
    13     [path moveToPoint:CGPointMake(105, 100)];
    14 
    15     [path addLineToPoint:CGPointMake(195, 100)];
    16 
    17     [path addArcWithCenter:CGPointMake(195, 105) radius:5 startAngle:M_PI *1.5 endAngle:M_PI * 2 clockwise:YES];
    18 
    19     [path addLineToPoint:CGPointMake(200, 155)];
    20 
    21     [path addArcWithCenter:CGPointMake(195, 155) radius:5 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    22 
    23     [path addLineToPoint:CGPointMake(105, 160)];
    24 
    25     [path addArcWithCenter:CGPointMake(105, 155) radius:5 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
    26 
    27     [path addLineToPoint:CGPointMake(100, 105)];
    28 
    29     [[UIColor redColor] setStroke];
    30 
    31     [path stroke];
    32 
    33     CGContextRestoreGState(context);
  • 相关阅读:
    【Web-Components】document.registerElement
    Date
    类型转换
    【Web-Components】HTML imports
    【Web-Components】
    【Web-Components】Shadow Dom
    【Mobile】
    数据库读写分离
    HDU——T 1711 Number Sequence
    洛谷——P2957 [USACO09OCT]谷仓里的回声Barn Echoes
  • 原文地址:https://www.cnblogs.com/yangmx/p/3526181.html
Copyright © 2011-2022 走看看