小项目一: UIButton的使用

前言:

UIButton是我们在做项目中最常用到的控件之一, 所以我们必须得熟悉使用它的一些方法和属性.

在这个小项目中, 我们使用的是纯代码编写, 不使用StoryBoard.

编程思想:

1. 创建被虐的按钮

2. 新建两个子视图作为两个操控板的容器视图

3. 使用NSArray定义按钮，以方便代码创建按钮

4. 在容器视图中添加按钮，并定义按钮的监听事件

5. 按钮事件的响应

开始:

首先, 我们得创建一个空的项目, 并且创建我们需要的Button, 下面使用for循环创建我们的控制按钮, 我这里使用的是iPhone5s的屏幕分辨率.

- (void)addButtonsActionToView:(UIView *)view image:(NSArray *)images action:(SEL)action
{
    for (NSInteger i = 0; i < 4; i++) {
        //1. 实例化按钮
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        //2. 设置按钮边框
        [button setFrame:CGRectMake((i % 2) * 80, (i / 2) * 80, 80, 80)];
        //3. 设置按钮的普通图像
        NSString *textNormal = [NSString stringWithFormat:@"sub_black_%@", images[i]];
        UIImage *imageNorml = [UIImage imageNamed:textNormal];
        [button setImage:imageNorml forState:UIControlStateNormal];
        //4. 设置按钮的长按图像
        NSString *textHigh = [NSString stringWithFormat:@"sub_blue_%@", images[i]];
        UIImage *imageHigh = [UIImage imageNamed:textHigh];
        [button setImage:imageHigh forState:UIControlStateHighlighted];
        
        //5. 设置监听的方法
        [button addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
        //6. 设置按钮的tag, 以区分按钮
        [button setTag:i];
        //7. 将按钮添加到容器视图
        [view addSubview:button];
    }
}

把创建好的按钮添加到视图上.

- (void)myButtonsView
{
    // 2. 创建两个容器视图
    UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 408, 160, 160)];
    //    [view1 setBackgroundColor:[UIColor redColor]];
    
    // 2.1 需要添加4个按钮
    // 有一个问题，就图片的文件名好像没有什么规律
    // 想法：可不可以用NSArray记录住图像的文件名，然后通过循环的方式创建按钮
    // 初始化一个按钮文件名的数组
    [self.view addSubview:view1];
    NSArray *imageName1 = @[@"up", @"down", @"prev", @"next"];
    [self addButtonsActionToView:view1 image:imageName1 action:@selector(translationView:)];
    
    UIView *view2 = [[UIView alloc]initWithFrame:CGRectMake(view1.frame.size.width, 408, 160, 160)];
    //    [view2 setBackgroundColor:[UIColor greenColor]];
    [self.view addSubview:view2];
    NSArray *imageName2 = @[@"rotate_ccw", @"rotate_cw", @"add", @"remove"];
    [self addButtonsActionToView:view2 image:imageName2 action:@selector(transformAction:)];
    
    // 3. 分别将4个按钮加入不同的容器视图
}

给每个按钮设置它们的操作方法

#pragma mark 按钮操作
// 按钮的上下左右操作
- (void)translationView:(UIButton *)sender{
    NSLog(@"哈哈哈 %ld", sender.tag);
    
    CGPoint point = [_button center];
    switch (sender.tag) {
        case 0:     //上
            point.y -= 20;
            if (point.y <= -60)
            {
                point.y = 610;
            }
            break;
        case 1:     //下
            point.y += 20;
            if (point.y >= 580) {
                point.y = 100;
            }
            break;
        case 2:     //左
            point.x -= 20;
            if (point.x <= -80) {
                point.x = 420;
            }
            break;
        case 3:     //右
            point.x += 20;
            if (point.x >= 420) {
                point.x = 0;
            }
            break;
            
        default:
            break;
    }
    [UIView animateWithDuration:1.5f animations:^{
        // 设置中心点
        [_button setCenter:point];
        NSLog(@"%f", _button.frame.origin.y);
    }];
}

// 按钮的形变操作
- (void)transformAction:(UIButton *)sender{
    NSLog(@"哈哈哈 %ld", sender.tag);
    CGAffineTransform transform;
    switch (sender.tag) {
        case 0:     //逆时针
            transform = CGAffineTransformRotate(_button.transform, -M_PI / 6);
            break;
        case 1:     //顺时针
            transform = CGAffineTransformRotate(_button.transform, M_PI / 6);
            break;
        case 2:     //放大
            transform = CGAffineTransformScale(_button.transform, 1.1, 1.1);
            break;
        case 3:     //缩小
            transform = CGAffineTransformScale(_button.transform, 1.0 / 1.1, 1.0 / 1.1);
            break;
            
        default:
            break;
    }
    // 设置按钮的形变.
    [UIView animateWithDuration:1.5f animations:^{
        [_button setTransform:transform];
    }];
}

创建被操作的Button

- (void)yellowButton{
    // 1. 创建黄色按钮
    // 1.1 实例化按钮
    _button = [UIButton buttonWithType:UIButtonTypeCustom];
    // 1.2 设置按钮文字
    [_button setTitle:@"我是按钮" forState:UIControlStateNormal];
    // 1.3 设置按钮背景颜色
    [_button setBackgroundColor:[UIColor orangeColor]];
    // 1.4 设置按钮监听事件
    [_button addTarget:self action:@selector(tapButton) forControlEvents:UIControlEventTouchUpInside];
    // 1.5 设置按钮位置
    [_button setFrame:CGRectMake(110.0, 100.0, 100.0, 100.0)];
    // 1.6 将按钮添加到视图
    [self.view addSubview:_button];
}

设置被操作的Button方法

// 按钮监听
- (void)tapButton
{
    NSLog(@"我被摸了");
    //初始化按钮的所有属性
    [UIView animateWithDuration:1.5f animations:^{
        _button.transform = CGAffineTransformIdentity;
    }];
}

最后在viewDidLoad方法里调用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //添加黄色按钮
    [self yellowButton];
    
    //添加上下左右, 放大缩小, 顺逆旋转按钮
    [self myButtonsView];

}

效果图

关于项目里所使用到的图片,  我会放到网盘里, 方便各位的下载

链接: http://pan.baidu.com/s/1jG88x7K 密码: lh0l

总结:

这里所展示的小Demo有涉及到一定的封装思想, 应该会有朋友问到, 为什么你的viewDidLoad里只写了两行的代码? 因为viewDidLoad方法是在视图一创建之后就会调用, 并且只会调用一次, 如果把所有的东西都放到viewDidLoad里, 会有一定的局限性, 不方便我们进一步的操作, 所以我们必须得分开来写, 等到以后熟练了之后, 我们就必须得使用设计模式来封装各个方法, 使用设计模式来封装项目好处多多呢, 等到大家学到设计模式的时候, 就会知道设计模式到底有多酷了.

PS:

这个项目除了我所使用的方法之外, 还有其他方法可以做到效果和我完全一样, 大家喜欢的可以自行去尝试一下.

这次就到里, 下次我们继续~