手写UI是最早进行UI界面布局的方法，优点是灵活自由，缺点是使代码看起来比较长。平时学习的时候可以多尝试手写ui，这样会更深入熟悉控件。storyboard开发效率相对比较高。实际开发中看情况而定！！
下面用这两种方式分别实现图片移动和缩放。
功能描述：
1. 界面布局
2.点击相应的按钮，对显示的图片移动、缩放。
效果如下：
掌握点：
一：熟悉代码的描述UIButton属性
1.UIButton状态
UIControlStateNormal // 正常状态
UIControlStateHighlighted // 高亮状态
UIControlStateDisabled // 禁用状态
UIControlStateSelected // 选中状态
UIControlStateApplication //
UIControlStateReserved // 保留状态
2.Uibutton类型：
UIButtonTypeCustom //自定义类型
UIButtonTypeRoundedRect //圆角类型
UIButtonTypeDetailDisclosure //细节展示按钮
UIButtonTypeInfoLight //浅色背景的信息按钮
UIButtonTypeInfoDark //暗色背景的信息按钮
UIButtonTypeContactAdd // 添加按钮
3.UIButton常用属性
给按钮设置文字时，苹果文档说明，不能使用label对象设置文字的颜色或者阴影颜色，相反必须使用setTitleColor:forState: andsetTitleShadowColor:forState:
//设置对应状态的标题内容default is nil. title is assumed to be single line
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
//设置对应状态的标题颜色
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
//设置对应状态的标题阴影颜色
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state;
//设置对应状态的按钮的图片
- (void)setImage:(UIImage *)image forState:(UIControlState)state;
//设置对应状态的按钮背景图片
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
添加事件
- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
这些事件都是基于触摸、基于值、基于编辑。有如下事件会触发。
在点击按钮是按钮是凹下去，然后弹起才触发起事件，按钮的状态有：
4.adjustsImageWhenDisabled
当按钮禁用的情况下，图像的颜色会被画深一点，默认为YES。
5.adjustsImageWhenHighlighted
当按钮高亮的情况下，图像的颜色会被画深一点，默认为YES。
6.showsTouchWhenHighlighted
button.showsTouchWhenHighlighted=YES;点击时的闪光效果会被前景图片遮住中间部分；
6.contentEdgeInsets
设置按钮的内部内容（包含按钮图片和标题）离按钮边缘上下左右的距离。
7.按钮实例
1.有些时候我们想让UIButton的title居左对齐，我们设置
btn.textLabel.textAlignment = UITextAlignmentLeft
是没有作用的，我们需要设置
btn.contentHorizontalAlignment = UIControlContentHorizonAlignmentLeft;
但是问题又出来，此时文字会紧贴到左边框，我们可以设置
btn.contentEdgeInsets = UIEdgeInsetsMake(0,10, 0, 0);
使文字距离左边框保持10个像素的距离。
对应的storyboard
二：frame,bounds,center
frame：描述当前视图在其父视图中的位置和大小。
bounds：描述当前视图在其自身坐标系统中的位置和大小。
center：描述当前视图的中心点在其父视图中的位置。
了解UIButton属性之后，马上动手写纯代码编写ui
1.二话不说，首先把用到的图片放到Images.xcassets文件夹中（此处存放的事png图片，非png图片建议放在Supporting Files下面）
2.UI代码。
ViewController.m
//
// ViewController.m
// 移动和缩放(纯代码实现)
//
// Created by zxh on 15/8/30.
// Copyright (c) 2015年 zxh. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//添加控件
[self addImage];
[self addButton];
}
/**
* 创建显示图片按钮控件
*/
-(void)addImage{
//创建UIButton
UIButton *head = [[UIButton alloc] init];
//设置位置
head.frame = CGRectMake(100, 100, 100, 100);
//普通状态显示的图片、文字、文字颜色
UIImage *imageNormal = [UIImage imageNamed:@"btn_01"];
[head setBackgroundImage:imageNormal forState:UIControlStateNormal];
[head setTitle:@"点击我" forState:UIControlStateNormal];
[head setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
//高亮状态显示的图片、文字、文字颜色
UIImage *imageHigh = [UIImage imageNamed:@"btn_02"];
[head setBackgroundImage:imageHigh forState:UIControlStateHighlighted];
[head setTitle:@"摸我干啥！" forState:UIControlStateHighlighted];
[head setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
//字体的大小
head.titleLabel.font = [UIFont systemFontOfSize:14];
//设置tag
head.tag = 10;
[self.view addSubview:head];
}
/**
* 创建上下左右移动，变大变小，旋转按钮
*/
-(void)addButton{
//创建做移动按钮
UIButton *lefthead = [[UIButton alloc]init];
//按钮的显示位置
lefthead.frame = CGRectMake(30, 300, 30, 30);
//普通状态的显示
[lefthead setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
//高亮状态的显示
[lefthead setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
//监听按钮的TouchUpInside事件，触发leftheadClick方法
[lefthead addTarget:self action:@selector(leftheadClick) forControlEvents:UIControlEventTouchUpInside];
//设置tag的值（唯一的）
lefthead.tag = 20;
//右移动按钮
UIButton *righthead = [[UIButton alloc]init];
righthead.frame = CGRectMake(100, 300, 30, 30);
[righthead setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
[righthead setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
[righthead addTarget:self action:@selector(rightheadClick) forControlEvents:UIControlEventTouchUpInside];
righthead.tag = 30;
//上移动按钮
UIButton *uphead = [[UIButton alloc]init];
uphead.frame = CGRectMake(65, 250, 30, 30);
[uphead setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
[uphead setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
[uphead addTarget:self action:@selector(upheadClick) forControlEvents:UIControlEventTouchUpInside];
uphead.tag = 40;
//下移动按钮
UIButton *bottomhead = [[UIButton alloc]init];
bottomhead.frame = CGRectMake(65, 345, 30, 30);
[bottomhead setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
[bottomhead setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
[bottomhead addTarget:self action:@selector(bottomheadClick) forControlEvents:UIControlEventTouchUpInside];
bottomhead.tag = 50;
//变小按钮
UIButton *minushead = [[UIButton alloc]init];
minushead.frame = CGRectMake(220, 280, 30, 30);
[minushead setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
[minushead setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
[minushead addTarget:self action:@selector(minusheadClick) forControlEvents:UIControlEventTouchUpInside];
minushead.tag = 60;
//变大按钮
UIButton *plushead = [[UIButton alloc]init];
plushead.frame = CGRectMake(280, 280, 30, 30);
[plushead setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
[plushead setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
[plushead addTarget:self action:@selector(plusheadClick) forControlEvents:UIControlEventTouchUpInside];
plushead.tag = 70;
//左旋转按钮
UIButton *leftRotatehead = [[UIButton alloc]init];
leftRotatehead.frame = CGRectMake(220, 340, 30, 30);
[leftRotatehead setBackgroundImage:[UIImage imageNamed:@"left_rotate_normal"] forState:UIControlStateNormal];
[leftRotatehead setBackgroundImage:[UIImage imageNamed:@"left_rotate_highlighted"] forState:UIControlStateHighlighted];
[leftRotatehead addTarget:self action:@selector(leftRotateClick) forControlEvents:UIControlEventTouchUpInside];
leftRotatehead.tag = 80;
//右旋转按钮
UIButton *rightRotatehead = [[UIButton alloc]init];
rightRotatehead.frame = CGRectMake(280, 340, 30, 30);
[rightRotatehead setBackgroundImage:[UIImage imageNamed:@"right_rotate_normal"] forState:UIControlStateNormal];
[rightRotatehead setBackgroundImage:[UIImage imageNamed:@"right_rotate_highlighted"] forState:UIControlStateHighlighted];
[rightRotatehead addTarget:self action:@selector(rightRotateheadClick) forControlEvents:UIControlEventTouchUpInside];
rightRotatehead.tag = 90;
//以下是把按钮添加到view中
[self.view addSubview:lefthead];
[self.view addSubview:righthead];
[self.view addSubview:bottomhead];
[self.view addSubview:uphead];
[self.view addSubview:minushead];
[self.view addSubview:plushead];
[self.view addSubview:leftRotatehead];
[self.view addSubview:rightRotatehead];
}
/**
* 左移
*/
-(void)leftheadClick{
[self moveWithTag:20];
}
/**
* 右移
*/
-(void)rightheadClick{
[self moveWithTag:30];
}
/**
* 上移
*/
-(void)upheadClick{
[self moveWithTag:40];
}
/**
* 下移
*/
-(void)bottomheadClick{
[self moveWithTag:50];
}
/**
* 变小
*/
-(void)minusheadClick{
[self moveWithTag:60];
}
/**
* 变大
*/
-(void)plusheadClick{
[self moveWithTag:70];
}
/**
* 左移动
*/
-(void)leftRotateClick{
[self moveWithTag:80];
}
/**
* 右移动
*/
-(void)rightRotateheadClick{
[self moveWithTag:90];
}
/**
* 图片移动方法
*
* @param tag 按钮标识
*/
-(void)moveWithTag:(int)tag{
//获取显示图片按钮：viewWithTag 可类比 android 的findViewById
UIButton *head = (UIButton *)[self.view viewWithTag:10];
//获取显示图片按钮的frame（frame是可视化范围）
CGRect tempFrame = head.frame;
//开始动画
[UIView beginAnimations:nil context:nil];
//设置动画时间
[UIView animateWithDuration:2 animations:nil];
switch (tag) {
case 20: //左移动
tempFrame.origin.x -= 100;
break;
case 30: //右移动
tempFrame.origin.x += 100;
break;
case 40: //上移动
tempFrame.origin.y -= 100;
break;
case 50: //下移动
tempFrame.origin.y += 100;
break;
case 60: //变小
tempFrame.size.width -= 10;
tempFrame.size.height -= 10;
break;
case 70: //变大
tempFrame.size.width += 10;
tempFrame.size.height += 10;
break;
case 80: //左旋转
//transform使用
//head.transform = CGAffineTransformMakeRotation(80);//旋转
//head.transform = CGAffineTransformMakeScale(2,2);//比例
//head.transform = CGAffineTransformMakeTranslation(0, -10);
//以上三种都是在原来的基础上变化的，因此点击第二次的时候没有效果
head.transform = CGAffineTransformRotate(head.transform, -M_PI_2);
break;
case 90: //右旋转
head.transform = CGAffineTransformRotate(head.transform, M_PI_4);
break;
}
head.frame = tempFrame;
//提交动画
[UIView commitAnimations];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
下面是storyboard方式实现。
1. 打开storyboard界面，拖相应的控件布局好。并连线关联属性和事件。
2.连线关联之后，编辑业务代码
//
// ViewController.m
// 移动和缩放
//
// Created by zxh on 15/8/13.
// Copyright (c) 2015年 zxh. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *head;
- (IBAction)up;
- (IBAction)down;
- (IBAction)left;
- (IBAction)right;
- (IBAction)big;
- (IBAction)small;
- (IBAction)leftRotate;
- (IBAction)rightRotate;
- (IBAction)move:(UIButton *)but;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark 向上移动
- (IBAction)up {
//不允许直接修改 对象的 结构体属性 的成员
//允许直接修改 对象的结构体 属性
CGRect tempFrame = self.head.frame;
tempFrame.origin.y -=10;
self.head.frame = tempFrame;
}
#pragma mark 向下移动
- (IBAction)down {
CGRect tempFrame = self.head.frame;
tempFrame.origin.y += 10;
self.head.frame = tempFrame;
}
#pragma mark 向左移动
- (IBAction)left {
CGRect tempFrame = self.head.frame;
tempFrame.origin.x -= 10;
self.head.frame = tempFrame;
}
#pragma mark 向右移动
- (IBAction)right {
CGRect tempFrame = self.head.frame;
tempFrame.origin.x += 10;
self.head.frame = tempFrame;
}
#pragma mark 变大
- (IBAction)big {
CGRect tempFrame = self.head.frame;
tempFrame.size.width +=20;
tempFrame.size.height +=20;
self.head.frame = tempFrame;
}
#pragma mark 缩小
- (IBAction)small {
CGRect tempFrame = self.head.frame;
tempFrame.size.width -= 20;
tempFrame.size.height -= 20;
self.head.frame = tempFrame;
}
/**
* 左旋转
*/
- (IBAction)leftRotate {
self.head.transform = CGAffineTransformRotate(self.head.transform, -M_PI_2);
}
/**
* 右旋转
*/
- (IBAction)rightRotate {
self.head.transform = CGAffineTransformRotate(self.head.transform, M_PI_2);
}
@end
#pragma mark 移动（上下左右）
- (IBAction)move:(UIButton *)but {
CGRect tempFrame = self.head.frame;
switch (but.tag) {
case 10:
tempFrame.origin.y -= 10;
break;
case 20:
tempFrame.origin.x -= 10;
break;
case 30:
tempFrame.origin.y += 10;
break;
case 40:
tempFrame.origin.x += 10;
break;
}
－－－－－－－－－－－－－－－文章至此！！
版权声明：本文为博主原创文章，未经博主允许不得转载。
IOS基础UI之(三)手写UI和storyboard方式实现图片移动和缩放
原文：http://blog.csdn.net/zhixinhuacom/article/details/48140123