首页 > 其他分享 >iOS- 快速实现展示布局

iOS- 快速实现展示布局

时间:2023-06-01 10:01:57浏览次数:43  
标签:alloc 展示 self 布局 iOS cell NSString line model


概述


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


详细





iOS- 快速实现展示布局_富文本

看到这个界面,是不是觉得不像那种比较有规律的, 可以用 单独 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 创建效果图:

iOS- 快速实现展示布局_iOS_02

三、压缩文件截图

iOS- 快速实现展示布局_UI_03

四、其他补充

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

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



注:本文著作权归作者,由demo大师宣传,拒绝转载,转载需要作者授权




标签:alloc,展示,self,布局,iOS,cell,NSString,line,model
From: https://blog.51cto.com/u_7583030/6392477

相关文章

  • vue出现样式问题,竖线样式为正常展示
    预期样式效果: 但是有时候是这样的: 有时候又是好的,奇奇怪怪得bug,经过查看debugger,发现是代码逻辑出现了问题。 本来finally里面得东西是放在请求外面的,请求时异步得,先执行了下面finally里面的逻辑,导致后执行得请求返回来的函数,接收不到变量的变化就gg了,刚开始这里用的还......
  • 如何使用TableView展示表格数据
    如何使用TableView展示表格数据TableView可以展示一个行列二维表格。表格由表头和记录组成。表头由若干TableColumn组成。通过定义TableView的代码:TableView<Student>studentTableView;可以看出,记录的数据结构就是其模板参数。我们可以把Student的getXxx方法映射......
  • 大数据展示框架SuperSet 安装
    标签(空格分隔):协作框架**1.1Superset概述**ApacheSuperset是一个现代的数据探索和可视化平台。它功能强大且十分易用,可对接各种数据源,包括很多现代的大数据分析引擎,拥有丰富的图表展示形式,并且支持自定义仪表盘。**1.2环境说明**本课程使用的服务器操作系统为CentOS7,Sup......
  • 如何使用TreeView展示树状数据
    如何使用TreeView展示树状数据TreeView是一个可用于显示树形数据结构的UI组件。它提供了一个可折叠、可展开的树状视图。TreeView是一个树状结构,其根节点的类型是TreeItem。每个TreeItem又可以包含若干TreeItem。由此可组成一颗树形结构。效果展示示例代码importj......
  • iOS中容易用错的常用知识点
    坐标系转换ios中的坐标系有三种视图坐标系:原点(0,0)视图的左上角窗口坐标系:原点(0,0)窗口的左上角世界坐标系:原点(0,0)游戏中世界的原点平时开发中经常会遇到转UIWindow坐标问题,如:已知一个UI控件的坐标,把它转换到UIWindow时,它对应的UIWindow坐标是什么?苹果提供了一套相关的......
  • 产品布局.1(html)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • 产品布局.2(html)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • “此间有书”微信小程序效果图展示
    由于上传时微信官方那边不给通过,说什么涉及到图书版权信息,明明我这个估计到这一点都没有展示图书内容(哭泣)小程序分为四个模块:广场、书城、发现、我的。广场模块就是每日推荐,有句子、音乐、电影推荐(纯属个人爱好页面)书城模块就是搜索书籍、查看书籍、然后收藏书籍、短评书籍......
  • Vue07-Axios
    Axiosaxios是一个网络请求相关的库。axios:ajaxi/osystem使用axios编写的网络请求代码,可以运行在浏览器端,也可以在Node环境中运行。01.支持的请求方式axios(config)axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head......
  • LYT-WPF-基础-布局-Canvas面板
    已亲测!ZIndex实例有修改之处!!!本文转自:WPF教程五:布局之Canvas面板-.NET开发菜鸟-博客园(cnblogs.com),感谢~~Canvas:画布面板画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对......