手势与变形 、 视图与坐标系

1 使用点击手势实现单击和双击手势

1.1 问题

UITapGestureRecognizer点击手势，通常用于单击和双击某个视图。本案例使用UITapGestureRecognizer点击手势实现单击和双击，如图-1、图-2所示：

图-1

图-2

1.2 方案

首先创建Xcode项目，在Storyboard中拖放一个ImageView控件和Label控件，在右边栏设置好相关属性，此时注意将ImageView的用户交互功能打开，否则无法识别手势。

其次将ImageView和Label控件关联成TRViewController的属性imageView和label。在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势tapGR，使用initWithTarget: action:方法进行初始化并添加事件方法tap:。

将tap手势的numberOfTapsRequired属性设置为1，表示点击一下的意思即单击。最后将手势添加到view中，实现方法tap：点击view则在label上显示“view被点击了一下”。

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势doubleTap，使用initWithTarget: action:方法进行初始化并添加事件方法doubleTap:。

将doubleTap手势的numberOfTapsRequired属性设置为2，表示点击两下的意思即双击。最后将手势添加到imageView中，实现方法doubletap：点击imageView则在label上显示“imageView被点击了两下”。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个ImageView控件和Label控件，在右边栏设置好相关属性，此时注意将ImageView的用户交互功能打开，否则无法识别手势，如图-3所示：

图-3

步骤二：创建单击手势，添加到界面

首先将ImageView和Label控件关联成TRViewController的属性imageView和label，代码如下所示：

 

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @property (weak, nonatomic) IBOutlet UILabel *label;
4. @end

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势tapGR，使用initWithTarget: action:方法进行初始化并添加事件方法tap：，代码如下所示：

 

1. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];

将tap手势的numberOfTapsRequired属性设置为1，表示点击一下的意思即单击。最后将手势添加到view中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4.     //创建手势对象
5. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
6. //设置相关属性
7. tapGR.numberOfTapsRequired = 1;
8. tapGR.numberOfTouchesRequired = 1;
9. //将手势对象加入到需要识别手势的视图
10. [self.view addGestureRecognizer:tapGR];
11. }

最后实现方法tap：，当点击view则在label上显示“view被点击了一下”，代码如下所示：

1. - (void)tap:(UITapGestureRecognizer *)gr
2. {
3. self.label.text = @"view被点击了一下";
4. }

步骤三：创建双击手势，添加到界面

然后在TRViewController类中的viewDidLoad方法中创建一个UITapGestureRecognizer手势doubleTap，使用initWithTarget: action:方法进行初始化并添加事件方法doubleTap：，代码如下所示：

 

1. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];

将doubleTap手势的numberOfTapsRequired属性设置为2，表示点击两下的意思即双击。最后将手势添加到view中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
5. tapGR.numberOfTapsRequired = 1;
6. tapGR.numberOfTouchesRequired = 1;
7. [self.view addGestureRecognizer:tapGR];
8. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];
9. [doubleTap setNumberOfTapsRequired:2];
10. [self.imageView addGestureRecognizer:doubleTap];
11. }

最后实现方法doubleap：，当点击imageView则在label上显示“imageView被点击了两下”，代码如下所示：

1. -(void)doubleTap:(UITapGestureRecognizer*)gr {
2. self.label.text = @"imageView被点击了两下";
3. }

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @property (weak, nonatomic) IBOutlet UILabel *label;
6. @end
8. @implementation TRViewController
9. - (void)viewDidLoad
10. {
11. [super viewDidLoad];
12.     //1. 创建手势对象
13. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
14. //2. 设置相关属性
15. tapGR.numberOfTapsRequired = 1;
16. tapGR.numberOfTouchesRequired = 1;
17. //3. 将手势对象加入到需要识别手势的视图
18. [self.view addGestureRecognizer:tapGR];
20. UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTap:)];
21. [doubleTap setNumberOfTapsRequired:2];
22. [self.imageView addGestureRecognizer:doubleTap];
23. }
24. - (void)tap:(UITapGestureRecognizer *)gr
25. {
26. self.label.text = @"view被点击了一下";
27. }
28. -(void)doubleTap:(UITapGestureRecognizer*)gr {
30. self.label.text = @"imageView被点击了两下";
31. }
32. @end

2 使用轻扫手势切换两张图片

2.1 问题

UISwipeGestureRecognizer轻扫手势，通常用于翻书、翻页、切换画面等效果。本案例将使用UISwipeGestureRecognizer轻扫手势实现两张图片的切换显示，如图-4、图-5所示：

图-4

图-5

2.2 方案

首先创建Xcode项目，在Storyboard中拖放两个和屏幕一样大小的ImageView控件，在屏幕上叠放在一起。

其次在TRViewController类中的viewDidLoad方法中创建一个UISwipeGestureRecognizer手势swipeGR，使用initWithTarget: action:方法进行初始化并添加事件方法swipe:。

将swipe手势的direction属性设置为左右，表示从右向左轻滑或者由左向右轻滑都可以触发手势的动作事件。然后将手势添加到self.view中。

最后将手势添加到view中，实现方法swipe:，当滑动图片则切换两个ImageView的显示顺序。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放两个和屏幕一样大小的ImageView控件，在屏幕上叠放在一起，如图-6所示：

图-6

步骤二：创建swipe手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UISwipeGestureRecognizer手势swipeGR，使用initWithTarget: action:方法进行初始化并添加事件方法swipe:，代码如下所示：

1. UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];

将swipe手势的direction属性设置为左右，表示从右向左轻滑或者由左向右轻滑都可以触发手势的动作事件，并将手势添加到self.view中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4.     UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
5. swipeGR.direction = UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionRight ;
6. [self.view addGestureRecognizer:swipeGR];
7. }

步骤三：实现事件方法swipe:

实现方法swipe:，当滑动图片则切换两个ImageView的显示顺序，代码如下所示：

1. - (void)swipe:(UISwipeGestureRecognizer *)gr
2. {
3. [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
4. NSLog(@"%@",self.view.subviews);
5. }

2.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @implementation TRViewController
5. - (void)viewDidLoad
6. {
7. [super viewDidLoad];
8.     UISwipeGestureRecognizer *swipeGR = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];
9. swipeGR.direction = UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionRight ;
10. [self.view addGestureRecognizer:swipeGR];
11. }
13. - (void)swipe:(UISwipeGestureRecognizer *)gr
14. {
15. [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
16. NSLog(@"%@",self.view.subviews);
17. }
18. @end

3 使用缩放手势改变textView的显示状态和字体大小

3.1 问题

UIPinchGestureRecognizer缩放手势，通常用于缩放图片或视图，本案例使用UIPinchGestureRecognizer缩放手势实现改变textView的字体大小，当缩小速度足够快时则隐藏textView，如图-7所示：

图-7

3.2 方案

首先创建Xcode项目，在Storyboard中拖放一个适当大小的TextView控件，在右边栏的检查器四中设置好显示的文字内容和背景颜色。将TextView关联成TRViewControlle的属性textView。

然后在TRViewController类中的viewDidLoad方法中创建一个UIPinchGestureRecognizer手势pinchGR，使用initWithTarget: action:方法进行初始化并添加事件方法pinch:。将pinchGR添加到self.view中。

UIPinchGestureRecognizer类型的手势有两个常用的属性scale和velocity，scale表示缩放的比例，velocity表示缩放的速度。这两个属性都为只读属性。

最后实现pinch:方法，该方法中根据velocity属性的值判断是否显示textView，根据scale属性的值计算textView的字体大小。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个适当大小的TextView控件，在右边栏的检查器四中设置好显示的文字内容和背景颜色。将TextView关联成TRViewControlle的属性textView，代码如下所示：

 

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UITextView *textView;
3. @end

步骤二：创建pinch手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UIPinchGestureRecognizer手势pinchGR，使用initWithTarget: action:方法进行初始化并添加事件方法pinch:，并将pinchGR添加到self.view中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4.     UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
5. [self.view addGestureRecognizer:pinchGR];
6. }

步骤三：实现事件方法pinch:

实现pinch:方法，该方法中根据velocity属性的值判断是否显示textView，当velocity的值小于-10时则隐藏textView，大于10 则显示textView。再根据scale属性的值计算textView的字体大小，代码如下所示：

 

1. - (void)pinch:(UIPinchGestureRecognizer *)gr
2. {
3. if (gr.velocity < -10) {
4. self.textView.hidden = YES;
5. }else if (gr.velocity > 10) {
6. self.textView.hidden = NO;
7. }else{
8. self.textView.font = [UIFont systemFontOfSize:17 * gr.scale];
9. }
10. }

3.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UITextView *textView;
5. @end
7. @implementation TRViewController
8. - (void)viewDidLoad
9. {
10. [super viewDidLoad];
11.     UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
12. [self.view addGestureRecognizer:pinchGR];
13. }
14. - (void)pinch:(UIPinchGestureRecognizer *)gr
15. {
16. if (gr.velocity < -10) {
17. self.textView.hidden = YES;
18. }else if (gr.velocity > 10) {
19. self.textView.hidden = NO;
20. }else{
21. self.textView.font = [UIFont systemFontOfSize:17 * gr.scale];
22. }
23. }
24. @end

4 使用拖动手势移动图片

4.1 问题

UIPanGestureRecognizer拖动手势，通常用于移动某个视图的位置，本案例使用UIPanGestureRecognizer拖动手势移动图片，根据手指触屏的坐标改变图片的位置，如图-8、图-9所示：

图-8

图-9

4.2 方案

首先创建Xcode项目，在Storyboard中拖放一个适当大小的ImageView控件，在右边栏的检查器四中设置好显示图片。将ImageView控件关联成TRViewControlle的属性imageView。

然后在TRViewController类中的viewDidLoad方法中创建一个UIPanGestureRecognizer手势panGR，使用initWithTarget: action:方法进行初始化并添加事件方法pan:。将panGR添加到self.view中。

所有的手势都有一个UIGestureRecognizerState枚举类型的属性state，用来表示手势的状态，包括手势的开始、变化和结束。

最后实现pan:方法，该方法中根据手势不同的状态改变imageView的坐标和大小，使imageView的center根据手指触摸点改变。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目搭建界面

首先创建Xcode项目，在Storyboard中拖放一个适当大小的Imageview控件，在右边栏的检查器四中设置好显示图片。将ImageView控件关联成TRViewControlle的属性imageView，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

步骤二：创建pan手势，添加到界面

在TRViewController类中的viewDidLoad方法中创建一个UIPanGestureRecognizer手势panGR，使用initWithTarget: action:方法进行初始化并添加事件方法pan:，并将panGR添加到self.view中，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4.     UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
5. panGR.minimumNumberOfTouches = 1;
6. [self.view addGestureRecognizer:panGR];
7. }

步骤三：实现事件方法pan:

实现pan:方法，该方法中根据手势不同的状态改变imageView的坐标和大小，使imageView的center根据手指触摸点改变。

当state的值等于UIGestureRecognizerStateBegan时将imageView的大小设置为原来大小的0.5倍，当state的值等于UIGestureRecognizerStateChanged时imageView的center跟着手指触摸点移动，当state的值等于UIGestureRecognizerStateEnded时imageView的大小变回原来的大小，代码如下所示：

 

1. - (void)pan:(UIPanGestureRecognizer *)gr
2. {
3. if (gr.state == UIGestureRecognizerStateBegan) {
4. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*0.5, self.imageView.frame.size.height*0.5);
5. }else if(gr.state == UIGestureRecognizerStateChanged){
6. self.imageView.center = [gr locationInView:self.view];
7. }else if(gr.state == UIGestureRecognizerStateEnded){
8. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*2, self.imageView.frame.size.height*2);
9. }
10. }

4.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @end
7. @implementation TRViewController
9. - (void)viewDidLoad
10. {
11. [super viewDidLoad];
12.     UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
13. panGR.minimumNumberOfTouches = 1;
14. [self.view addGestureRecognizer:panGR];
15. }
16. - (void)pan:(UIPanGestureRecognizer *)gr
17. {
18. if (gr.state == UIGestureRecognizerStateBegan) {
19. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*0.5, self.imageView.frame.size.height*0.5);
20. }else if(gr.state == UIGestureRecognizerStateChanged){
21. self.imageView.center = [gr locationInView:self.view];
22. }else if(gr.state == UIGestureRecognizerStateEnded){
23. self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width*2, self.imageView.frame.size.height*2);
24. }
25. }
26. @end

5 结合手势对图片进行缩放、旋转和位移

5.1 问题

变形transform是视图（View）的一个CGAffineTransform结构体类型的属性，可以使视图产生缩放、旋转、位移等变化。本案例结合手势实现对一张图片的变形，包括缩放、旋转和位移，如图-10、图-11所示：

图-10

图-11

5.2 方案

首先创建Xcode项目，在TRViewController类中定义一个UIImageView类型的属性imageView。然后在viewDidLoad方法中创建一个UIImageView对象imageView添加到父视图中，并根据父视图的宽高比计算出imageView的宽高，将imageView放置在父视图的中间。将属性imageView指向该对象。

其次将imageView的用户交互功能打开，然后在viewDidLoad方法中创建一个旋转手势rotationGR，将手势的响应方法命名为rotate：，最后将旋转手势添加到imageView上。

rotate：方法中通过CGAffineTransformRotate函数改变imageView的transform属性，实现imageView旋转的功能。

然后在viewDidLoad方法中创建一个缩放手势pinchGR，将手势的响应方法命名为pinch:，最后将缩放手势添加到imageView上。

pinch:方法中通过CGAffineTransformScale函数改变imageView的transform属性，实现imageView缩放的功能。

默认情况下，视图在同一时刻只能识别一种手势。如果想要同时识别多种手势就需要给手势指定委托，让手势对象之间进行通信协商两个手势是否能够一起工作。

本案例中旋转手势和缩放手势是可以一起工作的，所以将rotationGR和pinchGR的delegate赋值为TRViewController，TRViewController通过实现协议方法shouldRecognizeSimultaneouslyWithGestureRecognizer:使两个手势能够同时被识别。

最后再创建一个拖拽手势和双击手势添加到imageView上，分别实现拖拽手势和双击手势的响应方法。

5.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建imageView对象

在TRViewController类中定义一个UIImageView类型的属性imageView。然后在viewDidLoad方法中创建一个UIImageView对象imageView添加到父视图中，并根据父视图的宽高比计算出imageView的宽高，将imageView放置在父视图的中间。将属性imageView指向该对象，代码如下所示：

 

1. //根据父视图宽高计算imageView的宽高
2. - (void)relocation
3. {
4. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
5. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
6. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
7. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
8. }
9. //创建imageView对象
10. - (void)viewDidLoad
11. {
12. [super viewDidLoad];
13.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
14. self.imageView = imageView;
15. [self.view addSubview:imageView];
16. imageView.center = self.view.center;
17. [self relocation];
18. }

步骤二：创建旋转手势，添加到imageView

首先将imageView的用户交互功能打开，然后在viewDidLoad方法中创建一个旋转手势rotationGR，将手势的响应方法命名为rotate：，最后将旋转手势添加到imageView上，代码如下所示：

1. //打开imageView的交互功能
2. imageView.userInteractionEnabled = YES;
3. //创建旋转手势
4. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
5. [imageView addGestureRecognizer:rotationGR];

实现rotate：方法，在该方法中通过CGAffineTransformRotate函数改变imageView的transform属性，实现imageView旋转的功能，代码如下所示：

1. - (void)rotate:(UIRotationGestureRecognizer *)gr
2. {
3. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
4. gr.rotation = 0;
5. }

步骤三：创建缩放手势，添加到imageView

首先在viewDidLoad方法中创建一个缩放手势pinchGR，将手势的响应方法命名为pinch:，再将缩放手势添加到imageView上，代码如下所示：

 

1. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
2. [imageView addGestureRecognizer:pinchGR];

然后实现pinch:方法，在该方法中通过CGAffineTransformScale函数改变imageView的transform属性，实现imageView缩放的功能，代码如下所示：

1. - (void)pinch:(UIPinchGestureRecognizer *)gr
2. {
3. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
4. gr.scale = 1;
5. }

步骤四：使旋转和缩放手势能够同时被识别

首先在viewDidLoad方法中将rotationGR和pinchGR的delegate属性赋值为当前视图控制器即TRViewController，代码如下所示：

 

1. //通过委托，让rotation和pinch可以同时被识别
2. rotationGR.delegate = self;
3. pinchGR.delegate = self;

然后在TRViewController类中通过实现协议方法shouldRecognizeSimultaneouslyWithGestureRecognizer:，使两个手势能够同时被识别，代码如下所示：

 

1. //两个手势对象是否可以同时识别
2. -(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
3. shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
4. {
5. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
6. return YES;
7. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
8. return YES;
9. }
10. return NO;
11. }

步骤五：创建拖拽手势和双击手势

首先在viewDidLoad方法中创建一个拖拽手势panGR，将手势的响应方法命名为pan:，然后将缩放手势添加到imageView上，代码如下所示：

 

1. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
2. [imageView addGestureRecognizer:panGR];

然后实现pan:方法，该方法中通过CGAffineTransformTranslate函数改变imageView的transform属性，实现imageView的位移功能，代码如下所示：

再创建一个双击手势tapGR，将手势的响应方法命名为tap:，然后将缩放手势添加到imageView上，代码如下所示：

1. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
2. tapGR.numberOfTapsRequired = 2;
3. [imageView addGestureRecognizer:tapGR];

最后实现tap:方法，双击imageView则将imageView置为最初的状态。所示tap:方法中直接调用relocation方法即可，代码如下所示：

 

1. - (void)tap:(UITapGestureRecognizer *)gr
2. {
3. [self relocation];
4. }

5.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController () <UIGestureRecognizerDelegate>
4. @property (strong, nonatomic) UIImageView *imageView;
5. @end
7. @implementation TRViewController
8. - (void)viewDidLoad
9. {
10. [super viewDidLoad];
11.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
12. self.imageView = imageView;
13. [self.view addSubview:imageView];
14. imageView.center = self.view.center;
15. [self relocation];
16. //打开用户交互
17. imageView.userInteractionEnabled = YES;
18. //添加旋转手势
19. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
20. [imageView addGestureRecognizer:rotationGR];
21. //添加缩放手势
22. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
23. [imageView addGestureRecognizer:pinchGR];
25. //添加拖拽手势
26. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
27. [imageView addGestureRecognizer:panGR];
28. //添加双击手势
29. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
30. tapGR.numberOfTapsRequired = 2;
31. [imageView addGestureRecognizer:tapGR];
33. //通过委托，让rotation和pinch可以同时被识别
34. rotationGR.delegate = self;
35. pinchGR.delegate = self;
36. }
38. - (void)rotate:(UIRotationGestureRecognizer *)gr
39. {
40. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
41. gr.rotation = 0;
42. }
44. - (void)pinch:(UIPinchGestureRecognizer *)gr
45. {
46. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
47. gr.scale = 1;
48. }
50. - (void)pan:(UIPanGestureRecognizer *)gr
51. {
52. CGPoint p = [gr translationInView:self.imageView];
53. self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, p.x, p.y);
54. [gr setTranslation:CGPointZero inView:self.imageView];
55. }
57. - (void)tap:(UITapGestureRecognizer *)gr
58. {
59. [self relocation];
60. }
61. - (void)relocation
62. {
63. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
64. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
65. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
66. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
67. }
69. #pragma mark - UIGestureRecognizerDelegate
70. //两个手势对象是否可以同时识别
71. - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
72. {
73. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
74. return YES;
75. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
76. return YES;
77. }
78. return NO;
79. }
80. @end

6 演示坐标系四个成员之间的关系

6.1 问题

本案例直接在上一个案例的基础之上增加两个Label查看frame、bounds以及transform之间的关系，如图-12所示：

图-12

6.2 方案

首先在上一个案例的界面上添加两个UILabel控件frameLabel和boundslabel，分别用于显示imageView的frame和bounds值。

然后为了观察frame、bounds根据变形产生的变化，在各个手势方法中添加一个用于实时显示imageView的frame和bounds的方法trace。运行程序，可以看出frame会随着transform的变化而变化，bounds始终保持不变。

最后在imageView的右上角75%的位置上添加一个UILable类型的子视图。

6.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：在界面上添加frameLabel和boundslabel

首先在上一个案例的界面上添加两个UILabel控件frameLabel和boundslabel，分别用于显示imageView的frame和bounds值，代码如下所示：

 

1. UILabel *frameLabel = [[UILabel alloc]init];
2. self.frameLabel = frameLabel;
3. frameLabel.frame = CGRectMake(10, 30, 300, 30);
4. frameLabel.font = [UIFont italicSystemFontOfSize:20];
5. frameLabel.textColor = [UIColor redColor];
6. frameLabel.backgroundColor = [UIColor clearColor];
7. frameLabel.shadowColor = [UIColor greenColor];
8. frameLabel.shadowOffset = CGSizeMake(1, 1);
9. frameLabel.text = @"Frame";
10. [self.view addSubview:frameLabel];
12. UILabel *boundsLabel = [[UILabel alloc]init];
13. self.boundsLabel = boundsLabel;
14. boundsLabel.frame = CGRectMake(10, 70, 300, 30);
15. boundsLabel.font = [UIFont italicSystemFontOfSize:20];
16. boundsLabel.textColor = [UIColor redColor];
17. boundsLabel.backgroundColor = [UIColor clearColor];
18. boundsLabel.shadowColor = [UIColor greenColor];
19. boundsLabel.shadowOffset = CGSizeMake(1, 1);
20. boundsLabel.text = @"Bounds";
21. [self.view addSubview:boundsLabel];

步骤二：实现trace方法

为了观察frame、bounds根据变形产生的变化，在各个手势方法中添加一个用于实时显示imageView的frame和bounds的方法trace，代码如下所示：

 

1. - (void)trace
2. {
3. self.frameLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width, self.imageView.frame.size.height];
4. self.boundsLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.bounds.origin.x, self.imageView.bounds.origin.y, self.imageView.bounds.size.width, self.imageView.bounds.size.height];
5. }

然后运行程序，可以看出frame会随着transform的变化而变化，而bounds始终保持不变。

步骤三：在imageView的右上角子视图label

在imageView的右上角75%的位置上添加一个UILable类型的子视图label。此时label的frame需要根据imageView的bounds来进行计算，而不是imageView的frame，代码如下所示：

 

1. UILabel *label = [[UILabel alloc]init];
2. label.backgroundColor = [UIColor redColor];
3. CGRect frame = CGRectMake(imageView.bounds.size.width * 0.75, imageView.bounds.size.height * 0.25, 200, 200);
4. label.frame = frame;
5. [imageView addSubview:label];

6.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController () <UIGestureRecognizerDelegate>
4. @property (strong, nonatomic) UIImageView *imageView;
5. @property (strong, nonatomic) UILabel *frameLabel;
6. @property (strong, nonatomic) UILabel *boundsLabel;
7. @end
9. @implementation TRViewController
11. - (void)relocation
12. {
13. float horizontalScale = self.view.bounds.size.width / self.imageView.bounds.size.width;
14. float verticalScale = self.view.bounds.size.height / self.imageView.bounds.size.height;
15. float realScale = horizontalScale < verticalScale ? horizontalScale:verticalScale;
16. self.imageView.transform = CGAffineTransformMakeScale(realScale, realScale);
17. }
19. - (void)trace
20. {
21. self.frameLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.frame.origin.x, self.imageView.frame.origin.y, self.imageView.frame.size.width, self.imageView.frame.size.height];
22. self.boundsLabel.text = [NSString stringWithFormat:@"%.2f, %.2f, %.2f, %.2f", self.imageView.bounds.origin.x, self.imageView.bounds.origin.y, self.imageView.bounds.size.width, self.imageView.bounds.size.height];
23. }
25. - (void)viewDidLoad
26. {
27. [super viewDidLoad];
28. //屏幕上增加两行显示imageView的frame和bounds的Label
29. UILabel *frameLabel = [[UILabel alloc]init];
30. self.frameLabel = frameLabel;
31. frameLabel.frame = CGRectMake(10, 30, 300, 30);
32. frameLabel.font = [UIFont italicSystemFontOfSize:20];
33. frameLabel.textColor = [UIColor redColor];
34. frameLabel.backgroundColor = [UIColor clearColor];
35. frameLabel.shadowColor = [UIColor greenColor];
36. frameLabel.shadowOffset = CGSizeMake(1, 1);
37. frameLabel.text = @"Frame";
38. [self.view addSubview:frameLabel];
40. UILabel *boundsLabel = [[UILabel alloc]init];
41. self.boundsLabel = boundsLabel;
42. boundsLabel.frame = CGRectMake(10, 70, 300, 30);
43. boundsLabel.font = [UIFont italicSystemFontOfSize:20];
44. boundsLabel.textColor = [UIColor redColor];
45. boundsLabel.backgroundColor = [UIColor clearColor];
46. boundsLabel.shadowColor = [UIColor greenColor];
47. boundsLabel.shadowOffset = CGSizeMake(1, 1);
48. boundsLabel.text = @"Bounds";
49. [self.view addSubview:boundsLabel];
50.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Elephant.jpg"]];
51. self.imageView = imageView;
52. [self.view insertSubview:imageView atIndex:0];
53. imageView.center = self.view.center;
54. [self relocation];
55. [self trace];
56. imageView.userInteractionEnabled = YES;//打开用户交互
57. UIRotationGestureRecognizer *rotationGR = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotate:)];
58. [imageView addGestureRecognizer:rotationGR];
59. UIPinchGestureRecognizer *pinchGR = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinch:)];
60. [imageView addGestureRecognizer:pinchGR];
61. UIPanGestureRecognizer *panGR = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
62. [imageView addGestureRecognizer:panGR];
64. //7.
65. UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
66. tapGR.numberOfTapsRequired = 2;
67. [imageView addGestureRecognizer:tapGR];
68. //8. 让rotation和pinch可以同时被识别
69. rotationGR.delegate = self;
70. pinchGR.delegate = self;
72. //将一个子视图加入到imageView中的右上角75%的位置
73. UILabel *label = [[UILabel alloc]init];
74. label.backgroundColor = [UIColor redColor];
75. CGRect frame = CGRectMake(imageView.bounds.size.width * 0.75, imageView.bounds.size.height * 0.25, 200, 200);
76. label.frame = frame;
77. [imageView addSubview:label];
78. }
80. - (void)rotate:(UIRotationGestureRecognizer *)gr
81. {
82. self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, gr.rotation);
83. gr.rotation = 0;
84. [self trace];
85. }
87. - (void)pinch:(UIPinchGestureRecognizer *)gr
88. {
89. self.imageView.transform = CGAffineTransformScale(self.imageView.transform, gr.scale, gr.scale);
90. gr.scale = 1;
91. [self trace];
92. }
94. - (void)pan:(UIPanGestureRecognizer *)gr
95. {
96. CGPoint p = [gr translationInView:self.imageView];
97. self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, p.x, p.y);
98. [gr setTranslation:CGPointZero inView:self.imageView];
99. [self trace];
100. }
102. - (void)tap:(UITapGestureRecognizer *)gr
103. {
104. [self relocation];
106. }
107. #pragma mark - UIGestureRecognizerDelegate
108. //两个手势对象是否可以同时识别
109. - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
110. {
111. if ([gestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class] ]&& [otherGestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]) {
112. return YES;
113. }else if([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]]&&[otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]){
114. return YES;
115. }
116. return NO;
117. }
118. @end