UIView常见属性应用实例_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > UIView常见属性应用实例

UIView常见属性应用实例

2015/5/13 15:40:34 吃唐僧肉的小悟空程序员俱乐部我要评论(0)

摘要：上篇主要介绍了UIView的几个主要属性,分别为frame,bounds,center,transform,本篇通过一个简单的实例来验证这几个属性的功能.软件界面如下:主要功能:通过界面上的上下左右按钮来移动上面的图片,通过+-来放到缩小图片,下面两个旋转按钮实现了旋转的功能(transform的应用);复位按钮实现了还原的功能(transform的功能)界面上显示图片的是一个Button,通过点击图片,会更换图片.首先附上源代码:1//2//ViewController.m3//03
标签：view 应用实例

上篇主要介绍了UIView的几个主要属性,分别为frame,bounds,center,transform,本篇通过一个简单的实例来验证这几个属性的功能.

软件界面如下:

主要功能:通过界面上的上下左右按钮来移动上面的图片,通过+-来放到缩小图片,下面两个旋转按钮实现了旋转的功能(transform的应用);复位按钮实现了还原的功能(transform的功能)

　　　　界面上显示图片的是一个Button,通过点击图片,会更换图片.

首先附上源代码:

 1 //
 2 //  ViewController.m
 3 //  03-常见属性
 4 //
 5 //  Created by hukezhu on 15/5/9.
 6 //
 7 //
 8 
 9 #import "ViewController.h"
10 
11 @interface ViewController ()
12 /**
13  *  图片属性(Button)
14  */
15 @property (weak, nonatomic) IBOutlet UIButton *head;
16 /**
17  *  点击按钮响应方法
18  */
19 -(IBAction)move:(UIButton *)btn;
20 
21 
22 @end
23 
24 @implementation ViewController
25 
26 - (void)viewDidLoad {
27     [super viewDidLoad];
28 }
29 -(IBAction)move:(UIButton *)btn{
30 
31     //CGRect tempframe = self.head.frame;
32     
33     //将改变的大小提取出来,便于扩展
34     CGFloat margin = 80;
35     //动画的开始
36     [UIView beginAnimations:nil context:nil];
37     //设置动画持续时间
38     [UIView setAnimationDuration:2.0];
39         //根据tag值来获取是哪个按钮点击了
40         switch (btn.tag) {
41             case 1:
42                 //tempframe.origin.y -= margin;
43                 //向上移动
44                 self.head.transform = CGAffineTransformTranslate(self.head.transform, 0, -margin);
45                 break;
46                 
47             case 2:
48                 //tempframe.origin.y += margin;
49                 //向下移动
50                 self.head.transform = CGAffineTransformTranslate(self.head.transform, 0, margin);
51                 break;
52             case 3:
53                 //tempframe.origin.x -= margin;
54                 //向左移动
55                 self.head.transform = CGAffineTransformTranslate(self.head.transform, -margin, 0);
56                 break;
57             case 4:
58                 //tempframe.origin.x += margin;
59                 //向右移动
60                 self.head.transform = CGAffineTransformTranslate(self.head.transform, margin, 0);
61                 break;
62             case 5:
63                // tempframe.size.height += margin;
64                // tempframe.size.width += margin;
65                 //放大
66                 self.head.transform = CGAffineTransformScale(self.head.transform, 1.5, 1.5);
67                 break;
68             case 6:
69                 //tempframe.size.height -= margin;
70                 //tempframe.size.width -= margin;
71                 //缩小
72                 self.head.transform = CGAffineTransformScale(self.head.transform, 0.8, 0.8);
73                 break;
74             case 7:
75                 //向左旋转(逆时针旋转)
76                 self.head.transform = CGAffineTransformRotate(self.head.transform, -M_PI_4);
77                 break;
78             case 8:
79                 //向右旋转(顺时针旋转)
80                 self.head.transform = CGAffineTransformRotate(self.head.transform, M_PI_4);
81                 break;
82             case 9:
83                 //复位功能
84                 self.head.transform =CGAffineTransformIdentity;
85                 break;
86         }
87     //self.head.frame = tempframe;
88 
89     //提交动画(动画结束)
90     [UIView commitAnimations];
91 }
92 
93 @end

上面这段代码是使用了transform属性实现了最初预想的功能.

上面放置的源码已经实现了预想的功能,下面分析一下其中的细节部分.

1.上下左右移动

　　实现上下左右移动,就是利用空间的位置,通过修改x/y值来进行移动,这里仍用上面这个小程序的代码来进行演示:

　　frame属性:

self.head.frame.origin.y -=10;//这句话会报错(错误:Expression is not assignable),因为这个属性不允许直接修改.

　　所以这里有一个结论:不能直接访问对象的结构体属性的成员变量　　

　　但是可以访问对象的结构体属性,将这个结构体属性取出来,再进行修改

1 1>取出对象的结构体属性值frame,然后复值给临时变量
2  CGRect tempFrame = self.head.frame;
3 2>修改临时变量的值
4  tempFrame.origin.y -= 10;
5 3>用临时变量覆盖原来的frame
6  self.head.frame = tempFrame;

所以通过frame属性实现上述功能的代码如下:

-(IBAction)up{

    //self.head.frame.origin.y -=10;
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.y -= 10;
    self.head.frame = tempFrame;
}
-(IBAction)down{
    
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.y += 10;
    self.head.frame = tempFrame;
}
-(IBAction)left{
    
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.x -= 10;
    self.head.frame = tempFrame;
}
-(IBAction)right{
    
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.x += 10;
    self.head.frame = tempFrame;
}

　　观察上面代码,有太多的重复的代码,所以可以将这些重复的代码提取出来,封装成另外一个方法:

 1 -(IBAction)move:(UIButton *)btn{
 2 
 3     //开始动画
 4     [UIView beginAnimations:nil context:nil];
 5     
 6     //动画持续2秒
 7     [UIView setAnimationDuration:2.0];
 8 
 9     
10     //取出原来的属性
11     CGRect tempFrame = self.head.frame;
12     
13     CGFloat delta = 100;
14     switch (btn.tag) {
15         case 1:
16             tempFrame.origin.y -= delta;
17             break;
18         case 2:
19             tempFrame.origin.y += delta;
20             break;
21         case 3:
22             tempFrame.origin.x -= delta;
23             break;
24         case 4:
25             tempFrame.origin.x += delta;
26             break;
27     }
28     self.head.frame = tempFrame;
29     
30     
31     //提交动画
32     [UIView commitAnimations];
33 }

这段代码使用了tag属性,每个控件都有一个tag值,默认为0(当然这个tag值是允许重复的,不是唯一的)在开发过程中,每个视图一般都有多个子视图,我们给每个子视图设置不同的tag值,可以通过这个tag值来获取到这个视图,方法为:Viewwithtag:

　　2.center属性:

　　控件中点的位置（以父控件的左上角为坐标原点）,通过修改center 的值也可以实现上下左右移动

 1 - (void)move:(UIButton *)btn{
 2     
 3 //         0.开启动画
 4     [UIView beginAnimations:nil context:nil];
 5 //         0.1设置动画的时间
 6     [UIView setAnimationDuration:1.5];
 7     //     1.取出对象的结构体属性center,赋值给临时的变量
 8     CGFloat delat = 100;
 9     CGPoint tempCenter = self.head.center;
10     switch (btn.tag) {
11         case 10:
12             tempCenter.y -= delat;
13             break;
14         case 20:
15             tempCenter.y += delat;
16             break;
17         case 30:
18             tempCenter.x -= delat;
19             break;
20         case 40:
21             tempCenter.x += delat;
22             break;
23    
24     }
25     //    3.用临时变量的值覆盖原来的值
26     self.head.center = tempCenter;
27 //        4.提交动画
28     [UIView commitAnimations];
29 
30 }

　　3.transform属性:

　　　　这个属性在本篇一开始就已经说过了,最上面的代码实现就是使用transform实现的

2.放大和缩小

　　放大和缩小也就是修改控件的尺寸,上篇也介绍过了,修改尺寸,可以使用frame\bounds\transform,其中transform属性已经在本篇一开始就使用了,下面说一下frame和bounds属性

　　1.frame属性:

 1 -(IBAction)big{
 2 
 3     [UIView beginAnimations:nil context:nil];
 4     [UIView setAnimationDuration:2.0];
 5     CGRect tempFrame = self.head.frame;
 6     tempFrame.size.height += 10;
 7     tempFrame.size.width += 10;
 8     self.head.frame = tempFrame;
 9     [UIView commitAnimations];
10 }
11 
12 -(IBAction)small{
13 
14     CGRect tempFrame = self.head.frame;
15     tempFrame.size.height -= 10;
16     tempFrame.size.width -= 10;
17     self.head.frame = tempFrame;
18     
19 }

　　2.bounds属性:

 1 - (void)big{
 2     //         0.开启动画
 3     [UIView beginAnimations:nil context:nil];
 4     //         0.1设置动画的时间
 5     [UIView setAnimationDuration:1.5];
 6     //     1.取出对象的结构体属性bounds,赋值给临时的变量
 7     CGRect tempBounds = self.head.bounds;
 8     //     2.修改临时变量的值
 9     //    tempFrame.origin.y = tempFrame.origin.y - 10;
10     tempBounds.size.width += 10;
11     tempBounds.size.height += 10;
12     //    3.用临时变量的值覆盖原来的值
13     self.head.bounds = tempBounds;
14 //        4.提交动画
15     [UIView commitAnimations];
16 
17     
18     
19 }
20 - (void)small{
21 //         0.开启动画
22     [UIView beginAnimations:nil context:nil];
23 //         0.1设置动画的时间
24     [UIView setAnimationDuration:1.5];
25     //     1.取出对象的结构体属性bounds,赋值给临时的变量
26     CGRect tempBounds = self.head.bounds;
27     //     2.修改临时变量的值
28     //    tempFrame.origin.y = tempFrame.origin.y - 10;
29     tempBounds.size.width -= 10;
30     tempBounds.size.height -= 10;
31     //    3.用临时变量的值覆盖原来的值
32     self.head.frame = tempBounds;
33     [UIView commitAnimations];
34     
35     
36 }

3.旋转

　这个目前只能使用transform属性来实现,见本篇最开始的代码.

　　transform属性注意点

1 *transform 是一种状态，并且只有一种状态
2 * 向上移动
3 (1)CGAffineTransformMakeTranslation(<#CGFloat tx#>, <#CGFloat ty#>):只能变化一次，因为这种方式的变化始终是以最原始的状态值进行变化的，所以只能变化一次
4 
5 (2)CGAffineTransformTranslate(CGAffineTransform t, <#CGFloat tx#>, <#CGFloat ty#>):能够多次变化，每次变化都是以上一次的状态（CGAffineTransform t）进行的变化，所以可以多次变化

所以我们一般使用的是CGAffineTransformTranslate这个方法,如果使用CGAffineTransformMakeTranslation这个方法,则只能变化一次

附:storyboar拖线;