ios学习-控制按钮图片的走动和变换

一.项目要求：制作一个界面，通过点击按钮来控制头像（按钮）向上，向下，向左，向右移动，可以左旋转，右旋转，以及放大和缩小。

二.开发步骤：

1.通过拖动按钮到storyboard搭建UI界面（后面会写怎么通过纯代码添加控件）

2.将需要用到的背景图片放到supporting files里面

3.设置按钮分别在高亮状态下和普通状态下的背景图片

4.控制按钮向上（下，左，右）移动

5.控制按钮放大（缩小）

6.控制按钮向左（向右旋转）

7.代码重构

三.详细步骤：

1.素材准备（按钮的背景图片）

2.打开Xcode，创建一个新工程

3.点击main.storyboard，在右下角拖9个Button控件到storyboard的相应位置

4.将含有背景图片的pics文件夹添加到Supporting Files文件夹中

5.对9个Button控件设置Normal状态下，和高亮状态下的背景图片，然后将按钮上的“Button”清除

6.给每个按钮连线，其中btn按钮选择outlet，其他按钮选择action；连线后编译器会自动生成代码

7.在ViewController.m文件实现各个方法

四.代码:

ViewController.h文件：

//
//  ViewController.h
//  控制按钮
//
//  Created by yongjianyu on 15/11/25.
//  Copyright (c) 2015年 yongjianyu. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIButton *btn;

- (IBAction)up:(id)sender;
- (IBAction)down:(id)sender;
- (IBAction)left:(id)sender;
- (IBAction)right:(id)sender;

- (IBAction)leftRotate:(id)sender;
- (IBAction)rightRotate:(id)sender;

- (IBAction)bigger:(id)sender;
- (IBAction)smaller:(id)sender;

@end

ViewController.m文件：

//
//  ViewController.m
//  控制按钮
//
//  Created by yongjianyu on 15/11/25.
//  Copyright (c) 2015年 yongjianyu. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@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.
}

//向上移动按钮
- (IBAction)up:(id)sender {
    //动画（头部）
    [UIView beginAnimations:nil context:nil];
    //设置动画的时间
    [UIView setAnimationDuration:1.0];
    //OC语法规定，不允许直接修改某个对象中结构体属性的成员
    //先取出frame的值，赋值给中间变量
    CGRect tempFrame = _btn.frame;
    //修改y值
    tempFrame.origin.y -= 50;
    //重新给按钮的frame赋值
    _btn.frame = tempFrame;
    //动画(尾部)
    [UIView commitAnimations];
}
//向下移动按钮
- (IBAction)down:(id)sender {
    [UIView beginAnimations:nil context:nil];
    //设置动画持续时间为1.0秒
    [UIView setAnimationDuration:1.0];
    CGRect tempFrame = _btn.frame;
    tempFrame.origin.y += 50;
    _btn.frame = tempFrame;
    [UIView commitAnimations];

}
//向左移动按钮
- (IBAction)left:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    CGRect tempFrame = _btn.frame;
    tempFrame.origin.x -= 50;
    _btn.frame = tempFrame;
    [UIView commitAnimations];

}
//向右移动按钮
- (IBAction)right:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    CGRect tempFrame = _btn.frame;
    tempFrame.origin.x += 50;
    _btn.frame = tempFrame;
    [UIView commitAnimations];

}

//向左旋转按钮
- (IBAction)leftRotate:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    //向左旋转PI／4
    _btn.transform = CGAffineTransformRotate(_btn.transform, - M_PI_4);
    [UIView commitAnimations];
}

//向右旋转按钮
- (IBAction)rightRotate:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    _btn.transform = CGAffineTransformRotate(_btn.transform, + M_PI_4);
    [UIView commitAnimations];
}

//边长放大到原来的1.2倍
- (IBAction)bigger:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    _btn.transform = CGAffineTransformScale(_btn.transform, 1.2, 1.2);
    [UIView commitAnimations];
}

//边长变为原来的0.8
- (IBAction)smaller:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    _btn.transform = CGAffineTransformScale(_btn.transform, 0.8, 0.8);
    [UIView commitAnimations];
}

@end

五.代码重构

ViewController.h文件

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

- (IBAction)reset:(id)sender;

@property (weak, nonatomic) IBOutlet UIButton *btn;
- (IBAction)run:(id)sender;

- (IBAction)rotate:(id)sender;

- (IBAction)scale:(id)sender;
@end

　　
ViewController.m文件

//
//  ViewController.m
//  Button
//
//  Created by yongjianyu on 15/11/22.
//  Copyright (c) 2015年 yongjianyu. All rights reserved.
//

#import "ViewController.h"
#define KDelta 50

@interface ViewController ()

@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.
}

- (IBAction)run:(id)sender {
    //
    [UIView beginAnimations:nil context:nil];
    //
    [UIView setAnimationDuration:1.0];
    //
//    CGRect tempFrame = _btn.frame;
    CGPoint tempCenter= _btn.center;
    //
    NSInteger tag = [sender tag];
    //
    switch (tag) {
        case 1:
            //
//            tempFrame.origin.y -= KDelta;
            tempCenter.y -= KDelta;
            break;
        case 3:
            //
//            tempFrame.origin.y += KDelta;
            tempCenter.y += KDelta;
            break;
            //
        case 2:
//            tempFrame.origin.x += KDelta;
            tempCenter.x += KDelta;
            break;
            //
        case 4:
//            tempFrame.origin.x -= KDelta;
            tempCenter.x -= KDelta;
            break;

        default:
            break;
    }

    //
//    _btn.frame = tempFrame;
    _btn.center = tempCenter;
    //
    [UIView commitAnimations];

}

- (IBAction)rotate:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    NSInteger tag = [sender tag];
    if (5==tag) {
        _btn.transform = CGAffineTransformRotate(_btn.transform, - M_PI_4);
    }else
          (_btn.transform = CGAffineTransformRotate(_btn.transform,+ M_PI_4));
    [UIView commitAnimations];
}

- (IBAction)scale:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    NSInteger tag = [sender tag];
    if (7==tag) {
     _btn.transform = CGAffineTransformScale(_btn.transform, 1.2, 1.2);
    [UIView commitAnimations];
    }else{
        _btn.transform = CGAffineTransformScale(_btn.transform, 0.8, 0.8);
    }

}

- (IBAction)reset:(id)sender {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    _btn.transform = CGAffineTransformIdentity;
    [UIView commitAnimations];
}
@end

　　

六.用纯代码创建Button，创建UI界面

代码如下：

//
//  ViewController.m
//  02-通过代码创建按钮
//
//  Created by yongjianyu on 15/11/25.
//  Copyright (c) 2015年 yongjianyu. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //头像
    UIButton *btn = [[UIButton alloc]init];
    btn.frame = CGRectMake(0, 0, 100, 100);
    CGFloat centerX = self.view.frame.size.width * 0.5;
    CGFloat centerY = self.view.frame.size.height * 0.25;
    btn.center = CGPointMake(centerX, centerY);
    UIImage *nomal = [UIImage imageNamed:@"adomikao.png"];
    [btn setBackgroundImage:nomal forState:UIControlStateNormal];
    [btn setTitle:@"Adomikao" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

    UIImage *hightlight = [UIImage imageNamed:@"adomikao1.png"];
    [btn setBackgroundImage:hightlight forState:UIControlStateHighlighted];
    [btn setTitle:@"yuyongjian" forState:UIControlStateHighlighted];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];

//    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:btn];

    //向上
    UIButton *up = [[UIButton alloc]init];
    up.frame = CGRectMake(0, 0, 25, 25);
    CGFloat upCenterX = self.view.frame.size.width * 0.25;
    CGFloat upCenterY = self.view.frame.size.height * 0.625;
    up.center = CGPointMake(upCenterX, upCenterY);
    UIImage *upNomal = [UIImage imageNamed:@"up.png"];
    [up setBackgroundImage:upNomal forState:UIControlStateNormal];
    UIImage *upHightlight = [UIImage imageNamed:@"up1.jpg"];
    [up setBackgroundImage:upHightlight forState:UIControlStateHighlighted];
    [self.view addSubview:up];
    [up addTarget:self action:@selector(upClick:) forControlEvents:UIControlEventTouchUpInside];

    //向下
    UIButton *down = [[UIButton alloc]init];
    down.frame = CGRectMake(0, 0, 25, 25);
    CGFloat downCenterX = self.view.frame.size.width * 0.25;
    CGFloat downCenterY = self.view.frame .size.height * 0.875;
    down.center = CGPointMake(downCenterX, downCenterY);
    UIImage *downNormal = [UIImage imageNamed:@"down.png"];
    [down setBackgroundImage:downNormal forState:UIControlStateNormal];
    UIImage *downheight = [UIImage imageNamed:@"sown1.jpg"];
    [down setBackgroundImage:downheight forState:UIControlStateHighlighted];
    [self.view addSubview:down];

    //向左
    UIButton *left = [[UIButton alloc]init];
    left.frame = CGRectMake(0, 0, 25, 25);
    CGFloat leftCenterX = self.view.frame.size.width * 0.125;
    CGFloat leftCenterY = self.view.frame.size.height * 0.75;
    left.center = CGPointMake(leftCenterX, leftCenterY);
    UIImage *leftNormal = [UIImage imageNamed:@"left.png"];
    [left setBackgroundImage:leftNormal forState:UIControlStateNormal];
    UIImage *leftHighlight = [UIImage imageNamed:@"left1.jpg"];
    [left setBackgroundImage:leftHighlight forState:UIControlStateHighlighted];
    [self.view addSubview:left];

    //向右
    UIButton *right = [[UIButton alloc]init];
    right.frame = CGRectMake(0, 0, 25, 25);
    CGFloat rightCenterX = self.view.frame.size.width * 0.375;
    CGFloat rightcenterY = self.view.frame.size.height * 0.75;
    right.center = CGPointMake(rightCenterX, rightcenterY);
    UIImage *rightNormal = [UIImage imageNamed:@"right.png"];
    [right setBackgroundImage:rightNormal forState:UIControlStateNormal];
    UIImage *rightHighlight = [UIImage imageNamed:@"right1.jpg"];
    [right setBackgroundImage:rightHighlight forState:UIControlStateHighlighted];
    [self.view addSubview:right];

    //放大
    UIButton *big = [[UIButton alloc]init];
    big.frame = CGRectMake(0, 0, 25, 25);
    CGFloat bigCenterX = self.view.frame.size.width * 0.625;
    CGFloat bigCenterY = self.view.frame.size.height * 0.625;
    big.center = CGPointMake(bigCenterX, bigCenterY);
    UIImage *bigNormal = [UIImage imageNamed:@"plus.jpg"];
    [big setBackgroundImage:bigNormal forState:UIControlStateNormal];
    UIImage *bighighlight = [UIImage imageNamed:@"plus1.png"];
    [big setBackgroundImage:bighighlight forState:UIControlStateHighlighted];
    [self.view addSubview:big];

    //缩小
    UIButton *small = [[UIButton alloc]init];
    small.frame = CGRectMake(0, 0, 25, 25);
    CGFloat smallCenterX = self.view.frame.size.width * 0.875;
    CGFloat smallCenterY = self.view.frame.size.height * 0.625;
    small.center = CGPointMake(smallCenterX, smallCenterY);
    UIImage *smallNormal = [UIImage imageNamed:@"minus.png"];
    [small setBackgroundImage:smallNormal forState:UIControlStateNormal];
    UIImage *smallHighlight = [UIImage imageNamed:@"minus1.png"];
    [small setBackgroundImage:smallHighlight forState:UIControlStateHighlighted];
    [self.view addSubview:small];

    //向左旋转
    UIButton *leftRotate = [[UIButton alloc]init];
    leftRotate.frame = CGRectMake(0, 0, 25, 25);
    CGFloat leftRotateCenterX = self.view.frame.size.width * 0.625;
    CGFloat leftRotateCenterY = self.view.frame.size.height * 0.875;
    leftRotate.center = CGPointMake(leftRotateCenterX, leftRotateCenterY);
    UIImage *leftRotateNormal = [UIImage imageNamed:@"anticlockwise.jpg"];
    [leftRotate setBackgroundImage:leftRotateNormal forState:UIControlStateNormal];
    UIImage *leftRotateHighlight = [UIImage imageNamed:@"anticlokwise1.png"];
    [leftRotate setBackgroundImage:leftRotateHighlight forState:UIControlStateHighlighted];
    [self.view addSubview:leftRotate];

    //向右旋转
    UIButton *rightRotate = [[UIButton alloc]init];
    rightRotate.frame = CGRectMake(0, 0, 25, 25);
    CGFloat rightRotateCenterX = self.view.frame.size.width * 0.875;
    CGFloat rightRotateCenterY = self.view.frame.size.height * 0.875;
    rightRotate.center = CGPointMake(rightRotateCenterX, rightRotateCenterY);
    UIImage *rightRotateNormal = [UIImage imageNamed:@"clockwise.png"];
    [rightRotate setBackgroundImage:rightRotateNormal forState:UIControlStateNormal];
    UIImage *rightRotateHighlight = [UIImage imageNamed:@"clockwise1.png"];
    [rightRotate setBackgroundImage:rightRotateHighlight forState:UIControlStateHighlighted];
    [self.view addSubview:rightRotate];

}

-(void)upClick:(UIButton *)up{
    NSLog(@"------up");
    CGRect tempFrame = _btn.frame;
    tempFrame.origin.y -= 10;
    _btn.frame = tempFrame;

}

@end

　　

七.知识点总结

1.superView

~ @property(nonatomic,readonly) UIView *superView;

~ 获得自己的父控件对象

2.subViews

~ @property(nonatomic,readonly,copy) NSArray *subViews;

~ 获得自己的所有子控件对象(新添加的子控件会在subViews数组的最后面)

3.tag

~ @property(nonatomic) NSInteger tag;

~  控件的ID/标识，父控件可以通过tag来找对应的子控件

4.frame

~ @property(nonatomic) CGRect frame;

~ 控件所在矩形框的位置和尺寸(以父控件的左上角为坐标原点)

5.bounds

~ @property(nonatomic) CGRect bounds;

~ 控件所在矩形框的位置和尺寸(以自己的左上角为坐标原点，所以bounds的x，y一般为0)

6.center

~ @property(nonatomic) CGPoint center;

~ 控件所在的矩形框的中点(以父控件的左上角为原点)

7.transform

~ @property(nonatomic) CGAffineTransform transform;

~ 控件的形变属性(可以设置旋转角度，比例缩放，平移等属性)

typedef int NSInteger  //typedef给类型取一个新名字，说明NSInteger是int类型，说明tag是整数