最终效果图
BeyondViewController.h
// // BeyondViewController.h // 6_ToolBar // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> @interface BeyondViewController : UIViewController - (IBAction)addClick:(UIBarButtonItem *)sender; - (IBAction)removeClick:(UIBarButtonItem *)sender; @property (weak, nonatomic) IBOutlet UIBarButtonItem *trashItem; // 从xib界面中拖过来的,前提是设置界面中的file 's owner 为当前控制器类,并且,在代码中加载nib的时候,也要指明owner是当前控制器类的实例对象,一般写self或者空 - (IBAction)deleteBtnClick:(UIButton *)sender; - (IBAction)headBtnClick:(UIButton *)sender; @end
BeyondViewController.m
// // BeyondViewController.m // 6_ToolBar // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "BeyondViewController.h" #import "RowView.h" #define kRowHight 65 // 类扩展 class extension 也叫匿名分类 @interface BeyondViewController () { // 成员,数组,由姓名组成 NSArray *_array_name; // 数组取值时的索引,与图片名挂钩 int _index; } @end @implementation BeyondViewController - (void)viewDidLoad { [super viewDidLoad]; _array_name =@[@"林黛玉",@"薛宝钗",@"妙玉",@"史湘云",@"探春",@"晴雯",@"nana"]; _index = 0; } - (IBAction)addClick:(UIBarButtonItem *)sender { // 调用自定义方法,通过代码创建一行rowView // UIView *rowView = [self createRowViewByCoding]; // 调用自定义方法,通过xib创建一行rowView UIView *rowView = [self createRowViewByXcodeInterfaceBuilding]; // 调用自定义方法,通过RowView的类方法,返回一个RowView的实例对象 // UIView *rowView = [self createRowViewByXIB]; // 3,添加到当前控制器的view [self.view addSubview:rowView]; // 5,动画效果 [UIView animateWithDuration:0.2 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = rowView.frame; frame.origin.x = 0; rowView.frame=frame; rowView.alpha = 1; } completion:^(BOOL finished) { // 4,置删除按钮为可用 _trashItem.enabled = YES; }]; } // 用xib创建一行 rowView,xib <--> nib ipa <-->apk - (UIView *)createRowViewByXIB { // 如果添加到了数组最后一张,从头开始添加 if (_index >= _array_name.count) { _index = 0; } // 下面先计算3个参数,图片名,姓名,rowView要显示的frame的Y坐标 NSString *imgName = [NSString stringWithFormat:@"%d.png",_index]; NSString *labelName = _array_name[_index]; // 新添加一行的y值 取决于view中最后一个子控件的y + height + 1 UIView *lastView = self.view.subviews.lastObject; CGFloat rowY = lastView.frame.origin.y + lastView.frame.size.height+1; // 调用类方法,返回一个创建好了的rowView RowView *rowView = [RowView rowViewWithHeadName:imgName andLabelName:labelName andRowY:rowY]; // 为下一次添加行作准备 _index++; return rowView; } // 用xib创建一行 rowView,xib <--> nib ipa <-->apk - (UIView *)createRowViewByXcodeInterfaceBuilding { // mainBundel加载xib,扩展名不用写.xib owner为nil时,手动addTarget,若为xib界面中file's owner指定的class的实例对象时,填self,这样就可以直接拖线 // 1,xib界面中file's owner指定的类class,目的仅仅是右击界面时,可以弹出连线 // 2,进行连线 // 3,代码loadNibNamed中指定owner为哪个实例对象,相当于addTarget中的第一个参数 NSArray *arrayXibObjects = [[NSBundle mainBundle] loadNibNamed:@"rowView" owner:self options:nil]; UIView *rowView = arrayXibObjects[0]; // 新添加一行的y值 取决于view中最后一个子控件的y + height + 1 UIView *lastView = self.view.subviews.lastObject; CGFloat rowY = lastView.frame.origin.y + lastView.frame.size.height+1; rowView.backgroundColor = [UIColor grayColor]; CGFloat winWidth = self.view.frame.size.width; rowView.frame = CGRectMake(320, rowY,winWidth, kRowHight); rowView.alpha = 0; // 如果添加到了数组最后一张,从头开始添加 if (_index >= _array_name.count) { _index = 0; } // 2,设置label内容 UILabel *name = (UILabel *)[rowView viewWithTag:1]; name.text = _array_name[_index]; // 3,设置headBtn内容 UIButton *btn = (UIButton *)[rowView viewWithTag:2]; NSString *imgName = [NSString stringWithFormat:@"%d.png",_index]; UIImage *img = [UIImage imageNamed:imgName]; [btn setImage:img forState:UIControlStateNormal]; // 为按钮添加点击事件 // [btn addTarget:self action:@selector(headBtnClick:) forControlEvents:UIControlEventTouchUpInside]; // 4,设置deleteBtn内容 UIButton *del = (UIButton *)[rowView viewWithTag:3]; // 为删除按钮添加点击事件 [del addTarget:self action:@selector(deleteBtnClick:) forControlEvents:UIControlEventTouchUpInside]; // 为下一次添加行作准备 _index++; return rowView; } // 用代码创建一行 rowView - (UIView *)createRowViewByCoding { // 如果添加到了数组最后一张,从头开始添加 if (_index >= _array_name.count) { _index = 0; } // 添加一行,实为view,view中左边是头像,右边是名字 UIView *rowView = [[UIView alloc]init]; // 新添加一行的y值 取决于view中最后一个子控件的y + height + 1 UIView *lastView = self.view.subviews.lastObject; CGFloat rowY = lastView.frame.origin.y + lastView.frame.size.height+1; rowView.backgroundColor = [UIColor grayColor]; CGFloat winWidth = self.view.frame.size.width; rowView.frame = CGRectMake(320, rowY,winWidth, kRowHight); rowView.alpha = 0; // 2,添加label到view UILabel *name = [[UILabel alloc]init]; name.frame = CGRectMake(0, 0, 320, kRowHight); name.backgroundColor = [UIColor clearColor]; name.textAlignment = NSTextAlignmentCenter; name.tag = 1; //方便后面点击头像按钮时,得到兄弟标签即姓名 // 随机索引,取姓名,取图片用的 //int randIndex = arc4random_uniform(_array_name.count); //name.text = _array_name[randIndex]; name.text = _array_name[_index]; [rowView addSubview:name]; // 3,添加头像到view // UIImage *img = [UIImage imageNamed:@"nana.jpg"]; // UIImageView *head = [[UIImageView alloc]initWithImage:img]; // head.frame = CGRectMake(0, 0,50, 50); // [rowView addSubview:head]; // 3,添加头像按钮到view UIButton *btn = [[UIButton alloc]init]; btn.frame = CGRectMake(0, 0,65, kRowHight); NSString *imgName = [NSString stringWithFormat:@"%d.png",_index]; UIImage *img = [UIImage imageNamed:imgName]; [btn setImage:img forState:UIControlStateNormal]; // 为按钮添加点击事件 [btn addTarget:self action:@selector(headBtnClick:) forControlEvents:UIControlEventTouchUpInside]; [rowView addSubview:btn]; // 4,添加删除按钮到view UIButton *del = [[UIButton alloc]init]; del.frame = CGRectMake(260, 0,65, kRowHight); [del setTitle:@"再见" forState:UIControlStateNormal]; // 为删除按钮添加点击事件 [del addTarget:self action:@selector(deleteBtnClick:) forControlEvents:UIControlEventTouchUpInside]; [rowView addSubview:del]; // 为下一次添加行作准备 _index++; return rowView ; } // 点击rowView里面的删除按钮 - (void)deleteBtnClick:(UIButton *)sender { // 拿到rowView UIView *rowView = sender.superview; [UIView animateWithDuration:0.3 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = rowView.frame; frame.origin.x = 320; rowView.frame=frame; rowView.alpha = 0; } completion:^(BOOL finished) { // rowView在父容器中的索引 int rowView_index = [self.view.subviews indexOfObject:rowView]; // 将rowView从其父控件中,即self.view中删除 [rowView removeFromSuperview]; _trashItem.enabled = self.view.subviews.count!=1; // rowView身后的这些rowView动画上移 for (int i=rowView_index; i<self.view.subviews.count; i++) { // rowView身后的这些rowView动画上移 UIView *rowViewSibling = self.view.subviews[i]; [UIView animateWithDuration:0.3 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = rowViewSibling.frame; frame.origin.y -= kRowHight + 1; rowViewSibling.frame=frame; }]; } }]; } // 点击头像按钮,弹出alterView - (void)headBtnClick:(UIButton *)sender { NSLog(@"点击了头像按钮--%@",sender); UIView *rowView = sender.superview; UILabel *name = (UILabel *)[rowView viewWithTag:1]; NSLog(@"被点击的按钮的兄弟标签是:%@",name); // 弹出alterView UIAlertView *alert = [[UIAlertView alloc]init]; [alert show]; } // 点击删除按钮Item - (IBAction)removeClick:(UIBarButtonItem *)sender { _trashItem.enabled = NO; // 删除最后一行 UIView *last = [self.view.subviews lastObject]; Class cls = [UIToolbar class]; if ([last isKindOfClass:cls]) { return; } // 动画效果 [UIView animateWithDuration:0.2 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = last.frame; frame.origin.x = 320; last.frame=frame; last.alpha = 0; } completion:^(BOOL finished) { // 动画完毕,从父控件中移除 [last removeFromSuperview]; // 删除完之后,让删除barbuttionitem置灰 _trashItem.enabled = self.view.subviews.count != 1; }]; } @end
RowView.h
// // RowView.h // 6_ToolBar // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> @interface RowView : UIView @property (weak, nonatomic) IBOutlet UIButton *headBtn; @property (weak, nonatomic) IBOutlet UILabel *nameLabel; - (IBAction)deleteBtnClick:(UIButton *)sender; + (RowView *)rowViewWithHeadName:(NSString *)headName andLabelName:(NSString *)labelName andRowY:(CGFloat)rowY; @end
RowView.m
// // RowView.m // 6_ToolBar // // Created by beyond on 14-7-24. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "RowView.h" #define kRowHight 65 @implementation RowView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code } return self; } /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code } */ // + 类方法中不能直接使用_访问成员变量,必须通过对象.点语法访问成员变量 // 参数1:头像按钮的图标名,参数2:姓名标签 + (RowView *)rowViewWithHeadName:(NSString *)headName andLabelName:(NSString *)labelName andRowY:(CGFloat)rowY { // mainBundel加载xib,扩展名不用写.xib NSArray *arrayXibObjects = [[NSBundle mainBundle] loadNibNamed:@"rowView" owner:nil options:nil]; RowView *rowView = arrayXibObjects[0]; // 1,设置rowView的属性 rowView.backgroundColor = [UIColor grayColor]; // 先是在屏幕外面,所以x是320 rowView.frame = CGRectMake(320, rowY,320, kRowHight); rowView.alpha = 0; // 2,设置label内容 // tag要遍历,效率低,不推荐,最好是rowView.xib连线到RowView.h文件,使用成员变量 // UILabel *nameLabel = (UILabel *)[rowView viewWithTag:1]; rowView.nameLabel.text = labelName; // 3,设置headBtn内容 // tag要遍历,效率低,不推荐,最好是rowView.xib连线到RowView.h文件,使用成员变量 // UIButton *headBtn = (UIButton *)[rowView viewWithTag:2]; UIImage *img = [UIImage imageNamed:headName]; [rowView.headBtn setImage:img forState:UIControlStateNormal]; return rowView; } // rowView中的删除按钮被点击了 - (IBAction)deleteBtnClick:(UIButton *)sender { // 拿到rowView UIView *rowView = sender.superview; [UIView animateWithDuration:0.3 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = rowView.frame; frame.origin.x = 320; rowView.frame=frame; rowView.alpha = 0; } completion:^(BOOL finished) { //NSLog(@"rowView.superView is %@",rowView.superview); // 先得到控制器的UIView UIView *control_view = rowView.superview; // rowView在父容器中的索引 int rowView_index = [control_view.subviews indexOfObject:rowView]; // 将rowView从其父控件中,即self.view中删除 [rowView removeFromSuperview]; // rowView身后的这些rowView动画上移 for (int i=rowView_index; i<control_view.subviews.count; i++) { // rowView身后的这些rowView动画上移 UIView *rowViewSibling = control_view.subviews[i]; [UIView animateWithDuration:0.3 animations:^{ // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量 CGRect frame = rowViewSibling.frame; frame.origin.y -= kRowHight + 1; rowViewSibling.frame=frame; }]; } }]; } @end
RowView.xib