看到這個(gè)界面,是不是覺得不像那種比較有規(guī)律的, 可以用 單獨(dú) tableViewCell 或者 xib 來實(shí)現(xiàn)方便些的,現(xiàn)在我直接在 C里快速實(shí)現(xiàn)展示布局.
先看布局, 可以分成兩個(gè)分區(qū):在數(shù)據(jù)源方法里去處理展現(xiàn)
- (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];
}
}
// 處理第一分區(qū)
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];
}
}
// 處理第二分區(qū)
return cell;
}
return nil;
}
第一部分可以用兩個(gè)標(biāo)簽去處理展示:
NSArray *nameArr = @[@"商品銷售額",@"商品銷售毛利",@"毛利率"];
NSArray *valueArr = @[@"￥311.00",@"￥143.00",@"46.11%"];
NSInteger count = nameArr.count;
for (int i=0; i<count; i++) { // 循環(huán)創(chuàng)建兩個(gè)標(biāo)簽
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];
}
}
第二部分可以利用一個(gè)標(biāo)簽創(chuàng)建通過富文本去修改布局:
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++) { // 循環(huán)創(chuàng)建一個(gè)標(biāo)簽
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; // 標(biāo)題
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"]];
}
// 創(chuàng)建通過富文本去修改色系
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; // 調(diào)整行間距
[string addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [string length])];
crossLabel.attributedText = string;
[cell.contentView addSubview:crossLabel];
if (i > 0) { // 循環(huán)添加間隔橫線
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];
}
}
這兩個(gè)方法, 第一個(gè)布局用的較多, 第二個(gè)可以在商品介紹里用上富文本去修改色系.
**PS:建議像這種死的分區(qū)可以這么來,但是多數(shù)據(jù)需要后臺(tái)傳數(shù)據(jù)的那種最好用 MVC來實(shí)現(xiàn). **
個(gè)人感覺后期維護(hù)修改界面布局的情況下, 直接在 cell 里修改會(huì)比較清晰方便.
第二種方法這里測(cè)試一下:
當(dāng)以 MVC 形式來寫的話, 標(biāo)簽我在 Cell 里還是用一個(gè)來先創(chuàng)建, 只不過多寫一個(gè)label 的富文本布局方法.
/**
* label 的富文本布局
*
* titleStr 標(biāo)題
* 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; // 調(diào)整行間距
[string addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [string length])];
return string;
}
然后在 Model 賦值里調(diào)用這個(gè)方法
// 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 創(chuàng)建效果圖
