斯坦福大学iOS应用开发教程学习笔记(第五课)Protocols,手势识别

第五课内容： 自动旋转、 Protocols、 手势识别、一个自定义UIView的Demo

1、自动旋转

当设备旋转时，你的controller会做什么呢？你可以控制界面是否和设备一起一起旋转。

[cpp]  view plain copy

1. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)orientation  
2. {  
3. return UIInterfaceOrientationIsPortrait(orientation); // only support portrait   
4. return YES; // support all orientations  
5. return (orientation != UIInterfaceOrientationPortraitUpsideDown); // anything but  
6. }  

当旋转的时候，view的bounds会改变，子view的frame,子view的子view也会改变。

改变的规则是：struts和springs。

当view的bound改变时，drawRect不会默认调用

红色的 I 就是struts，中间的红色箭头就是springs。

右边红白色的显示屏似的就是用动画告诉你view如何改变。白色的是父view，红色的是你选中的view。

这个控制在iPhone上一般使用不到，因为屏幕太小了。

幸运的是，有UIView有这么个属性来控制

三种控制方式：

1、

[cpp]  view plain copy

1. @property (nonatomic) UIViewContentMode contentMode;  

[cpp]  view plain copy

1. UIViewContentMode{Left,Right,Top,Right,BottomLeft,BottomRight,TopLeft,TopRight}  

2、缩放的控制属性：

[cpp]  view plain copy

1. UIViewContentModeScale{ToFill,AspectFill,AspectFit} // bit stretching/shrinking  

分别是填充，内容填充，内容适应。 toFill是默认的模式，它会自动缩放像素点填满新的空间，可能会造成图形扭曲。

3、

[cpp]  view plain copy

1. @property (nonatomic) CGRect contentStretch;  

指定某一个区域拉伸

初始化一个UIView.

2、协议procotol

[cpp]  view plain copy

1. @protocol Foo <Other, NSObject> // implementors must implement Other and NSObject too  
2. - (void)doSomething; // implementors must implement this (methods are @required by default)   
3. @optional  
4. - (int)getSomething; // implementors do not have to implement this  
5. - (void)doSomethingOptionalWithArgument:(NSString *)argument; // also optional  
6. @required  
7. - (NSArray *)getManySomethings:(int)howMany; // back to being “must implement”   
8. @property (nonatomic, strong) NSString *fooProp; // note that you must specify strength  
9. @end  

可以定义在自己的头文件里，也可以定义在其他类的头文件中。

实现协议，并使用的语法：

[cpp]  view plain copy

1. #import “Foo.h” // importing the header file that declares the Foo @protocol   
2. @interface MyClass : NSObject <Foo> // MyClass is saying it implements the Foo @protocol  
3. ...  
4. @en  

[cpp]  view plain copy

1. id <Foo> obj = [[MyClass alloc] init];  

[cpp]  view plain copy

1. @property (nonatomic, weak) id <Foo> myFooProperty; // properties too!  

协议的主要作用：

实现委托和数据源。
委托几乎都是weak的，因为被设置为委托的对象通常都是委托对象的所有者或创建者。

比如controller通常把自己设置成view的委托或数据源，你不要它们相互的strong指针指向。

scrollView例子

[cpp]  view plain copy

1.   

[cpp]  view plain copy

1. @protocol UIScrollViewDelegate  
2. @optional  
3. - (UIView *)viewForZoomingInScrollView:(UIScrollView *)sender;  
4. - (void)scrollViewDidEndDragging:(UIScrollView *)sender willDecelerate:(BOOL)decelerate;  
5. @end  
6. @interface UIScrollView : UIView  
7. @property (nonatomic, weak) id <UIScrollViewDelegate> delegate;  
8. @end  
9. @interface MyViewController : UIViewController <UIScrollViewDelegate>  
10. @property (nonatomic, weak) IBOutlet UIScrollView *scrollView;  
11. @end  
12. @implementation MyViewController  
13. - (void)setScrollView:(UIScrollView *)scrollView {  
14.     _scrollView = scrollView;  
15. self.scrollView.delegate = self; // compiler won’t complain   
16. }  
17. - (UIView *)viewForZoomingInScrollView:(UIScrollView *)sender { return ... };   
18. @end  

3、手势识别

[cpp]  view plain copy

1.   

如何获得触摸事件呢？

得到触摸时间的通知

相应预定义好的手势

UIGestureRecognizer类，它是个抽象类，需要实现。

使用手势识别有两步骤:

先创建一个手势，把它附到UIView上，然后当手势被识别时进行处理。

第一步由controller来完成

第二步由UIView自己完成

从controller添加一个手势到UIView：

[cpp]  view plain copy

1. - (void)setPannableView:(UIView *)pannableView  
2.       {  
3.           _pannableView = pannableView;  
4.           UIPanGestureRecognizer *pangr =  
5.               [[UIPanGestureRecognizer alloc] initWithTarget:pannableView action:@selector(pan:)];  
6.           [pannableView addGestureRecognizer:pangr];  
7. }  

target 是手势识别之后的处理者，这里就是view本身。

UIPangestureRecognizer的三个方法：

[cpp]  view plain copy

1. - (CGPoint)translationInView:(UIView *)aView;  
2. - (CGPoint)velocityInView:(UIView *)aView;  
3. - (void)setTranslation:(CGPoint)translation inView:(UIView *)aView;  

第一个告诉移动的距离

第二个告诉移动的速度

第三个是重新设置

手势识别的状态机

[cpp]  view plain copy

1. @property (readonly) UIGestureRecognizerState state;  

状态从possible  如果手势比较短：recognized    如果持续：Began - Changed  ,最后Ended

还有Failed 和 Cancelled状态，取消或其他操作中断时会有这个情况。

pan:是什么样的呢：

[cpp]  view plain copy

1. - (void)pan:(UIPanGestureRecognizer *)recognizer  
2. {  
3. if ((recognizer.state == UIGestureRecognizerStateChanged) ||  
4. (recognizer.state == UIGestureRecognizerStateEnded)) {  
5.    CGPoint translation = [recognizer translationInView:self];  
6.    // move something in myself (I’m a UIView) by translation.x and translation.y  
7.    // for example, if I were a graph and my origin was set by an @property called origin   
8.   self.origin = CGPointMake(self.origin.x+translation.x, self.origin.y+translation.y);   
9.   [recognizer setTranslation:CGPointZero inView:self];  
10.   }   
11. }  

其他实例的手势：

UIPinchGestureRecognizer 缩放

UIRotationGestureRecognizer 旋转手势，两个手指按下，然后旋转，是个弧度，不是角度。

UISwipeGestureRecognizer    滑动手势， 一个或多个手指滑动，

UITapGestureRecognizer  点击手势

4、一个幸福笑脸的Demo:

内容介绍：

Model是： int happiness

View是：自定义的view叫做FaceView

Controller是：HappinessViewController

观察内容有：

drawRect 包括绘制子程序， pop push context(环境)

Faceview委托的数据如何属于Controller的协议。

Controller处理手势，或者view处理手势

通过手势来改变幸福度。

用整数表示幸福度， 0表示悲伤， 100表示非常幸福。

有两个手势，一个被view处理，因为它只修改显示，另外一个被controller处理，它要修改model,修改幸福度。

主要源码：

happinessViewController.h

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface HappinessViewController : UIViewController  
4.   
5. @property (nonatomic) int happiness;  // 0 is sad; 100 is very happy  
6.   
7. @end  

happinessViewController.m

[cpp]  view plain copy

1. #import "HappinessViewController.h"  
2. #import "FaceView.h"  
3.   
4. @interface HappinessViewController() <FaceViewDataSource>  
5. @property (nonatomic, weak) IBOutlet FaceView *faceView;  
6. @end  
7.   
8. @implementation HappinessViewController  
9.   
10. @synthesize happiness = _happiness;  
11. @synthesize faceView = _faceView;  
12.   
13. - (void)setHappiness:(int)happiness  
14. {  
15.     _happiness = happiness;  
16.     [self.faceView setNeedsDisplay]; // any time our Model changes, redraw our View  
17. }  
18.   
19. - (void)setFaceView:(FaceView *)faceView  
20. {  
21.     _faceView = faceView;  
22.     // enable pinch gestures in the FaceView using its pinch: handler  
23.     [self.faceView addGestureRecognizer:[[UIPinchGestureRecognizer alloc] initWithTarget:self.faceView action:@selector(pinch:)]];  
24.     [self.faceView addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleHappinessGesture:)]];  // gesture to modify our Model  
25.     self.faceView.dataSource = self;  
26. }  
27.   
28. - (void)handleHappinessGesture:(UIPanGestureRecognizer *)gesture  
29. {  
30.     if ((gesture.state == UIGestureRecognizerStateChanged) ||  
31.         (gesture.state == UIGestureRecognizerStateEnded)) {  
32.         CGPoint translation = [gesture translationInView:self.faceView];  
33.         self.happiness -= translation.y / 2;  
34.         [gesture setTranslation:CGPointZero inView:self.faceView];  
35.     }  
36. }  
37.   
38. - (float)smileForFaceView:(FaceView *)sender  
39. {  
40.     return (self.happiness - 50) / 50.0; // translate Model for View  
41. }  
42.   
43. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation  
44. {  
45.     return YES; // support all orientations  
46. }  
47.   
48. @end  

FaceView.h

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @class FaceView;  // forward declaration for use in @protocol  
4.   
5. @protocol FaceViewDataSource  
6. - (float)smileForFaceView:(FaceView *)sender;  
7. @end  
8.   
9. @interface FaceView : UIView  
10.   
11. @property (nonatomic) CGFloat scale;  
12.   
13. - (void)pinch:(UIPinchGestureRecognizer *)gesture;  // resizes the face  
14.   
15. // set this property to whatever object will provide this View's data  
16. // usually a Controller using a FaceView in its View  
17. @property (nonatomic, weak) IBOutlet id <FaceViewDataSource> dataSource;  
18.   
19. @end  

FaceView.m

[cpp]  view plain copy

1. #import "FaceView.h"  
2.   
3. @implementation FaceView  
4.   
5. @synthesize dataSource = _dataSource;  
6. @synthesize scale = _scale;  
7.   
8. #define DEFAULT_SCALE 0.90  
9.   
10. - (CGFloat)scale  
11. {  
12.     if (!_scale) {  
13.         return DEFAULT_SCALE; // don't allow zero scale  
14.     } else {  
15.         return _scale;  
16.     }  
17. }  
18.   
19. - (void)setScale:(CGFloat)scale  
20. {  
21.     if (scale != _scale) {  
22.         _scale = scale;  
23.         [self setNeedsDisplay]; // any time our scale changes, call for redraw  
24.     }  
25. }  
26.   
27. - (void)pinch:(UIPinchGestureRecognizer *)gesture  
28. {  
29.     if ((gesture.state == UIGestureRecognizerStateChanged) ||  
30.         (gesture.state == UIGestureRecognizerStateEnded)) {  
31.         self.scale *= gesture.scale; // adjust our scale  
32.         gesture.scale = 1;           // reset gestures scale to 1 (so future changes are incremental, not cumulative)  
33.     }  
34. }  
35.   
36. - (void)setup  
37. {  
38.     self.contentMode = UIViewContentModeRedraw; // if our bounds changes, redraw ourselves  
39. }  
40.   
41. - (void)awakeFromNib  
42. {  
43.     [self setup]; // get initialized when we come out of a storyboard  
44. }  
45.   
46. - (id)initWithFrame:(CGRect)frame  
47. {  
48.     self = [super initWithFrame:frame];  
49.     if (self) {  
50.         [self setup]; // get initialized if someone uses alloc/initWithFrame: to create us  
51.     }  
52.     return self;  
53. }  
54.   
55. - (void)drawCircleAtPoint:(CGPoint)p withRadius:(CGFloat)radius inContext:(CGContextRef)context  
56. {  
57.     UIGraphicsPushContext(context);  
58.     CGContextBeginPath(context);  
59.     CGContextAddArc(context, p.x, p.y, radius, 0, 2*M_PI, YES); // 360 degree (0 to 2pi) arc  
60.     CGContextStrokePath(context);  
61.     UIGraphicsPopContext();  
62. }  
63.   
64. - (void)drawRect:(CGRect)rect  
65. {  
66.     CGContextRef context = UIGraphicsGetCurrentContext();  
67.       
68.     CGPoint midPoint; // center of our bounds in our coordinate system  
69.     midPoint.x = self.bounds.origin.x + self.bounds.size.width/2;  
70.     midPoint.y = self.bounds.origin.y + self.bounds.size.height/2;  
71.       
72.     CGFloat size = self.bounds.size.width / 2;  
73.     if (self.bounds.size.height < self.bounds.size.width) size = self.bounds.size.height / 2;  
74.     size *= self.scale; // scale is percentage of full view size  
75.       
76.     CGContextSetLineWidth(context, 5.0);  
77.     [[UIColor blueColor] setStroke];  
78.       
79.     [self drawCircleAtPoint:midPoint withRadius:size inContext:context]; // head  
80.       
81. #define EYE_H 0.35  
82. #define EYE_V 0.35  
83. #define EYE_RADIUS 0.10  
84.       
85.     CGPoint eyePoint;  
86.     eyePoint.x = midPoint.x - size * EYE_H;  
87.     eyePoint.y = midPoint.y - size * EYE_V;  
88.       
89.     [self drawCircleAtPoint:eyePoint withRadius:size * EYE_RADIUS inContext:context]; // left eye  
90.     eyePoint.x += size * EYE_H * 2;  
91.     [self drawCircleAtPoint:eyePoint withRadius:size * EYE_RADIUS inContext:context]; // right eye  
92.   
93. #define MOUTH_H 0.45  
94. #define MOUTH_V 0.40  
95. #define MOUTH_SMILE 0.25  
96.       
97.     CGPoint mouthStart;  
98.     mouthStart.x = midPoint.x - MOUTH_H * size;  
99.     mouthStart.y = midPoint.y + MOUTH_V * size;  
100.     CGPoint mouthEnd = mouthStart;  
101.     mouthEnd.x += MOUTH_H * size * 2;  
102.     CGPoint mouthCP1 = mouthStart;  
103.     mouthCP1.x += MOUTH_H * size * 2/3;  
104.     CGPoint mouthCP2 = mouthEnd;  
105.     mouthCP2.x -= MOUTH_H * size * 2/3;  
106.       
107.     float smile = [self.dataSource smileForFaceView:self];  
108.     if (smile < -1) smile = -1;  
109.     if (smile > 1) smile = 1;  
110.       
111.     CGFloat smileOffset = MOUTH_SMILE * size * smile;  
112.     mouthCP1.y += smileOffset;  
113.     mouthCP2.y += smileOffset;  
114.       
115.     CGContextBeginPath(context);  
116.     CGContextMoveToPoint(context, mouthStart.x, mouthStart.y);  
117.     CGContextAddCurveToPoint(context, mouthCP1.x, mouthCP2.y, mouthCP2.x, mouthCP2.y, mouthEnd.x, mouthEnd.y); // bezier curve  
118.     CGContextStrokePath(context);  
119. }  
120.   
121. @end  

容芳志 (http://blog.youkuaiyun.com/totogo2010)

本文遵循“署名-非商业用途-保持一致”创作公用协议

原文地址：http://blog.youkuaiyun.com/totogo2010/article/details/8222166