iOS 笔记四：视图坐标、层次结构、自定义视图、UIBezierPath等

Views: 怎样绘制自定义内容到屏幕上？

一、视图定义
一个view代表一个矩形区域，定义了一个坐标空间。view会绘制这个矩形区域并响应事件。
一个view只有一个父view，可以有0或多个子view，一个view可以选择是否裁剪子view。

UIWindow
UIWindow是位于view层次结构中最顶层的view，一般在一个iOS应用中只有一个UIWindow.
UIWindow是view，不是窗口。

view层次结构一般都是以可视的方式在Xcode中构建，甚至自定义view也是如此。
但是也可以在代码中构建：
-(void)addSubview:(UIView *)aView;
-(void)removeFromSuperview;
在你的MVC中的视图结构中，最顶层（root）的view是 @property view!
即：UIViewController的 @property (strong, nonatomic) UIView * view;
理解这个简单的属性非常重要，比如说当自动旋转发生时，这个view的边界会发生变化。
你可以编程往这个view中增加子view， MVC中的view最终都以这个view作为父view，
即MVC中最顶层的view(root)，区别于UIWindow，它是整个iOS 应用的最顶层view。

二. 坐标：View Coordinate
数据类型说明：
CGFloat: 浮点数，根据系统来决定是否是64位的，在图形编程中必须要使用CGFloat.
CGPoint: 有2个CGFloat的C struct：x和y。
CGSize: 有2个CGFloat的C struct: width和height.
CGRect: 包括一个CGPoint origin和一个CGSize size.

坐标：
1.左上角是坐标原点。
2.单位是“点”(points)而不是像素(pixel).
一般情况下你不需要关心你绘制的屏幕一个点有多少个像素
字体和图形会根据高度来自动适配。
但是如果你绘制一些表现很详细的图像，你可能想知道这个。
有一个UIView的属性会告诉你：
@property CGFloat contentScaleFactor; //returns pixels per point on the screen this view is on.
这个属性不是只读的。
3.视图(view)有3个属性与它的位置、大小相关：
@property CGRect bounds;  //视图的绘制区域起点和大小
@property CGPoint center; //在父视图坐标空间中，你视图的中心点。
@preperty CGRect frame; //在父视图坐标空间中，一个能包括你的视图的bounds.size的矩形。

4.使用frame和center来确定视图的位置：
这2个属性是由父视图使用的，绝对不要把它们用在你的子类实现中。
你可能觉得frame.size一定一直等于bounds.size,但是你错了，
因为视图是可以旋转(缩放、平移)的，frame定义旋转、缩放、平移后视图所占矩形的大小。

以上视图中，

view B的bounds = ((0,0), (200, 250))

View B 的frame = ((140, 65), (320,320))

View B center = (300, 225)

三. 创建视图
1.一般情况下使用Xcode创建视图，如果是自定义视图，那么拖拽一个UIView到场景中，
在Identity Inspector中把类属性UIView更换为你的自定义类。
2.怎样在代码中创建视图：alloc然后initWithFrame:(UIView的指定初始化器).
也可以只使用init，这时frame是CGRectZero.
3.代码示例：

CGRect labelRect = CGRectMake(20, 20, 50, 30);
UILabel * label = [[UILable allc] initWithFrame:labelRect];
label.text = @"Hello!";
[self.view addSubview:label];

四. 自定义视图
1.什么情况下需要创建自定义视图：
A.需要自定义绘制图形；
B.需要以特殊的方式处理触摸事件；
2.实现自定义绘制非常简单，只需要创建一个UIView的子类，重写：
-(void)drawRect:(CGRect)aRect;
你可以选择是否需要绘制到aRect外的区域。
3.绝对不要自己调用drawRect！
相应的，使用以下方法，让iOS知道你的视图需要刷新了：
-(void)setNeedDisplay;
-(void)setNeedDisplayInRect:(CGRect);
4.怎样实现drawRect:方法
直接使用Core Graphics framework(C API,非面向对象的).
可以使用面向对象的UIBezierPath类。
5.Core Graphics 基本概念
A.获取一个内容(context)用来把图形绘制到里面去；
B.建立路径(paths);
C.设置颜色、字体、纹理、线宽、线距等；
D.描边或者填充刚刚创建的路径(path).
6.UIBezierPath
可以实现上面所有的功能

五. 内容(上下文？ context)
1.内容决定你绘制图形的目标地点，如屏幕、不在屏幕上的Bitmat、PDF、打印机等。
2.一般正常的绘制，UIKit会给你建立当前内容，但是它只在drawRect调用期间有效。
每次调用drawRect都会新建一个内容，所以不要缓存drawRect中当前的图形内容。
3.怎么得到这个神奇的内容：
UIBezierPath绘制到当前内容，所以你不需要为它获取内容；
但是如果你直接使用Core Graphics C 函数，你需要指定内容，
调用以下函数获取当前图形内容：
CGContextRef context = UIGraphicsGetCurrentContext();

六. 定义路径(path)
开始定义路径
UIBezierPath * path = [[UIBezierPath alloc] init];
移动到指定点，增加直线或弧线
[path moveToPoint:CGPointMake(75, 10)];
[path addLineToPoint:CGPointMake(160, 150)];
[path addLineToPoint:CGPointMake(10, 150)];
关闭路径
[path closePath];
路径已经被创建，我们可以描边或者填充它，事实上这个时候还没有开始绘制。

[[UIColor greenColor] setFill];
[[UIColor redColor] setStroke];
[path fill];
[path stroke];

七. 图形状态
1.可以设置绘制状态(属性),如：
path.lineWidth = 2.0; //line width in points(not pixels)
2.也可以绘制圆角矩形、椭圆等。

UIBezierPath * roundedRect 
 = [[UIBizerPath bezierPathWithRoundRect:(CGRect)bounds 
               cornerRadius:(CGFloat)radius];
UIBezierPath * oval = [UIBezierPath bezierPathWithOvalInRect:(CGRect)bounds];
[roundedRect stroke];
[oval fill];

3.可以使用贝塞尔路径来裁剪你的绘制
[roundedRect addClip]; //this would clip all drawing to be inside the roundedRect
4.在UIView中使用透明、
UIColor可以使用alpha,这就是在drawRect中使用透明绘制的方式
UIView的backgroundColor属性也可以设置成透明值。
如果你的视图需要部分透明，确保@porperty BOOL opaque为NO。 
UIView的@property CGFloat alpha可以使整个view部分透明。
5.为特殊处理定义绘制子函数(subroutine)
如果你想定义一个基础函数来绘制一些事物，又不想跟调用函数的图形状态混淆，
你可以使用保存和恢复内容(context)函数。

-(void)drawGreenCircle:(CGContextRef)ctxt
{
 CGContextSaveGSState(ctxt);
 [[UIColor greenColor] setFill];
 //draw my circle
 CGContextRestoreGState(ctxt);
}
-(void)drawRect:(CGRect)aRect 
{
 CGContextRef context = UIGraphicsGetCurrentContext();
 [[UIColor redColor] setFill];
 //do some stuff
 [self drawGreenCircle:context];
 //do more stuff and expect fill color to be red.
}

八. 绘制文字
1.一般情况下我们使用UILabel作为一个子视图来在我们的视图中绘制文字，
但是有时候我们需要在drawRect:中绘制文字。
2.使用NSAttributedString在drawRect:中绘制文字,
NSAttributedString * text = ...;
[text drawAtPoint:(CGPoint)p]; //NSAttrbutedString instance method added by UIKit.
绘制的时候，文字会占用多大的空间呢？
CGSize textSize = [text size]; //another UIKit NSAttributedString instance method.
你可能会困惑为什么Foundation(一个非UI框架)中会有绘制函数，
这些NSAttributedString方法通过一个叫做"categories"的机制定义在UIKit中。
"Categories"是一种Objective-C方式，用来给现有类增加方法却不需要派生子类。


九. 绘制图片
1.UIImageView就像绘制文字时的UILabel，它可以绘制图片，
但是有时候你也需要在drawRect中绘制图片。
2.从资源(Resources)目录的文件中创建一个UIImage:
UIImage * image = [UIImage imageNamed:@"foo.jpg"]; 
也可以从文件路径或raw data中创建：
UIImage * image = [[UIImage alloc] initWithContentOfFile:(NSString *)fullPath];
UIImage * image = [[UIImage alloc] initWithData:(NSData *)imageData];
甚至你也可以用CGContext函数绘制一个UIImage:

UiGraphicsBeginContext(CGSize);
// draw with CGContext functions
UIImage * myImage = UIGraphicsGetImageFromCurrentContext();
UIGraphicsEndImageContext();

3.创建完UIImage后，可以把UIImage绘制到当前图形内容(graphics context)中：

UIImage * image = ...;
[image drawAtPoint:(CGPoint)p]; // p is upper left corner of the image
[image drawInRect:(CGRect)r];  // scales the image to fit in r
[image drawAsPatternInRect:(CGRect)patRect]; // tiles the image into patRect

4.另外，你可以从UIImage中得到PNG或JPG格式的数据：
NSData * jpgData = UIImageJPEGRepresentation((UIImage *)myImage, (CGFloat)quality);
NSData * pngData = UIImagePNGRepresentation((UIImage *)myImage);

十. 边框变化时重绘：
1.默认情况下当你的视图边框变化时，不会重绘，
只是相应的拉伸或压缩或移动你的视图中的位图。通常这不是你想要的，
有一个UIView的@property控制这个，可以在Xcode中设置：
@property (nonatomic) UIViewContentMode contentMode;
以下content modes移动你的视图中的位图：
UIViewContentMode{Left, Right, Top, BottomLeft, BottomRigth, TopLeft, TopRight}
以下content modes拉伸或压缩你视图中的位图：
UIViewContentModeScale{ToFill, AspectFill, AspectFit}
以下content mode 调用drawRect函数，边框变化是重绘你视图中的所有元素：
UIViewContentModeRedraw  //it is quite often that this is what you want
默认是UIViewContentModeScaleToFill