IOS基础UI之(三)手写UI和storyboard方式实现图片移动和缩放

来源：互联网发布：金蝶软件苏州分公司编辑：程序博客网时间：2024/06/10 09:25

手写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;

这些事件都是基于触摸、基于值、基于编辑。有如下事件会触发。

在点击按钮是按钮是凹下去，然后弹起才触发起事件，按钮的状态有：

UIControlEventTouchDown // 按下
UIControlEventTouchDownRepeat 多次按下
UIControlEventTouchUpInside // 在按钮及其一定外围内松开
UIControlEventTouchUpOutside // 按钮外面松开

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

手动编写UI到此结束，代码看上去比较多也很冗余。但是还是很容易理解的。

下面是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

对比手写的方式，storyboard实现起来代码简洁多了。

storyboard方式还可以进行优化，简洁代码。可以同时绑定多个按钮，同时指向同一个方法。看实际情况而定，这里举上下左右移动为例。

给按钮设定tag唯一标识之后就方法传入本身UIButton对象就可操作该对象。

#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;            }

－－－－－－－－－－－－－－－文章至此！！

0 0