这里使用代码实现
大概过程:
1、创建工具条
2、创建插入条
3、添加头像、标签、删除按钮
4、点击头像获取标签信息
做一个简单的联系人列表,可以添加删除联系人,现在还没有添加头像和文字,接下来慢慢添加
1、如何在UIToolBar两头出现两个按钮bar button item
可是在按钮中间添加一个bar button item,然后设置按钮的属性Identifier为Flexible Space
2、然后拖拽添加事件
1 - (IBAction)add:(UIBarButtonItem *) sender; // 添加 2 - (IBAction)remove:(UIBarButtonItem *) sender; // 删除
3、实现消息响应
点击添加按钮后向视窗中添加一条联系人信息,每次都添加到最后边。
点击删除按钮从视窗中删除一条联系人信息,每次都先删除最后一条。当只剩下工具条时使删除按钮失效。
添加按钮
1 - (IBAction)add:(UIBarButtonItem *) sender // 添加 2 { 3 NSLog(@"%@",@"add"); 4 // 0.获取最后一个控件 5 UIView *last = [self.view.subviews lastObject]; 6 //计算当前要插入的控件的位置 7 // y = 最后一个控件的y + 最后一个控件的高度 + 间距 8 CGFloat rowY = last.frame.origin.y + last.frame.size.height + 1; 9 10 // 1.创建 11 UIView *view = [[UIView alloc] init]; 12 //view.frame = CGRectMake(0,rowY,320,50); 13 view.backgroundColor = [UIColor redColor]; 14 15 // 2.添加 16 [self.view addSubview:view]; 17 18 // 3.删除按钮有效 19 _removeItem.enabled = YES; 20 21 view.frame = CGRectMake(320, rowY, 320, 50); 22 view.alpha = 0; 23 // 4.执行动画 24 // 动画实现方式1 25 // [UIView beginAnimations:nil context:nil]; 26 // [UIView setAnimationDuration:1.0]; 27 28 // 动画实现方式2 29 //使用UIView的方法实现动画block 30 // [UIView animateWithDuration:1.0 animations:^{ 31 // 32 // }]; 33 // 使用UIView的方法实现动画block 34 [UIView animateWithDuration:kDur animations:^{ 35 view.frame = CGRectMake(0, rowY, 320, 50); 36 view.alpha = 1; 37 // 在动画结束后添加其他操作 38 } completion:^(BOOL finished) { 39 NSLog(@"%@",@"add完毕"); 40 }]; 41 42 // [UIView commitAnimations]; 43 }
其中的动画实现方式有三种:
1、动画实现方式1
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
// 出现动画
[UIView commitAnimations];
2、[UIView animateWithDuration:1.0 animations:^{
// 动画改变
}];
3、 [UIView animateWithDuration:kDur animations:^{
view.frame = CGRectMake(0, rowY, 320, 50);
view.alpha = 1;
}//这里在动画结束实现一些其他操作
completion:^(BOOL finished) {
NSLog(@"%@",@"add完毕");
}];
删除按钮
1 #pragma mark 删除一行 2 - (IBAction)remove:(UIBarButtonItem *) sender // 删除 3 { 4 NSLog(@"%@",@"remove"); 5 6 // 1.取出最后一个子控件 7 UIView *last = [self.view.subviews lastObject]; 8 // 判断是否是toolbar 9 //if([last isKindOfClass:[last class]]) return;// 10 [UIView animateWithDuration:kDur animations:^{ 11 CGRect temp = last.frame; 12 temp.origin.x = 320; 13 last.frame = temp; // 改变位置 14 last.alpha = 0; // 改变透明度 15 } completion:^(BOOL finished) { 16 // 2.删除子控件 17 [last removeFromSuperview]; 18 _removeItem.enabled = self.view.subviews.count != 1; 19 NSLog(@"%@",@"remove完毕"); 20 }]; 21 22 // 3.判断剩下的子控件的个数 23 // if(self.view.subviews.count == 1) 24 // { 25 // _removeItem.enabled = NO; 26 // } 27 28 }
4、给添加的子控件添加头像和标签
把add方法中得创建子控件分离出来到一个方法中
1 UIView *view = [self createRowView]; // 在原处替换为这句话
createRowView方法,常见一行信息包括头像和文字信息
1 // 创建一行 2 - (UIView *)createRowView 3 { 4 // 1 创建父控件 5 UIView *view = [[UIView alloc] init]; 6 //view.frame = CGRectMake(0,rowY,320,50); 7 view.backgroundColor = [UIColor redColor]; 8 9 // 2 添加标签 10 UILabel *lab = [[UILabel alloc] init]; 11 lab.frame = CGRectMake(0, 0, self.view.frame.size.width, 50); 12 // lab.center = CGPointMake(160, kRowH/2); 13 // 随机获取已经存在的几个名字 14 int nameIndex = arc4random_uniform([_allNames count]); 15 // 设置文字 16 lab.text = _allNames[nameIndex]; 17 // 设置背景 18 lab.backgroundColor = [UIColor clearColor]; 19 // 设置文本居中显示 20 lab.textAlignment = NSTextAlignmentCenter; // 枚举常量 21 // 设置tag属性 22 [lab setTag:kTag]; 23 // 添加到父控件 24 [view addSubview:lab]; 25 26 // 3 添加头像 27 UIButton *icon = [UIButton buttonWithType:UIButtonTypeCustom]; 28 icon.frame = CGRectMake(20, 0, 50, kRowH); 29 // 随机产生文件名 ,0~8 30 int randomindex = arc4random() % 9; 31 //int randomindex2 = arc4random_uniform(9); 32 NSString *name = [NSString stringWithFormat:@"01%d.png",randomindex]; 33 // 设置图片 34 [icon setImage:[UIImage imageNamed:name] forState:UIControlStateNormal]; 35 36 // 添加监听器,响应按钮按下事件 37 [icon addTarget:self action:@selector(iconClick:) forControlEvents:UIControlEventTouchUpInside]; 38 // 添加到父控件 39 [view addSubview:icon]; 40 41 42 43 return view; 44 }
1 // 监听器 2 - (void)iconClick:(UIButton *)btn 3 { 4 //NSLog(@"%@",btn); 5 // 根据tag获取父控件内部子控件tag为10的子控件 6 UILabel *lab = (UILabel *)[btn.superview viewWithTag:10]; 7 8 NSLog(@"%@",lab.text); 9 }
添加的数组在这里
1 // 类扩展(class extension 匿名分类) 2 // 添加类的私有属性和方法 3 @interface SLQViewController () 4 { 5 NSArray *_allNames; 6 } 7 @end 8 9 10 @implementation SLQViewController 11 12 #pragma mark 控制器的view调用完毕调用一次 13 - (void)viewDidLoad 14 { 15 [super viewDidLoad]; 16 17 _allNames = @[@"张三",@"李四",@"万物",@"傻缺"]; 18 }
现在效果如下,可添加一行,删除一行,并随机显示头像和标签
5、给每一条信息都添加删除按钮
在创建时直接添加上按钮,写在添加过头像之后
1 // 4.删除按钮 2 UIButton *del = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 3 del.frame = CGRectMake(250, 10, 60, 35); 4 del.backgroundColor = [UIColor yellowColor]; 5 [del setTitle:@"删除" forState:UIControlStateNormal]; 6 // 添加监听事件 7 [del addTarget:self action:@selector(deleteClick:) forControlEvents:UIControlEventTouchUpInside]; 8 9 [view addSubview:del];
然后响应按下事件
1 // 监听删除按钮 2 - (void)deleteClick:(UIButton *)del 3 { 4 // NSLog(@"%f",del.superview.frame.origin.y); 5 // 添加动画效果 6 [UIView animateWithDuration:kDur animations:^{ 7 // 改变位置 8 CGRect temp = del.superview.frame; 9 temp.origin.x = kWidth; 10 del.superview.frame = temp; 11 12 del.superview.alpha = 0; // 透明 13 } 14 // 动画执行结束后执行这个 15 completion:^(BOOL finished) 16 { 17 // 1 获取当前要删除控件的索引 18 int index = [self.view.subviews indexOfObject:del.superview]; 19 // 2 删除当前行 20 [del.superview removeFromSuperview]; 21 22 [UIView animateWithDuration:kDur-0.3 animations:^{ 23 // 3 删除后后面控件上移 24 for (int i = index; i < self.view.subviews.count; i ++) 25 { 26 // 27 UIView *child = self.view.subviews[i]; 28 CGRect temp = child.frame; 29 temp.origin.y -= kRowH + 1; 30 child.frame = temp; 31 } 32 }]; 33 34 // 4 判断删除按钮是否失效 35 _removeItem.enabled = self.view.subviews.count > 1; 36 37 }]; 38 39 }
代码
1 // 2 // SLQViewController.m 3 // 联系人管理 4 // 5 // Created by Christian on 15/5/13. 6 // Copyright (c) 2015年 itcast. All rights reserved. 7 // 8 9 #import "SLQViewController.h" 10 11 #define kDur 1.0 12 #define kRowH 50 13 #define kTag 10 14 #define kWidth 320 15 // 类扩展(class extension 匿名分类) 16 // 添加类的私有属性和方法 17 @interface SLQViewController () 18 { 19 NSArray *_allNames; 20 } 21 @end 22 23 24 @implementation SLQViewController 25 26 #pragma mark 控制器的view调用完毕调用一次 27 - (void)viewDidLoad 28 { 29 [super viewDidLoad]; 30 31 _allNames = @[@"张三",@"李四",@"万物",@"傻缺"]; 32 } 33 #pragma mark 添加一行 34 - (IBAction)add:(UIBarButtonItem *) sender // 添加 35 { 36 NSLog(@"%@",@"add"); 37 // 0.获取最后一个控件 38 UIView *last = [self.view.subviews lastObject]; 39 //计算当前要插入的控件的位置 40 // y = 最后一个控件的y + 最后一个控件的高度 + 间距 41 CGFloat rowY = last.frame.origin.y + last.frame.size.height + 1; 42 43 // 1.创建 44 // UIView *view = [[UIView alloc] init]; 45 // //view.frame = CGRectMake(0,rowY,320,50); 46 // view.backgroundColor = [UIColor redColor]; 47 UIView *view = [self createRowView]; 48 // 2.添加 49 [self.view addSubview:view]; 50 51 // 3.删除按钮有效 52 _removeItem.enabled = YES; 53 54 view.frame = CGRectMake(320, rowY, 320, 50); 55 view.alpha = 0; 56 // 4.执行动画 57 // 动画实现方式1 58 // [UIView beginAnimations:nil context:nil]; 59 // [UIView setAnimationDuration:1.0]; 60 61 // 动画实现方式2 62 //使用UIView的方法实现动画block 63 // [UIView animateWithDuration:1.0 animations:^{ 64 // 65 // }]; 66 // 使用UIView的方法实现动画block 67 [UIView animateWithDuration:kDur animations:^{ 68 view.frame = CGRectMake(0, rowY, 320, 50); 69 view.alpha = 1; 70 71 } completion:^(BOOL finished) { 72 NSLog(@"%@",@"add完毕"); 73 }]; 74 75 // [UIView commitAnimations]; 76 } 77 78 // 创建一行 79 - (UIView *)createRowView 80 { 81 // 1 创建父控件 82 UIView *view = [[UIView alloc] init]; 83 //view.frame = CGRectMake(0,rowY,320,50); 84 view.backgroundColor = [UIColor redColor]; 85 86 // 2 添加标签 87 UILabel *lab = [[UILabel alloc] init]; 88 lab.frame = CGRectMake(0, 0, self.view.frame.size.width, 50); 89 // lab.center = CGPointMake(160, kRowH/2); 90 // 随机获取已经存在的几个名字 91 int nameIndex = arc4random_uniform([_allNames count]); 92 // 设置文字 93 lab.text = _allNames[nameIndex]; 94 // 设置背景 95 lab.backgroundColor = [UIColor clearColor]; 96 // 设置文本居中显示 97 lab.textAlignment = NSTextAlignmentCenter; // 枚举常量 98 // 设置tag属性 99 [lab setTag:kTag]; 100 // 添加到父控件 101 [view addSubview:lab]; 102 103 // 3 添加头像 104 UIButton *icon = [UIButton buttonWithType:UIButtonTypeCustom]; 105 icon.frame = CGRectMake(20, 0, 50, kRowH); 106 // 随机产生文件名 ,0~8 107 int randomindex = arc4random() % 9; 108 //int randomindex2 = arc4random_uniform(9); 109 NSString *name = [NSString stringWithFormat:@"01%d.png",randomindex]; 110 // 设置图片 111 [icon setImage:[UIImage imageNamed:name] forState:UIControlStateNormal]; 112 113 // 添加监听器 114 [icon addTarget:self action:@selector(iconClick:) forControlEvents:UIControlEventTouchUpInside]; 115 // 添加到父控件 116 [view addSubview:icon]; 117 118 // 4.删除按钮 119 UIButton *del = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 120 del.frame = CGRectMake(250, 10, 60, 35); 121 del.backgroundColor = [UIColor yellowColor]; 122 [del setTitle:@"删除" forState:UIControlStateNormal]; 123 // 添加监听事件 124 [del addTarget:self action:@selector(deleteClick:) forControlEvents:UIControlEventTouchUpInside]; 125 126 [view addSubview:del]; 127 128 return view; 129 } 130 // 监听删除按钮 131 - (void)deleteClick:(UIButton *)del 132 { 133 // NSLog(@"%f",del.superview.frame.origin.y); 134 // 添加动画效果 135 [UIView animateWithDuration:kDur animations:^{ 136 // 改变位置 137 CGRect temp = del.superview.frame; 138 temp.origin.x = kWidth; 139 del.superview.frame = temp; 140 141 del.superview.alpha = 0; // 透明 142 } 143 // 动画执行结束后执行这个 144 completion:^(BOOL finished) 145 { 146 // 1 获取当前要删除控件的索引 147 int index = [self.view.subviews indexOfObject:del.superview]; 148 // 2 删除当前行 149 [del.superview removeFromSuperview]; 150 151 [UIView animateWithDuration:kDur-0.4 animations:^{ 152 // 3 删除后后面控件上移 153 for (int i = index; i < self.view.subviews.count; i ++) 154 { 155 // 156 UIView *child = self.view.subviews[i]; 157 CGRect temp = child.frame; 158 temp.origin.y -= kRowH + 1; 159 child.frame = temp; 160 } 161 }]; 162 163 // 4 判断删除按钮是否失效 164 _removeItem.enabled = self.view.subviews.count > 1; 165 166 }]; 167 168 } 169 170 // 监听头像按钮 171 - (void)iconClick:(UIButton *)btn 172 { 173 //NSLog(@"%@",btn); 174 // 根据tag获取父控件内部子控件tag为10的子控件 175 UILabel *lab = (UILabel *)[btn.superview viewWithTag:10]; 176 177 NSLog(@"%@",lab.text); 178 } 179 180 181 #pragma mark 删除一行 182 - (IBAction)remove:(UIBarButtonItem *) sender // 删除 183 { 184 NSLog(@"%@",@"remove"); 185 186 // 1.取出最后一个子控件 187 UIView *last = [self.view.subviews lastObject]; 188 // 判断是否是toolbar 189 //if([last isKindOfClass:[last class]]) return;// 190 [UIView animateWithDuration:kDur animations:^{ 191 CGRect temp = last.frame; 192 temp.origin.x = 320; 193 last.frame = temp; // 改变位置 194 last.alpha = 0; // 改变透明度 195 } completion:^(BOOL finished) { 196 // 2.删除子控件 197 [last removeFromSuperview]; 198 _removeItem.enabled = self.view.subviews.count != 1; 199 NSLog(@"%@",@"remove完毕"); 200 }]; 201 202 // 3.判断剩下的子控件的个数 203 // if(self.view.subviews.count == 1) 204 // { 205 // _removeItem.enabled = NO; 206 // } 207 208 } 209 210 211 @end