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

时间：2015-08-31 23:41:37 阅读：303 评论：0 收藏：0 [点我收藏+]

标签：ios 手动编写ui storyboard 图片移动

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

－－－－－－－－－－－－－－－文章至此！！技术分享

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

标签：ios 手动编写ui storyboard 图片移动

原文地址：http://blog.csdn.net/zhixinhuacom/article/details/48140123

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行