小项目一: 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:
这个项目除了我所使用的方法之外, 还有其他方法可以做到效果和我完全一样, 大家喜欢的可以自行去尝试一下.
这次就到里, 下次我们继续~
