IOS开发学习笔记018- 一般控件的使用

 

1、移动

2、动画

3、缩放

3、旋转

4、简化代码

5、总结

 

UIButton 的两种状态

normal

highlighted 

 1、移动

OC语法规定：不允许直接修改某个对象中结构体属性的成员。

 1     // 获取image控件的frame
 2     CGRect rect =  self.btnImage.frame;
 3     //self.btnImage.frame.origin.y = 20; // 不能直接修改
 4     // 更改Y的值，减小，如果减小到5则一直位5
 5     rect.origin.y -= 5;
 6     if( 5 >= rect.origin.y)
 7     {
 8         rect.origin.y  = 5;
 9     }
10     // 重新赋值
11     self.btnImage.frame = rect;

 

2、动画

这样看起来按钮移动的比较生硬，所以这里给他的移动添加上动画。用到UIView的动画属性

 1  // 0、动画 （头部-开始动画）
 2     [UIView beginAnimations:nil context:nil];
 3     // 1、获取image控件的frame
 4     CGRect rect =  self.btnImage.frame;
 5     //self.btnImage.frame.origin.y = 20; // 不能直接修改
 6     // 2、更改Y的值，减小，如果减小到5则一直位5
 7     rect.origin.y -= 5;
 8     if( 5 >= rect.origin.y)
 9     {
10         rect.origin.y  = 5;
11     }
12     // 3、重新赋值
13     self.btnImage.frame = rect;
14     // 4、动画（尾部-提交动画-执行动画）
15     [UIView commitAnimations];

 

在设置过动画开始后再加上动画执行时间

    // 设置动画的执行时间
    [UIView setAnimationDuration:0.6];

 

可以看到按钮在平缓移动。

下面是关于动画的一些类方法

 1 @interface UIView(UIViewAnimation)
 2 
 3 + (void)beginAnimations:(NSString *)animationID context:(void *)context;  // additional context info passed to will start/did stop selectors. begin/commit can be nested
 4 + (void)commitAnimations;                                                 // starts up any animations when the top level animation is commited
 5 
 6 // no getters. if called outside animation block, these setters have no effect.
 7 + (void)setAnimationDelegate:(id)delegate;                          // default = nil
 8 + (void)setAnimationWillStartSelector:(SEL)selector;                // default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
 9 + (void)setAnimationDidStopSelector:(SEL)selector;                  // default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
10 + (void)setAnimationDuration:(NSTimeInterval)duration;              // default = 0.2
11 + (void)setAnimationDelay:(NSTimeInterval)delay;                    // default = 0.0
12 + (void)setAnimationStartDate:(NSDate *)startDate;                  // default = now ([NSDate date])
13 + (void)setAnimationCurve:(UIViewAnimationCurve)curve;              // default = UIViewAnimationCurveEaseInOut
14 + (void)setAnimationRepeatCount:(float)repeatCount;                 // default = 0.0.  May be fractional
15 + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;    // default = NO. used if repeat count is non-zero
16 + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;  // default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).
17 
18 + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;  // current limitation - only one per begin/commit block
19 
20 + (void)setAnimationsEnabled:(BOOL)enabled;                         // ignore any attribute changes while set.
21 + (BOOL)areAnimationsEnabled;
22 + (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
23 
24 @end

 

下面说一些常用的吧：
beginAnimations 开始动画

commitAnimations 执行动画

setAnimationDelegate 设置动画委托

setAnimationDuration 设置动画时间

setAnimationDelay 设置动画延迟时间

setAnimationStartDate 设置动画开始日期

setAnimationCurve  设置动画曲线

setAnimationRepeatCount 设置动画重复次数

setAnimationsEnabled 关闭动画

areAnimationsEnabled 动画是否开启

3、旋转

下面来看按钮的旋转方法 transform属性
旋转方式有两种：
　　一种改变弧度 π
　　一种改变角度 90

 1 - (IBAction)RotateLeft
 2 {
 3     // 0、动画头部
 4     [UIView beginAnimations:nil context:nil];
 5     // 设置动画时间
 6     [UIView setAnimationDuration:0.5];
 7     // 1、获取当前的按钮的transform
 8      //_btnImage.transform = CGAffineTransformMakeRotation(-M_PI_4); // 每次都是-45度，所以再次点击没有旋转
 9     
10     _btnImage.transform = CGAffineTransformRotate(_btnImage.transform, -M_PI_4); // 返回新的transform对象，可以连续旋转角度
11     // 7、动画（尾部-提交动画-执行动画）
12     [UIView commitAnimations];
13 }

 

4、缩放

可以改变frame属性改变大小

 1     // 0、动画 （头部-开始动画）
 2     [UIView beginAnimations:nil context:nil];
 3     // 设置动画的执行时间
 4     [UIView setAnimationDuration:0.6];
 5     // 1、获取image控件的frame
 6     CGRect rect =  self.btnImage.frame;
 7     // 2、获取btn控件的中心
 8     CGPoint point =  self.btnImage.center;
 9     //self.btnImage.frame.origin.y = 20; // 不能直接修改
10     // 3、更改高度和宽度
11     rect.size.width *= 1.1;
12     rect.size.height *= 1.1;
13     // 4、计算新的原点，,保证放大后按钮的中心位置不变
14     point.x -= rect.size.width/2;
15     point.y -= rect.size.height/2;
16     // 5、将新的原点赋值，
17     rect.origin = point;
18 
19     // 6、重新赋值
20     self.btnImage.frame = rect;
21     //self.btnImage.center = point;
22     // 7、动画（尾部-提交动画-执行动画）
23     [UIView commitAnimations];

 

也可以改变transform属性改变大小,可以想像CGAffineTransformScale内部实现就是方法1

1     // 方法2 直接修改transform属性
2     // 0、动画 （头部-开始动画）
3     [UIView beginAnimations:nil context:nil];
4     // 设置动画的执行时间
5     [UIView setAnimationDuration:0.6];
6     //_btnImage.transform = CGAffineTransformMakeScale(1.2, 1.2); // 只会改变一次
7     _btnImage.transform = CGAffineTransformScale(_btnImage.transform, 1.1, 1.1); // 返回修改的transform属性，可连续修改
8     // 动画（尾部-提交动画-执行动画）
9     [UIView commitAnimations];

 

5、简化代码
将上面代码整理后是这样

 1 // id 类型的不能用点语法
 2 - (IBAction)Run:(id)sender
 3 {
 4     // 0、动画 （头部-开始动画）
 5     [UIView beginAnimations:nil context:nil];
 6     // 设置动画的执行时间
 7     [UIView setAnimationDuration:0.6];
 8     // 1、获取image控件的frame
 9     CGRect rect =  self.btnImage.frame;
10     //self.btnImage.frame.origin.y = 20; // 不能直接修改
11     switch ([sender tag] )
12     {
13         case 1:
14             // 2、更改Y的值
15             rect.origin.y -= DELTA;
16             break;
17         case 2:
18             // 2、更改Y的值
19             rect.origin.y += DELTA;
20 
21             break;
22         case 3:
23             // 2、更改x的值
24             rect.origin.x -= DELTA;
25             break;
26         case 4:
27             // 2、更改x的值
28             rect.origin.x += DELTA;
29             break;
30         default:
31             break;
32     }
33        // 3、重新赋值
34     self.btnImage.frame = rect;
35     // 4、动画（尾部-提交动画-执行动画）
36     [UIView commitAnimations];
37 }
38 
39 - (IBAction)Scale:(id)sender
40 {
41     // 方法2 直接修改transform属性
42     // 0、动画 （头部-开始动画）
43     [UIView beginAnimations:nil context:nil];
44     // 设置动画的执行时间
45     [UIView setAnimationDuration:0.6];
46     //_btnImage.transform = CGAffineTransformMakeScale(1.2, 1.2); // 只会改变一次
47     float scale = ([sender tag] == 5) ? 1.1 : 0.9;
48     _btnImage.transform = CGAffineTransformScale(_btnImage.transform, scale, scale); // 返回修改的transform属性，可连续修改
49     // 动画（尾部-提交动画-执行动画）
50     [UIView commitAnimations];
51 
52 }
53 
54 - (IBAction)Rotate:(id)sender
55 {
56     // 0、动画头部
57     [UIView beginAnimations:nil context:nil];
58     // 设置动画时间
59     [UIView setAnimationDuration:0.5];
60     // 1、获取当前的按钮的transform
61     //_btnImage.transform = CGAffineTransformMakeRotation(-M_PI_4); // 每次都是-45度，所以再次点击没有旋转
62     float rotate = ([sender tag] == 7) ? -M_PI_4 : M_PI_4;
63     _btnImage.transform = CGAffineTransformRotate(_btnImage.transform, rotate);
64     // 7、动画（尾部-提交动画-执行动画）
65     [UIView commitAnimations];
66 }

仔细观察代码可以发现这三个函数的头部好尾部好多重复代码，
如果代码中又很多函数的头部和尾部都有很多重复代码，可以使用block简化代码

先看一下怎么写得

 1 - (void)btnClickWithBlock:(void(^)())myBlock
 2 {
 3     // 动画 （头部-开始动画）
 4     [UIView beginAnimations:nil context:nil];
 5     // 设置动画的执行时间
 6     [UIView setAnimationDuration:0.6];
 7     
 8     myBlock();
 9     
10     // 动画（尾部-提交动画-执行动画）
11     [UIView commitAnimations];
12 }

 

这样写后，后面直接调用这个方法就可以了

 1 - (void)btnClickWithBlock:(void(^)())myBlock
 2 {
 3     // 动画 （头部-开始动画）
 4     [UIView beginAnimations:nil context:nil];
 5     // 设置动画的执行时间
 6     [UIView setAnimationDuration:0.6];
 7     
 8     myBlock();
 9     
10     // 动画（尾部-提交动画-执行动画）
11     [UIView commitAnimations];
12 }
13 
14 // id 类型的不能用点语法
15 - (IBAction)Run:(id)sender
16 {
17 
18     [self btnClickWithBlock:^{
19     // 1、获取image控件的frame
20     CGRect rect =  self.btnImage.frame;
21     //self.btnImage.frame.origin.y = 20; // 不能直接修改
22     switch ([sender tag] )
23     {
24         case 1:
25             // 2、更改Y的值
26             rect.origin.y -= DELTA;
27             break;
28         case 2:
29             // 2、更改Y的值
30             rect.origin.y += DELTA;
31 
32             break;
33         case 3:
34             // 2、更改x的值
35             rect.origin.x -= DELTA;
36             break;
37         case 4:
38             // 2、更改x的值
39             rect.origin.x += DELTA;
40             break;
41         default:
42             break;
43     }
44        // 3、重新赋值
45     self.btnImage.frame = rect;
46         
47     }];
48 
49 
50 }
51 
52 - (IBAction)Scale:(id)sender
53 {
54     [self btnClickWithBlock:^{
55             //_btnImage.transform = CGAffineTransformMakeScale(1.2, 1.2); // 只会改变一次
56     float scale = ([sender tag] == 5) ? 1.1 : 0.9;
57     _btnImage.transform = CGAffineTransformScale(_btnImage.transform, scale, scale); // 返回修改的transform属性，可连续修改
58         
59     }];
60  }
61 
62 - (IBAction)Rotate:(id)sender
63 {
64     [self btnClickWithBlock:^{
65         
66            // 1、获取当前的按钮的transform
67         //_btnImage.transform = CGAffineTransformMakeRotation(-M_PI_4); // 每次都是-45度，所以再次点击没有旋转
68         float rotate = ([sender tag] == 7) ? -M_PI_4 : M_PI_4;
69         _btnImage.transform = CGAffineTransformRotate(_btnImage.transform, rotate);
70   
71     }];
72 }

 

这样看来代码简洁了很多。

6、恢复形变属性为原状

CGAffineTransformIdentity 这个Const常量就可以直接恢复原状

1 - (IBAction)reset:(id)sender
2 {
3     // 恢复所有的形变属性，transform的改变全部恢复
4     [self btnClickWithBlock:^{
5         _btnImage.transform = CGAffineTransformIdentity;
6     }];
7 }

 

 

 

总结
以上这些属性全部继承自UIView，所以对其他控件也适用。
1、frame 表示控件的位置和尺寸，以父控件左上角位坐标原点
2、center 表示控件的中心，，以父控件左上角位坐标原点
3、bounds 表示控件的位置和尺寸，以自己左上角位坐标原点，永远是（0，0）
4、transform 表示控件形状属性，缩放，旋转等
5、tag 表示控件的标识，默认是0

 2015-04-25 今日如此，明日依旧。