小项目一: UIButton的使用

来源：互联网发布：unity3d 合并模型编辑：程序博客网时间：2024/06/12 00:35

前言:

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:

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

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

0 0