iOS- 快速实现展示布局

淡淡的烟草味﹌ 2022-05-31 10:05 140阅读 0赞

# 概述 #

比较有规律的页面, 快速实现展示布局, 提高开发效率.

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10713.html][http_www.demodashi.com_demo_10713.html] ####

![576025-7997607bd248547f.png][]

看到这个界面,是不是觉得不像那种比较有规律的, 可以用 单独 tableViewCell 或者 xib 来实现方便些的,现在我直接在 C里快速实现展示布局.

#### 一、程序实现 ####

先看布局, 可以分成两个分区:在数据源方法里去处理展现

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        
        if (indexPath.section == 0) {
            
            static NSString *CellIdentifier = @"cell0";
            UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
            if (cell == nil) {
                cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
                cell.selectionStyle = UITableViewCellSelectionStyleNone;
                cell.backgroundColor = [UIColor whiteColor];
            } else {
                for(UIView *view in cell.contentView.subviews) {
                    [view removeFromSuperview];
                }
            }
    // 处理第一分区
     return cell;
            
        } else if (indexPath.section == 1) {
            
            static NSString *CellIdentifier = @"cell1";
            UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
            if(cell == nil) {
                cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
                cell.selectionStyle = UITableViewCellSelectionStyleNone;
                cell.backgroundColor = [UIColor whiteColor];
            } else {
                for(UIView *view in cell.contentView.subviews) {
                    [view removeFromSuperview];
                }
            }
    // 处理第二分区
      return cell;
        }
        return nil;
    }

第一部分可以用两个标签去处理展示:

NSArray *nameArr = @[@"商品销售额",@"商品销售毛利",@"毛利率"];
            NSArray *valueArr = @[@"￥311.00",@"￥143.00",@"46.11%"];
            NSInteger count = nameArr.count;
            
            for (int i=0; i<count; i++) { // 循环创建两个标签
                UIView *backView = [[UIView alloc] init];
                backView.frame = CGRectMake(i*UI_View_Width/count, 30, UI_View_Width/count, 40);
                [cell.contentView addSubview:backView];
                
                UILabel *nameLabel = [[UILabel alloc] init];
                nameLabel.frame = CGRectMake(0, 0, UI_View_Width/count, 20);
                nameLabel.font = [UIFont systemFontOfSize:14];
                nameLabel.textColor = YYPColor(52, 53, 54);
                nameLabel.textAlignment = NSTextAlignmentCenter;
                nameLabel.text = nameArr[i];
                [backView addSubview:nameLabel];
                
                UILabel *valueLabel = [[UILabel alloc] init];
                valueLabel.frame = CGRectMake(0, 20, UI_View_Width/count, 20);
                valueLabel.font = [UIFont systemFontOfSize:16];
                valueLabel.textColor = YYPColor(255, 45, 77);
                valueLabel.textAlignment = NSTextAlignmentCenter;
                valueLabel.text = valueArr[i];
                [backView addSubview:valueLabel];
                
                if (i > 0) { // 添加间隔竖线
                    UIView *line = [[UIView alloc] init];
                    line.frame = CGRectMake(0, 0, 0.5, 40);
                    line.backgroundColor = YYPColor(200, 200, 200);
                    [backView addSubview:line];
                }
            }

第二部分可以利用一个标签创建通过富文本去修改布局:

NSArray *dataSource = @[
                                    @{@"name":@"主粮系列", @"price1":@"85", @"price2":@"83", @"percent":@"4166"},
                                    @{@"name":@"零食大全", @"price1":@"85", @"price2":@"83", @"percent":@"4166"},
                                    ];
            
            UILabel *nameLabel = [[UILabel alloc]init];
            nameLabel.frame = CGRectMake(12, 0, 90, 60);
            nameLabel.font = [UIFont systemFontOfSize:14];
            nameLabel.textColor = YYPColor(52, 53, 54);
            nameLabel.text = dataSource[indexPath.row][@"name"];
            [cell.contentView addSubview:nameLabel];
            
            for (int i=0; i<3; i++) { // 循环创建一个标签
                
                CGFloat magrinL = 12;
                
                UILabel *crossLabel = [[UILabel alloc]init];
                crossLabel.frame = CGRectMake(magrinL+90+i*(UI_View_Width-magrinL-90)/3.0, 0, (UI_View_Width-magrinL-90)/3.0, 60);
                crossLabel.font = [UIFont systemFontOfSize:14];
                crossLabel.textColor = YYPColor(52, 53, 54);
                crossLabel.numberOfLines = 0;
                crossLabel.textAlignment = NSTextAlignmentCenter;
                NSString *titleStr; // 标题
                NSString *valueStr; // 值
                if (i == 0) {
                    titleStr = @"销售额";
                    valueStr = [NSString stringWithFormat:@"￥%@", dataSource[indexPath.row][@"price1"]];
                } else if (i == 1) {
                    titleStr = @"毛利";
                    valueStr = [NSString stringWithFormat:@"￥%@", dataSource[indexPath.row][@"price2"]];
                } else if (i == 2) {
                    titleStr = @"毛利率";
                    valueStr = [NSString stringWithFormat:@"%@%%", dataSource[indexPath.row][@"percent"]];
                }
              // 创建通过富文本去修改色系
                NSMutableAttributedString *string = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%@\n%@", titleStr, valueStr]];
                [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12] range:NSMakeRange(titleStr.length+1, valueStr.length)];
                [string addAttribute:NSForegroundColorAttributeName value:YYPColor(170, 170, 170) range:NSMakeRange(titleStr.length+1, valueStr.length)];
                
                NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
                paragraphStyle.alignment = NSTextAlignmentCenter;//居中
                paragraphStyle.lineSpacing = 3; // 调整行间距
                [string addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [string length])];
                crossLabel.attributedText = string;
                [cell.contentView addSubview:crossLabel];
                
                if (i > 0) { // 循环添加间隔横线
                    UIView *line = [[UIView alloc] init];
                    line.frame = CGRectMake(15, 59, UI_View_Width - 15, 0.5);
                    line.backgroundColor = YYPColor(200, 200, 200);
                    [cell.contentView addSubview:line];
                }
            }

这两个分区, 第一个布局用的较多, 第二个可以在商品介绍里用上富文本去修改色系.

#### 二、MVC测试 ####

PS:建议像这种死的分区可以这么来,但是多数据需要后台传数据的那种最好用 MVC来实现.

个人感觉后期维护修改界面布局的情况下, 直接在 cell 里修改会比较清晰方便.

第二种方法这里测试一下:

当以 MVC 形式来写的话, 标签我在 Cell 里还是用一个来先创建, 只不过多写一个label 的富文本布局方法.

/**
     * label 的富文本布局
     * 
     * titleStr 标题
     * ValueStr 值
     */
    - (NSMutableAttributedString *)setupAttriLabelWithTitleStr:(NSString *)titleStr ValueStr:(NSString *)valueStr {
        
        NSMutableAttributedString *string = [[NSMutableAttributedString alloc]initWithString:[NSString stringWithFormat:@"%@\n%@", titleStr, valueStr]];
        [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12] range:NSMakeRange(titleStr.length+1, valueStr.length)];
        [string addAttribute:NSForegroundColorAttributeName value:YYPColor(170, 170, 170) range:NSMakeRange(titleStr.length+1, valueStr.length)];
        
        NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
        paragraphStyle.alignment = NSTextAlignmentCenter; // 居中
        paragraphStyle.lineSpacing = 3; // 调整行间距
        [string addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [string length])];
        
        return string;
    }

然后在 Model 赋值里调用这个方法:

// model赋值
    - (void)setModel:(YYPSalesMarginModel *)model {
        
        _model = model;
        
        // 商品系列名称
        self.name.text = [NSString stringWithFormat:@"%@", model.name];
        
        // 销售额
        self.sale.attributedText = [self setupAttriLabelWithTitleStr:@"销售额" ValueStr:[NSString stringWithFormat:@"￥%.2f", model.sale]];
        
        // 毛利
        self.grossProfit.attributedText = [self setupAttriLabelWithTitleStr:@"毛利" ValueStr:[NSString stringWithFormat:@"￥%.2f", model.grossProfit]];
        
        // 毛利率
        self.percent.attributedText = [self setupAttriLabelWithTitleStr:@"毛利率" ValueStr:[NSString stringWithFormat:@"%.2f%%", model.percent]];
    }

MVC 创建效果图:

![576025-62f5c2641df4ce1f.png][]

#### 三、压缩文件截图    ####

![3A27F8BA-C0FC-4A28-8F21-F250440C8BBC.png][]

#### 四、其他补充 ####

界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!

其中对 MVC测试模式 感兴趣的,可以拖进项目中测试看下效果(采用了第三方MJExtension).

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10713.html]: http://www.demodashi.com/demo/10713.html
[576025-7997607bd248547f.png]: /images/20220531/b975733b1e3541adaf6c96c31be08025.png
[576025-62f5c2641df4ce1f.png]: /images/20220531/3f68f3da4b604ee4b10400832823e0bf.png
[3A27F8BA-C0FC-4A28-8F21-F250440C8BBC.png]: /images/20220531/c1659a674ef34617aeb67e57ab433bf7.png
[http_www.demodashi.com]: http://www.demodashi.com/