UIKit基础:10.纯代码的实现Transform和平移VIew的功能

在前面, 我们学会了UIView的Transform属性, 以及Frame属性, 并且使用storyboard的快捷方法实现了我们平移, 角度还有缩放等等功能, 那么我们如果要用纯代码的形式去实现呢? 现在让我们一起来看看如何去使用纯代码的形式完成之前我们所有的功能, 下面来看看例子:

首先我们需要创建一个可控的UIButton:

@interface ViewController ()
{
    UIButton *_button;
}
@end

- (void)myButton
{
    // 添加Button到UIView
    _button = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button setFrame:CGRectMake(self.view.frame.size.width / 2 - 40, 80, 80, 80)];
    [_button setBackgroundColor:[UIColor redColor]];
    [_button setTitle:@"我是按钮" forState:UIControlStateNormal];
    [self.view addSubview:_button];
}

由于我们需要在其他的方法获得该Button的属性, 所以需要把Button变成成员变量, 这样子方便我们对它进行操作.

创建好可控Button了, 然后再创建我们的控制Button:

- (void)addActionButtonsToView:(UIView *)view images:(NSArray *)images action:(SEL)action
{
    // 使用循环创建4个Button
    for (int i = 0; i < 4; i++) {
        // 1.实例化UIButton
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        // 2.设置Button的Frame
        [btn setFrame:CGRectMake((i % 2) * 80, (i / 2) * 80, 80, 80)];
        // 3.设置默认状态下的Button图片
        NSString *textNormal = [NSString stringWithFormat:@"sub_black_%@.png", images[i]];
        [btn setImage:[UIImage imageNamed:textNormal] forState:UIControlStateNormal];
        // 4.设置高亮状态下的Button图片
        NSString *textHigh = [NSString stringWithFormat:@"sub_blue_%@.png", images[i]];
        [btn setImage:[UIImage imageNamed:textHigh] forState:UIControlStateHighlighted];
        // 5.监听UIButton的方法
        [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
        // 6.设置Button的Tag值
        [btn setTag:i];
        // 7.添加Button到View上
        [view addSubview:btn];
    }

}

创建完Button之后我们需要创建两个View用来存放按钮, 并且给Button设置图片,位置, 大小:

- (void)myView
{
    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 160, 160, 160)];
    [view1 setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:view1];
    
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 160, self.view.frame.size.height - 160, 160, 160)];
    [view2 setBackgroundColor:[UIColor greenColor]];
    [self.view addSubview:view2];
    
    NSArray *imageNames = @[@"up", @"down", @"prev", @"next"];
    [self addActionButtonsToView:view1 images:imageNames action:@selector(translationAction:)];
    
    NSArray *imageNames2 = @[@"rotate_ccw", @"rotate_cw", @"add", @"remove"];
    [self addActionButtonsToView:view2 images:imageNames2 action:@selector(transformAction:)];
}

最后再把创建好的方法添加到viewDidLoad方法里:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self myButton];

    [self myView];
}

这就是效果图:

把界面搭起来之后, 我们就要去实现平移的功能:

- (void)translationAction:(UIButton *)sender
{
    NSLog(@"我工作了 %ld", sender.tag);
    CGPoint point = [_button center];
    
    switch (sender.tag) {
        case 0:
            point.y -= 20; // 上
            break;
        case 1:
            point.y += 20; // 下
            break;
        case 2:
            point.x -= 20; // 左
            break;
        case 3:
            point.x += 20; // 右
            break;
            
        default:
            break;
    }
    
    [UIView animateWithDuration:1.0f animations:^{
        [_button setCenter:point];
    }];
}

最后就是实现Transform的方法:

- (void)transformAction:(UIButton *)sender
{
    CGAffineTransform transform;
    
    switch (sender.tag) {
        case 0:
            transform = CGAffineTransformRotate(_button.transform, -M_PI_4);
            break;
        case 1:
            transform = CGAffineTransformRotate(_button.transform, M_PI_4);
            break;
        case 2:
            transform = CGAffineTransformScale(_button.transform, 1.2, 1.2);
            break;
        case 3:
            transform = CGAffineTransformScale(_button.transform, 1.0 / 1.2, 1.0 / 1.2);
            break;
            
        default:
            break;
    }
    [UIView animateWithDuration:1.0f animations:^{
        [_button setTransform:transform];
    }];
}

最终的效果我这里就没法给大家看了, 还是自己回去动手试试吧.

补充一个知识点, 大家都看到我创建UIButton的时候是用一个方法, 里面使用for循环就创建出来的, 其实这个有设计一些封装的思想, 是模仿apple的实例方法来创建的, 大家以后要多多学习apple的封装方法, 这样子可以让我们在开发的时候更快的上手.

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