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

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

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];

目录
相关文章
|
12天前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
107 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
1月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
127 66
|
29天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
23天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
1月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
150 3
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
2月前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。