IOS开发UI—纯代码实现控件及其基本属性
一、纯代码实现
1. 步骤
1> 了解自己需要实现的控件对象，在使用响应的控件类创建控件对象（先有对象，后有类）
2> 设置控件属性，注意位置也是属性；看看是否有响应事件
3> 添加控件到视图中
2. 在前面的基础篇中讲到Main.storyboard用来实现界面的编辑。在这个页面中的内容其实都是可以通过代码实现的。
3. 设置控件监听方法的示例代码如下：
[btn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside]
提示：
1> addTarget方法定义在UIControl类中，这意味着可以给所有继承自UIControl类的对象添加监听方法
2> 监听方法的第一个参数就是对象本身
3> 监听方法的第二个参数是监听控件的事件
4. 案例代码
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
// 动态创建我们自己的按钮
// 1.创建按钮
UIButton *button = [[UIButton alloc] init];
// 设置自定义按钮
// UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
// 2.普通状态文字
[button setTitle:@"点我吧" forState:UIControlStateNormal];
// 设置文字颜色
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// 设置按钮背景
UIImage *imgNormal = [UIImage imageNamed:@"btn_01"];
[button setBackgroundImage:imgNormal forState:UIControlStateNormal];
// 设置高亮状态下的文字
[button setTitle:@"摸我干嘛" forState:UIControlStateHighlighted];
[button setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
UIImage *imgHighlighted = [UIImage imageNamed:@"btn_02"];
[button setBackgroundImage:imgHighlighted forState:UIControlStateHighlighted];
// 设置位置
button.frame = CGRectMake(105, 105, 55, 55);
// 为按钮注册一个点击事件 那个对象的 那个方法的
[button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
// 把动态的创建的按钮添加到控制器管理的view中
[self.view addSubview:button];
}
// 单击事件
- (void)buttonClick {
//
NSLog(@"小样被点击了");
}1. 参考http://blog.csdn.net/haojie2014/article/details/48131069（控件属性）
2. 通过以下属性可以修改控件的位置
frame.origin
center
注意bounds具有位置属性，但是不能进行更改位置操作
通过以下属性可以修改控件的尺寸
frame.size
bounds.size
3. 案例
/**
* 当要显示一个界面的时候，首先创建这个界面对应的控制器
* 控制器创建好后，接着创建控制器所管理的那个view，当这个view加载完毕后就开始执行下面的方法
* 所以只要viewDidLoad方法被执行了，就表示控制器所管理的view创建好了
*/
// ViewController_Code.m
// UI基础_day01_按钮实例
//
// Created by shumei on 15/9/1.
// Copyright (c) 2015年 shumei. All rights reserved.
//
#import "ViewController_Code.h"
//需要导入框架
#import
#pragma mark - 拓展类
@interface ViewController_Code ()
// 声明图片属性,会自动生成get set方法，返回
@property(nonatomic, weak)IBOutlet UIButton *iconImage;
@end
@implementation ViewController_Code
// 检测是否会生成getter方法
- (UIButton *)iconImage {
return _iconImage;
}
/**
* 当要显示一个界面的时候，首先创建这个界面对应的控制器
* 控制器创建好后，接着创建控制器所管理的那个view，当这个view加载完毕后就开始执行下面的方法
* 所以只要viewDidLoad方法被执行了，就表示控制器所管理的view创建好了
*/
//viewDidLoad是视图加载完成后调用的方法，通常在此方法中执行视图控制器的初始化工作
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
// 2.普通状态文字
[button setTitle:@"点我吧" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
UIImage *imgNormal = [UIImage imageNamed:@"btn_01"];
[button setBackgroundImage:imgNormal forState:UIControlStateNormal];
// 设置高亮状态下的文字
[button setTitle:@"摸我干嘛" forState:UIControlStateHighlighted];
[button setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
UIImage *imgHighlighted = [UIImage imageNamed:@"btn_02"];
[button setBackgroundImage:imgHighlighted forState:UIControlStateHighlighted];
button.frame = CGRectMake(100, 50, 100, 100);
// 把动态的创建的按钮添加到控制器管理的view中
[self.view addSubview:button];
// 最重要的一句,
self.iconImage = button;
#pragma mark - 实现控件功能
/** ------向上------ */
// 创建按钮对象
UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom];
// 设置属性(正常 高亮)
[topbtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
[topbtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
// 设置位置
topbtn.frame = CGRectMake(50, 150, 50, 50);
[topbtn setTag:0];
// 添加到视图中
[self.view addSubview:topbtn];
// 监听事件的方法
[topbtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
/** ------向右------ */
UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
rightbtn.frame = CGRectMake(100, 200, 50, 50);
[rightbtn setTag:1];
[self.view addSubview:rightbtn];
[rightbtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
/** ------向下------ */
UIButton *downBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
[downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
downBtn.frame = CGRectMake(50, 250, 50, 50);
[downBtn setTag:2];
[self.view addSubview:downBtn];
[downBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
/** ------向左------ */
UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
[leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
leftBtn.frame = CGRectMake(0, 200, 50, 50);
[leftBtn setTag:3];
[self.view addSubview:leftBtn];
[leftBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
/** ------放大------ */
UIButton *plusBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
[plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
plusBtn.frame = CGRectMake(170, 200, 50, 50);
[plusBtn setTag:4];
[self.view addSubview:plusBtn];
[plusBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
/** ------缩小------ */
UIButton *minuBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[minuBtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
[minuBtn setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
minuBtn.frame = CGRectMake(220, 200, 50, 50);
[minuBtn setTag:5];
[self.view addSubview:minuBtn];
[minuBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
}
#pragma mark - 封装
- (void)btnClick:(UIButton *)button {
// 传入一个参数
NSLog(@"点击了");
// 获取头像的坐标
CGRect rect;
rect.origin.x = self.iconImage.frame.origin.x;
rect.origin.y = self.iconImage.frame.origin.y;
NSString *str = NSStringFromCGRect(rect);
NSLog(@"头像位置为: %@", str);
// 使用frame与center属性
// CGRect frame = self.iconImage.frame;
CGPoint center = self.iconImage.center;
// 根据点击的按钮不同执行不同操作
switch (button.tag) {
case 0:
center.y -= 5;
// frame.origin.y -= 5;
NSLog(@"上");
break;
case 1:
center.x += 5;
NSLog(@"右");
break;
case 2:
center.y += 5;
NSLog(@"下");
break;
case 3:
center.x -= 5;
NSLog(@"左");
break;
default:
break;
}
// 将新值重新赋给对象的属性
// self.iconImage.center = center;
// 当时运行的时候发现图片按钮button 没有移动， 经过分析log也会输出，后面发现原来是自己没有将 self.iconImage = button;按钮赋给头像
// 设置动画
// 方式一：头尾式
// 开启动画
// [UIView beginAnimations:nil context:nil];
//
// self.iconImage.center = center;
//
// [UIView setAnimationDuration:1.5];
//
// // 提交动画
// [UIView commitAnimations];
// 方式二: block 块
[UIView animateWithDuration:1.5 animations:^{
self.iconImage.center = center;
// self.iconImage.frame = frame;
}];
}
// 放大或者缩小
- (void)zoom:(UIButton *)button {
NSLog(@"放大或者缩小");
// 获取头像的坐标
CGRect rect;
rect.origin.x = self.iconImage.frame.origin.x;
rect.origin.y = self.iconImage.frame.origin.y;
rect.size.width = self.iconImage.frame.size.width;
rect.size.height = self.iconImage.frame.size.height;
NSString *str = NSStringFromCGRect(rect);
NSLog(@"头像位置及大小为: %@", str);
// 使用bounds方式，缩放是以中点为中心点
CGRect bounds = self.iconImage.bounds;
switch (button.tag) {
case 4:
bounds.size.height += 5;
bounds.size.width += 5;
NSLog(@"放大");
break;
case 5:
bounds.size.width -= 5;
bounds.size.height -= 5;
NSLog(@"缩小");
default:
break;
}
// 设置动画
[UIView animateWithDuration:1.5 animations:^{
self.iconImage.bounds = bounds;
}];
// self.iconImage.bounds = bounds;
// 执行完动作后的大小以及位置
CGRect rect1;
rect1.origin.x = self.iconImage.frame.origin.x;
rect1.origin.y = self.iconImage.frame.origin.y;
rect1.size.height = self.iconImage.frame.size.height;
rect1.size.width = self.iconImage.frame.size.width;
NSString *str1 = NSStringFromCGRect(rect1);
NSLog(@"头像位置及大小为: %@", str1);
// // 获取头像的大小
// CGSize size1;
// size1.height = self.iconImage.frame.size.height;
// size1.width = self.iconImage.frame.size.width;
// NSString *str_size1 = NSStringFromCGSize(size1);
// NSLog(@"头像大小为: %@", str_size1);
} 
知道bounds的原理了：以中心点位原点进行缩放。所以坐标只是变化了缩放的一半（5 / 2）
还有通过动画可以知道，是先执行缩放动画，然后图片坐标往父控件原点坐标移动缩放的一般距离。
三、简单的动画效果
简单介绍首尾式动画效果实现步骤
（1）开始动画
（2）设置动画相关的时间等
（3）参与动画的行动
（4）提交动画
注：实现代码参考上面的代码
简单介绍block动画效果实现步骤
直接在块里面设置，形象简洁