概述

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

详细

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

三、压缩文件截图

四、其他补充

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

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

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

iOS- 快速实现展示布局的更多相关文章

  1. iOS快速开发框架--Bee Framework

    Bee Framework是一款iOS快速开发框架,允许开发者使用Objective-C和XML/CSS来进行iPhone和iPad开发,由 Gavin Kwoe 和 QFish 开发并维护. 其早期 ...

  2. Redesign Your App for iOS 7 之 页面布局

    Redesign Your App for iOS 7 之 页面布局 http://www.vinqon.com/codeblog/?detail/11109

  3. iOS快速打企业包ipa

    简 首页 专题 发钱啦 注册 登录 简首页专题下载手机应用 gege 2016.01.19 16:55 写了24604字,被92人关注,获得了152个喜欢 iOS快速打企业包ipa 字数256 阅读1 ...

  4. 试用一款网荐的 iOS 快速布局UI库

      NerdyUI github: https://github.com/nerdycat/NerdyUI Cupcake (Swift 版本) github: https://github.com/ ...

  5. iOS开发~UI布局(三)深入理解autolayout

    一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...

  6. iOS下的界面布局利器-MyLayout布局框架

      Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...

  7. iOS 7 修改默认布局从status bar 底部开始

    最近在对公司的一个老项目进行版本升级,添加了导航栏和tabBar,并且在个人中心界面隐藏navigationBar,于是在控制器里添加了如下对象方法: - (void)viewWillAppear:( ...

  8. 【转】iOS,搜索标签布局

    前一阵时间,看过这样一个demo,代码不多,但是简洁易懂. 转自: //  代码地址: https://github.com/iphone5solo/PYSearch //  代码地址: http:/ ...

  9. IOS开发之绝对布局和相对布局(屏幕适配)

    之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...

随机推荐

  1. 点集转线python最优代码

    import arcpy import os import types def convertPoints(): arcpy.env.overwriteOutput = True inPts = ar ...

  2. easyui datagrid 计算

    转载,至高吴上(Alfa.wu) !谢谢! /******************************************************** 主要用于 明细表格 字段间的计算 Sta ...

  3. @JVM垃圾回收机制的一些概念

    数据类型 Java虚拟机中,数据类型可以分为两类:基本数据类型和引用数据类型 .基本类型的变量保存的值就是数值本身:而引用类型的变量保存引用值."引用值"代表了某个对象的引用,而不 ...

  4. 基于Qt的wifi智能小车的制作(一)

     基于Qt的wifi智能小车的制作(一) 好久不写博客了,真的是有点惭愧了.翻开上一次的博客,到现在已经2个多月了,只能说是自己太懒惰了!忙是另一回事!趁今天晚上有点时间回顾下这一段时间的收获以及做的 ...

  5. permission 文档 翻译 运行时权限

    文档位置:API24/guide/topics/security/permissions.html  System Permissions 系统权限 Android is a privilege-se ...

  6. JavaScript操作XML (一)

    JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准编程接口 中立于平台和语言 W3C 的标 ...

  7. Linq-System.Data.Linq.DataContext不包含采用“0”个参数的构造函数

    解决方法: 打开linq to sql 的db文件***.designer.cs,加上下面的代码: 加上这些构造函数之后重新生成就可以了.

  8. Mac下Sublime Text 总是以新窗口打开文件的解决办法

    Mac下的Sublime有个毛病,经常打开后,之前打开的窗口都没了,太难受了. Windows/Linux下的sublime总是默认的以标签页的形式打开关联的文件,但是在Mac下使用Sublime打开 ...

  9. 内有干货!2个人3个月怎样从零完毕一款社区App《林卡》

    嘿,大家好.我是不灭的小灯灯,我赌5毛你没听说过我的名字... 好啦.这篇不是鸡汤,是经验吐槽.干货分享! 所以乱七八糟的就不多说了.直接切入正题. 先说下自己的情况背景,眼下尚未毕业.非计算机专业, ...

  10. redis学习笔记——主从同步(复制)

    在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主服务器(master),而对主服务器进行复 ...