iOS- 快速实现展示布局
来源:互联网 发布:数据分析师证书有哪些 编辑:程序博客网 时间:2024/05/22 10:35
看到这个界面,是不是觉得不像那种比较有规律的, 可以用 单独 tableViewCell 或者 xib 来实现方便些的,现在我直接在 C里快速实现展示布局.
一、程序实现
先看布局, 可以分成两个分区:在数据源方法里去处理展现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
- (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;
}
第一部分可以用两个标签去处理展示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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];
}
}
第二部分可以利用一个标签创建通过富文本去修改布局:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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 的富文本布局方法.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 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 赋值里调用这个方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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).
如需看详情版,请点击这里下载!
阅读全文
0 0
- iOS- 快速实现展示布局
- iOS 使用masonry布局,并实现展示动画
- 实现书架展示排列布局
- iOS 设置UIWebView 展示字体大小,颜色,展示布局
- IOS常用布局展示框架优缺点
- 简单实现动态展示view布局元素
- 用伸缩布局实现日历展示
- 1 快速实现空页面展示
- 【IOS】实现一种书本的展示特效
- 【IOS】实现一种书本的展示特效
- IOS UITableView 实现LOL数据展示
- IOS 图片切换展示的实现
- iOS实现图片自动轮播展示
- TableLayout 表格布局 实现展示ViewGroup内所有View
- Android_实现商品详情的展示页及布局
- ios之快速领会自动布局 VFL
- iOS CGRectDivide快速进行界面布局
- iOS xib实现百分比布局
- C# TcpClient网络编程传输文件
- 微信公众号开发生成带参数二维码的功能
- java spi与dubbo spi区别
- mysql批量新增和修改示例(foreach 使用)
- HTML <label> 标签
- iOS- 快速实现展示布局
- MapReduce之RecordWriter理解
- java打印服务程序实现
- SourceInsight基本用法
- python下安装sklearn
- drools应用开发点
- SpringBoot Properties常用应用属性配置列表
- Java空字符串与null的区别和判断字符串是否为空的方法(转载)
- Numpy 库准备放弃支持 Python 2