iOS开发UI基础—transframe属性(形变)

iOS开发UI基础—transframe属性(形变)

1. transform属性

在OC中,通过transform属性可以修改对象的平移、缩放比例和旋转角度

常用的创建transform结构体方法分两大类

(1) 创建“基于控件初始位置”的形变

CGAffineTransformMakeTranslation(平移)

CGAffineTransformMakeScale(缩放)

CGAffineTransformMakeRotation(旋转)

(2) 创建“基于transform参数”的形变

CGAffineTransformTranslate

CGAffineTransformScale

CGAffineTransformRotate

补充:

在OC中,所有跟角度相关的数值,都是弧度值,180° = M_PI

正数表示顺时针旋转

负数表示逆时针旋转

提示:由于transform属性可以基于控件的上一次的状态进行叠加形变,例如,先旋转再平移。因此在实际动画开发中,当涉及位置、尺寸形变效果时,大多修改控件的transform属性,而不是frame、bounds、center

2.代码示例


  1 //
2 // YYViewController.m
3 // 01-练习使用按钮的frame和center属性
4 //
5 // Created by apple on 14-5-21.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10
11 //私有扩展
12 @interface YYViewController ()
13
14 @property(nonatomic,weak)IBOutlet UIButton *headImageView;
15 @end
16
17 @implementation YYViewController
18
19 //枚举类型,从1开始
20 //枚举类型有一个很大的作用,就是用来代替程序中的魔法数字
21 typedef enum
22 {
23 ktopbtntag=1,
24 kdownbtntag,
25 krightbtntag,
26 kleftbtntag
27 }btntag;
28
29 //viewDidLoad是视图加载完成后调用的方法,通常在此方法中执行视图控制器的初始化工作
30 - (void)viewDidLoad
31 {
32
33 //在viewDidLoad方法中,不要忘记调用父类的方法实现
34 [super viewDidLoad];
35
36
37 //手写控件代码
38 //一、写一个按钮控件,上面有一张图片
39
40 //1.使用类创建一个按钮对象
41 // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)];
42 //设置按钮对象为自定义型
43 UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom];
44
45 //2.设置对象的各项属性
46
47 //(1)位置等通用属性设置
48 headbtn.frame=CGRectMake(100, 100, 100, 100);
49
50 //(2)设置普通状态下按钮的属性
51 [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal];
52 [headbtn setTitle:@"点我!" forState:UIControlStateNormal];
53 [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
54
55 //(3)设置高亮状态下按钮的属性
56 [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted];
57 [headbtn setTitle:@"还行吧~" forState:UIControlStateHighlighted];
58 [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
59
60 //3.把对象添加到视图中展现出来
61 [self.view addSubview:headbtn];
62 //注意点!
63 self.headImageView=headbtn;
64
65
66 //二、写四个控制图片左右上下移动方向的按钮控件
67
68 /**================向上的按钮=====================*/
69 //1.创建按钮对象
70 UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom];
71
72 //2.设置对象的属性
73 topbtn.frame=CGRectMake(100, 250, 40, 40);
74 [topbtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
75 [topbtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
76 [topbtn setTag:1];
77 //3.把控件添加到视图中
78 [self.view addSubview:topbtn];
79
80 //4.按钮的单击控制事件
81 [topbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
82
83
84 /**================向下的按钮=====================*/
85 //1.创建按钮对象
86 UIButton *downbtn=[UIButton buttonWithType:UIButtonTypeCustom];
87 //2.设置对象的属性
88 downbtn.frame=CGRectMake(100, 350, 40, 40);
89 [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
90 [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
91 [downbtn setTag:2];
92 //3.把控件添加到视图中
93 [self.view addSubview:downbtn];
94
95 //4.按钮的单击控制事件
96 [downbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
97
98
99 /**================向左的按钮=====================*/
100 //1.创建按钮对象
101 UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
102 //2.设置对象的属性
103 leftbtn.frame=CGRectMake(50, 300, 40, 40);
104 [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
105 [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
106 [leftbtn setTag:4];
107 //3.把控件添加到视图中
108 [self.view addSubview:leftbtn];
109
110 //4.按钮的单击控制事件
111 [leftbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
112
113
114
115 /**================向右的按钮=====================*/
116 //1.创建按钮对象
117 UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
118 //2.设置对象的属性
119 rightbtn.frame=CGRectMake(150, 300, 40, 40);
120 [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
121 [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
122 [rightbtn setTag:3];
123 //3.把控件添加到视图中
124 [self.view addSubview:rightbtn];
125
126 //4.按钮的单击控制事件
127 [rightbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
128
129 //三、写两个缩放按钮
130 /**================放大的按钮=====================*/
131 //1.创建对象
132 UIButton *plusbtn=[UIButton buttonWithType:UIButtonTypeCustom];
133 //2.设置属性
134 plusbtn.frame=CGRectMake(75, 400, 40, 40);
135 [plusbtn setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
136 [plusbtn setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
137 [plusbtn setTag:1];
138 //3.添加到视图
139 [self.view addSubview:plusbtn];
140 //4.单击事件
141 [plusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];
142
143
144 /**================缩小的按钮=====================*/
145 UIButton *minusbtn=[UIButton buttonWithType:UIButtonTypeCustom];
146 minusbtn.frame=CGRectMake(125, 400, 40, 40);
147 [minusbtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
148 [minusbtn setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
149 [minusbtn setTag:0];
150 [self.view addSubview:minusbtn];
151 [minusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];
152
153 /**================向左旋转按钮=====================*/
154 UIButton *leftrotatebtn=[UIButton buttonWithType:UIButtonTypeCustom];
155 [leftrotatebtn setFrame:CGRectMake(175, 400, 40, 40)];
156 [leftrotatebtn setBackgroundImage:[UIImage imageNamed:@"left_rotate_normal"] forState:UIControlStateNormal];
157 [leftrotatebtn setBackgroundImage:[UIImage imageNamed:@"left_rotate_highlighted"] forState:UIControlStateHighlighted];
158 [leftrotatebtn setTag:1];
159 [self.view addSubview:leftrotatebtn];
160 [leftrotatebtn addTarget:self action:@selector(Rotate:) forControlEvents:UIControlEventTouchUpInside];
161
162 /**================向右旋转按钮=====================*/
163 UIButton *rightrotatebtn=[UIButton buttonWithType:UIButtonTypeCustom];
164 [rightrotatebtn setFrame:CGRectMake(225, 400, 40, 40)];
165 [rightrotatebtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_normal"] forState:UIControlStateNormal];
166 [rightrotatebtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_highlighted"] forState:UIControlStateHighlighted];
167 [rightbtn setTag:0];
168 [self.view addSubview:rightrotatebtn];
169 [rightrotatebtn addTarget:self action:@selector(Rotate:) forControlEvents:UIControlEventTouchUpInside];
170 }
171
172 //控制方向的多个按钮调用同一个方法
173 -(void)Click:(UIButton *)button
174 {
175
176 //练习使用frame属性
177 //CGRect frame=self.headImageView.frame;
178
179 /**注意,这里如果控制位置的两个属性frame和center同时使用的话,会出现很好玩的效果,注意分析*/
180 //练习使用center属性
181 CGPoint center=self.headImageView.center;
182 switch (button.tag) {
183 case ktopbtntag:
184 center.y-=30;
185 break;
186 case kdownbtntag:
187 center.y+=30;
188 break;
189 case kleftbtntag:
190 //发现一个bug,之前的问题是因为少写了break,造成了它们的顺序执行,sorry
191 //center.x=center.x-30;
192 center.x-=50;
193 break;
194 case krightbtntag:
195 center.x+=50;
196 break;
197 }
198
199 // self.headImageView.frame=frame;
200
201 //首尾式设置动画效果
202 [UIView beginAnimations:nil context:nil];
203 self.headImageView.center=center;
204 //设置时间
205 [UIView setAnimationDuration:2.0];
206 [UIView commitAnimations];
207 NSLog(@"移动!");
208
209 }
210 -(void)Zoom:(UIButton *)btn
211 {
212 //使用bounds,以中心点位原点进行缩放
213 CGRect bounds = self.headImageView.bounds;
214 if (btn.tag) {
215 bounds.size.height+=30;
216 bounds.size.width+=30;
217 }
218 else
219 {
220 bounds.size.height-=50;
221 bounds.size.width-=50;
222 }
223
224 //设置首尾动画
225 [UIView beginAnimations:nil context:nil];
226 self.headImageView.bounds=bounds;
227 [UIView setAnimationDuration:2.0];
228 [UIView commitAnimations];
229 }
230
231 -(void)Rotate:(UIButton *)rotate
232 {
233 //位移(不累加)
234 //self.headImageView.transform=CGAffineTransformMakeTranslation(50, 200);
235 //缩放
236 //self.headImageView.transform=CGAffineTransformMakeScale(1.2, 10);
237 //在原有的基础上位移(是累加的)
238 //self.headImageView.transform=CGAffineTransformTranslate(self.headImageView.transform, 50, 50);
239 //在原有的基础上进行缩放
240 //self.headImageView.transform=CGAffineTransformScale(self.headImageView.transform, 1.5, 1.6);
241
242 //在原有的基础上进行旋转
243 if (rotate.tag) {
244 //旋转角度为1/pi,逆时针
245 self.headImageView.transform=CGAffineTransformRotate(self.headImageView.transform, -M_1_PI);
246 }
247 else
248 {
249 //旋转的角度为pi/2,顺时针
250 self.headImageView.transform=CGAffineTransformRotate(self.headImageView.transform, M_PI_2);
251 }
252
253 }
254 @end

实现效果:

3.viewDidLoad

viewDidLoad是视图加载完成后调用的方法,通常在此方法中执行视图控制器的初始化工作

在viewDidLoad方法中,一定不要忘记调用父类的方法实现

[super viewDidLoad];

时间: 2024-10-09 19:00:17

iOS开发UI基础—transframe属性(形变)的相关文章

文顶顶 iOS开发UI篇—transframe属性(形变)

iOS开发UI篇—transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffineTransformMakeTranslation(平移) CGAffineTransformMakeScale(缩放) CGAffineTransformMakeRotation(旋转) (2) 创建“基于transform参数”的形变

iOS开发UI篇—transframe属性(形变)

1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffineTransformMakeTranslation(平移) CGAffineTransformMakeScale(缩放) CGAffineTransformMakeRotation(旋转) (2) 创建“基于transform参数”的形变 CGAffineTransformTranslate

IOS开发UI基础文本属性Attributes

文本属性Attributes 1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontSize] 设置字体 3.NSForegroundColorAttributeName :[UIColor redColor] 设置文字颜色 4.NSParagraphStyleAttributeName : paragraph 设置段落样式 5.NSMutablePar

IOS开发UI基础UILabel属性

UILabel属性 1.text:设置标签显示的文本. 2.attributedText:设置标签属性文本. Ios代码 NSString *text = @"first";  NSMutableAttributedString *textLabelStr = [[NSMutableAttributedString alloc] initWithString:text];  [textLabelStr setAttributes:@{NSForegroundColorAttribute

IOS开发UI基础UISlide属性

UISlide属性 •    minimumValue  : 当值可以改变时,滑块可以滑动到最小位置的值,默认为0.0_slider.minimumValue = 10.0; •    maximumValue : 当值可以改变时,滑块可以滑动到最大位置的值,默认为1.0_slider.maximumValue = 100.0; •    continuous : 如果设置YES,在拖动滑块的任何时候,滑块的值都会改变.默认设置为YES[_slider setContinuous:NO]; //

IOS开发UI基础UIImageView属性属性

UIImageView属性 1.Image 设置图片,默认显示 UIImageView *_imageView = [[UIImageView alloc]init]; _imageView.image = [UIImage imageNamed:@"me.png"]; 2.highlightedImage 设置高亮状态下显示的图片_imageView.highlightedImage = [UIImage imageNamed:@"other.png"]; 3.a

IOS开发UI基础UISwitch属性

UISwitch属性1. onTintColor   处于on时switch 的颜色?    switchImage.onTintColor = [UIColor grayColor];2.tintColor 处于off时switch 的颜色    switchImage.tintColor = [UIColor greenColor];3.onImage      设置on 的图标?    switchImage.onImage = [UIImage imageNamed:@"1.png&qu

IOS开发UI基础UISegment属性

UISegment属性 1.segmentedControlStyle设置segment的显示样式.typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {UISegmentedControlStylePlain,     // large plain 系统默认平板样式segmentedControl.segmentedControlStyle = UISegmentedControlStylePlain; UISegmentedControlS

ios开发UI基础—Kvc简单介绍

一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #import <Foundation/Fo