iOS学习3_UI开发之纯代码/storyboard/xib

由于做android开发时间比较长，按照android的经验，一般开发界面都是使用xml来写布局文件的，很少会完全使用代码来写布局，最近刚学iOS，发现好多都是直接使用代码来写布局的。看视频学习刚好看到这个不错的小项目，因此做了一点小小的整理。

要实现的效果如下，点击加号添加一条，点击回收投标删除最下面一条，点击删除会删除当前的一条。点击头片会更改中间的文字。删除/添加会伴随动画。

1.使用纯代码来写布局

点击添加按钮

- (IBAction)add:(UIBarButtonItem *)sender{
    UIView * v = [self getRowView];
    UIView * lastView = [[self.view subviews] lastObject];
    NSLog(@"%@",lastView);
    CGFloat rowY = lastView.frame.origin.y + lastView.frame.size.height + 1;
    v.frame = CGRectMake(_screenWidth, rowY, _screenWidth, KHeight);
    v.alpha = 0;
    [self.view addSubview:v];
    
    [UIView animateWithDuration:0.5 animations:^{
        v.alpha = 1;
        v.frame = CGRectMake(0, rowY, _screenWidth, KHeight);
    }];
    [self.removeItem setEnabled:true];
}

点击回收最后面一条按钮

- (IBAction)remove:(UIBarButtonItem *)sender
{
    UIView * lastView = [[self.view subviews] lastObject];

    [UIView animateWithDuration:0.5 animations:^{
        CGRect tempF = lastView.frame;
        tempF.origin.x = _screenWidth;
        lastView.frame = tempF;
        lastView.alpha = 0;
    } completion:^(BOOL finished) {
        [lastView removeFromSuperview];
        [self.removeItem setEnabled:self.view.subviews.count > 1];
}];
}

getRowView函数是得到一行item的布局View

- (UIView *) getRowView
{
UIView * view = [[UIView alloc]init];
    view.bounds = CGRectMake(0, 0, self.view.frame.size.width, KHeight);
    [view setBackgroundColor:[UIColor grayColor]];
    
    // 创建文字
    UILabel * label = [[UILabel alloc]init];
    label.frame = CGRectMake(0, 0, self.view.frame.size.width, KHeight);
    label.text =_allNames[arc4random_uniform(_allNames.count)];
    label.textColor = [UIColor blackColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.tag = 10;
    [view addSubview:label];
    
    // 创建头像
    UIButton * icon = [[UIButton alloc]init];
    icon.frame = CGRectMake(20, 0, KHeight , KHeight);
    int randomIndex = arc4random_uniform(9);
    NSString *iconName = [NSString stringWithFormat:@"01%d.png", randomIndex];
    // 设置图片
    [icon setImage:[UIImage imageNamed:iconName] forState:UIControlStateNormal];
    // 添加监听器
    [icon addTarget:self action:@selector(iconClick:) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:icon];
    
    // 创建删除按钮
    UIButton * deleteIcon = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [deleteIcon setCenter:CGPointMake(280, KHeight/2)];
    deleteIcon.bounds = CGRectMake(0, 0, 60 , 30);
    [deleteIcon setTitle:@"删除" forState:UIControlStateNormal];
    [deleteIcon addTarget:self action:@selector(deleteClick:) forControlEvents:UIControlEventTouchUpInside];
    [view addSubview:deleteIcon];
    return  view;
}

点击图片的响应函数

- (void)iconClick:(UIButton *)btn
{
    UILabel * label = (UILabel *)[[btn superview] viewWithTag:10];
    NSString * oriStr = [label text];
    NSString * newStr = [NSString stringWithFormat:@"%@+%@",oriStr,oriStr];
    label.text = newStr;
}

点击删除某一项的按钮

- (void) deleteClick:(UIButton * )btn
{
    [UIView animateWithDuration:0.5 animations:^{
        CGRect tempF = [btn.superview frame];
        tempF.origin.x = _screenWidth;
        btn.superview.frame = tempF;
    } completion:^(BOOL finished) {
        
        // 将下面的所有项向上移动
        int startIndex = [self.view.subviews indexOfObject:btn.superview];
        [btn.superview removeFromSuperview];
        [UIView animateWithDuration:0.5 animations:^{
            for (int i = startIndex; i < self.view.subviews.count; i++) {
                UIView *child = self.view.subviews[i];
                CGRect tempF = child.frame;
                tempF.origin.y -= KHeight + 1;
                child.frame = tempF;
            }
        }];
        
    }];
}

可以看出来完全使用代码来写布局非常的麻烦，使用storyboard拖控件可以通过连线的方式减少代码量，上面的代码中，添加一条item的内容非常繁琐。

2.使用xib来作为每个item的加载布局

好处：不需要自己使用代码进行这一行的布局

缺点：存在的问题是还需要通过代码添加点击事件。

加载xib文件的方式生成每一行的布局，具体如下

- (UIView *) getRowView
{
    NSArray * views = [[NSBundle mainBundle] loadNibNamed:@"item" owner:nil options:nil];
    UIView * view = views[0];
    
    UIButton * icon = view.subviews[0];
    UILabel * label = view.subviews[1];
    UIButton * deleteIcon = view.subviews[2];
    NSLog(@"%@ + %@ + %@",icon,label,deleteIcon);
    NSString *iconName = [NSString stringWithFormat:@"01%d.png",arc4random_uniform(9)];
    
    [icon setImage:[UIImage imageNamed:iconName] forState:UIControlStateNormal];
    
    label.text = _allNames[arc4random_uniform(_allNames.count)];
    [deleteIcon addTarget:self action:@selector(deleteClick:) forControlEvents:UIControlEventTouchUpInside];
    return  view;
}

3.使用xib和连线

好处：不需要自己添加点击事件的触发。指定了FileOwer，FileOwer保证了可以连线，指定某个xib的FileOwer也就是指定了它的管理类。

缺点：这样存在的问题是代码间的耦合性太高，

理论上在创建一行时，也就是在getRowView方法里面，并不需要关注具体的细节，不需要关注他的子控件，最好的情况就是只给传递我们需要显示的数据，剩下的自己不需要处理。并且不好实现代码的复用。

注：必须指定File’s Ower 否则无法连线，并且在使用代码加载的时候指定该参数。FileOwer并不一定要是这个类，任何一个类都是可以的。

- (UIView *) getRowView
{
    NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"item" owner:self options:nil];
    UIView *view = views[0];
    UIButton * icon = view.subviews[0];
    UILabel * label = view.subviews[1];
    NSString *iconName = [NSString stringWithFormat:@"01%d.png", arc4random_uniform(9)];
    [icon setImage:[UIImage imageNamed:iconName] forState:UIControlStateNormal];
    label.text = _allNames[arc4random_uniform(_allNames.count)];
return view;
}

4.自定义View

注意：这里不能指定File Owner的属性，将View的Class属性设置为我们自定义的View即可连线。

MyView中的类方法如下

+ (MyView *) myViewWithIcon:(UIImage *)iconImage andLabel:(NSString *)labelStr
{
    MyView *view = [[NSBundle mainBundle] loadNibNamed:@"item" owner:nil options:nil][0];
    [view.iconBtn setImage:iconImage forState:UIControlStateNormal];
    
    view.label.text = labelStr;

    return view;
}

这样创建一行View的代码为

- (UIView *) getRowView
{
    MyView * view = [MyView myViewWithIcon:[UIImage imageNamed:[NSString stringWithFormat:@"01%d.png", arc4random_uniform(9)]] andLabel:_allNames[arc4random_uniform(_allNames.count)]];
return view;
}

使用MyView来创建一行View时就可以完全和其他的代码分开，因为处理它的子控件的业务全部由他自己来处理。

以上内容整理自视频