iOS Excel效果
最近做一个详情页的时候 需求给了一个展示商品属性的页面
如下
我明明记得淘宝以前就是张图片 然后找需求商量 不同意 。 无奈只能自己做了。
我使用的是UIcollectionView 做的 使用的是系统自带的布局 没有自定义
以下是我写的demo
第一步 添加宏定义
#define MAIN_TEXT_COLOR 0x333333
//当前设备宽度
#define ScreenWidth [[UIScreen mainScreen] bounds].size.width
//当前设备高度
#define ScreenHeight [[UIScreen mainScreen] bounds].size.height
//Color
#define RGB(r, g, b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0]
#define RGBA(r, g, b, a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]
#define HEXCOLOR(c) [UIColor colorWithRed:((c>>16)&0xFF)/255.0 green:((c>>8)&0xFF)/255.0 blue:(c&0xFF)/255.0 alpha:1.0]
//用于分割线颜色使用
#define DIVIDING_LINE_COLOR 0xe5e5e5
//以iPhone6s为参照 6P上使用6s 的大小
#define ADJUSTFONT_VALUE(value) (((ScreenWidth > 375 ? 375:ScreenWidth)) / 375 * value )
第二步：创建数据模型 model 命名为LZYAttributeModel
头文件内容如下
#import#import@interface LZYAttributeModel : NSObject
/**
key 属性描述
*/
@property (nonatomic ,strong)NSString *keyString;
/**
value 值描述
*/
@property (nonatomic ,strong)NSString *valueString;
/**
组合结果
*/
@property (nonatomic ,strong)NSString *textContent;
/**
获取当前cell大小
*/
@property (nonatomic, assign)CGSize size;
/**
几倍大小 （一 二 三）
*/
@property (nonatomic ,assign)NSInteger sizeNumber;
@end
模型 .m内容如下
#import "LZYAttributeModel.h"
@implementation LZYAttributeModel
- (NSString *)textContent {
if (_textContent.length == 0) {
_textContent = [NSString stringWithFormat:@"%@: %@",_keyString,_valueString];
}
return _textContent;
}
- (CGSize)size {
if (_size.width < 1) {
NSDictionary *attrs = @{NSFontAttributeName : [UIFont systemFontOfSize:ADJUSTFONT_VALUE(11)]};
CGSize size = [self.textContent sizeWithAttributes:attrs];
if ((size.width + 20) < (ScreenWidth - 20 - 4) / 3) {
_sizeNumber = 1;
_size = CGSizeMake((ScreenWidth - 20 - 4) / 3, 130 / 5 - 1);
}
else if ((size.width + 20) < ((ScreenWidth - 20 - 4) / 3 * 2 + 1)) {
_sizeNumber = 2;
_size = CGSizeMake((ScreenWidth - 20 - 4) / 3 * 2 + 1, 130 / 5 - 1);
}
else {
_sizeNumber = 3;
_size = CGSizeMake((ScreenWidth - 20 - 4) / 3 * 3 + 2, 130 / 5 - 1);
}
}
return _size;
}
@end
第三步：
创建cell
#import/**
基础参数 cell
*/
@interface LZYRVBrandBasicCollectionViewCell : UICollectionViewCell
/**
title
*/
@property (nonatomic ,strong)UILabel *titleLabel;
@end
//.m
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.contentView.backgroundColor = [UIColor whiteColor];
self.titleLabel = [[UILabel alloc]init];
self.titleLabel.textAlignment = NSTextAlignmentLeft;
self.titleLabel.numberOfLines = 1;
self.titleLabel.textColor = HEXCOLOR(MAIN_TEXT_COLOR);
self.titleLabel.font = [UIFont systemFontOfSize:ADJUSTFONT_VALUE(11)];
[self.contentView addSubview:self.titleLabel];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.contentView);
make.left.mas_equalTo(10);
make.right.equalTo(self.contentView.mas_right).offset(-10);
}];
}
return self;
}
@end
第四步 主控制器
#import/** 基本信息 view */@interface LZYRVBrandBasicParametersView : UIView/**
数据源 传入一个数组
*/
@property (nonatomic,strong)NSMutableArray *soureArr;
/**
用于设置view大小 先传递数据源 然后这个才会有值 宽度是当前屏幕宽度 只返回高度 使用者被动接受 防止数据未布局完成 就调用
*/
@property (nonatomic, copy) void (^heightBlock)(float height);
- (instancetype)initWithFrame:(CGRect)frame WithSourceArr:(NSMutableArray *)arr;
@end
主控制器内容
#import "LZYRVBrandBasicParametersView.h"
#import "LZYRVBrandBasicCollectionViewCell.h"
#import "LZYAttributeModel.h"
#import "View+MASAdditions.h"
@interface LZYRVBrandBasicParametersView ()
@property (nonatomic, strong)UICollectionView *collectionView;
/**
用于保存上一次计算的位置信息 防止重复计算
*/
@property (nonatomic, assign)int lastNumber;
/**
用于存放当前位置
*/
@property (nonatomic, assign)int blockViewNumber;
@end
@implementation LZYRVBrandBasicParametersView
- (instancetype)initWithFrame:(CGRect)frame WithSourceArr:(NSMutableArray *)arr {
if (self = [super initWithFrame:frame]) {
self.lastNumber = 0;
self.blockViewNumber = 0;
self.backgroundColor = [UIColor clearColor];
UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
layout.minimumLineSpacing = 1;
layout.minimumInteritemSpacing = 1;
self.collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(10, 13, ScreenWidth - 20, frame.size.height - 14 - 11) collectionViewLayout:layout];
self.collectionView.backgroundColor = HEXCOLOR(DIVIDING_LINE_COLOR);
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
self.collectionView.scrollsToTop = NO;
self.collectionView.showsVerticalScrollIndicator = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
[self.collectionView registerClass:[LZYRVBrandBasicCollectionViewCell class] forCellWithReuseIdentifier:@"LZYRVBrandBasicCollectionViewCell"];
self.collectionView.scrollEnabled = NO;
[self addSubview:self.collectionView];
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(13);
make.right.mas_equalTo(self.mas_right).offset(-10);
make.bottom.equalTo(self.mas_bottom).offset(- 12);
}];
_soureArr = [[NSMutableArray alloc]initWithArray:arr];
[self.collectionView reloadData];
}
return self;
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.soureArr.count ;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
LZYAttributeModel *model = self.soureArr[indexPath.row];
NSString *width = [NSString stringWithFormat:@"%.2lf",model.size.width];
return CGSizeMake([width floatValue] - 0.01, model.size.height);
}
//定义每个UICollectionView 的边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake ( 1 , 1 , 1 , 1 );
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
LZYRVBrandBasicCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LZYRVBrandBasicCollectionViewCell" forIndexPath:indexPath];
LZYAttributeModel *model = self.soureArr[indexPath.row];
if (model.keyString.length) {
cell.titleLabel.text = model.textContent;
}
else {
cell.titleLabel.text = @" ";
}
return cell;
}
//选中处理
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
}
- (void)setSoureArr:(NSMutableArray *)soureArr {
_soureArr = [[NSMutableArray alloc]initWithArray:soureArr];
self.lastNumber = 0;
self.blockViewNumber = 0;
[self sortArrWithArr:_soureArr];
}
- (void)sortArrWithArr:(NSMutableArray *)soureArr {
//用于存放出现位子
NSInteger typeNumber = -1;
self.blockViewNumber = 0;
//筛选数据 防止出现空的字符
for (int i = 0; i < self.soureArr.count; i++) {
LZYAttributeModel *model = self.soureArr[i];
//二倍大小
if (model.size.width == ((ScreenWidth - 20 - 4) / 3 * 2 + 1)) {
if (self.blockViewNumber % 3 == 2) {
typeNumber = i;
break;
}
else if (self.blockViewNumber % 3 == 1) {
LZYAttributeModel *model1 = self.soureArr[i - 1];
if (model1.size.width == ((ScreenWidth - 20 - 4) / 3 * 2 + 1)) {
typeNumber = i;
break;
}
}
}
//三倍大小
else if (model.size.width == ((ScreenWidth - 20 - 4) / 3 * 3 + 2)) {
if (self.blockViewNumber % 3 == 1 || self.blockViewNumber % 3 == 2) {
typeNumber = i;
break;
}
}
self.blockViewNumber = self.blockViewNumber + (int)model.sizeNumber;
}
//添加空白页面模型
if (typeNumber > -1) {
self.lastNumber = (int)typeNumber;
self.lastNumber++;
self.blockViewNumber++;
[self addNewModelWithNumber:typeNumber];
}
else {
if (self.blockViewNumber % 3 == 1) {
//加2个空model
self.blockViewNumber++;
self.blockViewNumber++;
[self.soureArr addObject:[self newModel]];
[self.soureArr addObject:[self newModel]];
}
else if(self.blockViewNumber % 3 == 2) {
//加1个空model
self.blockViewNumber++;
[self.soureArr addObject:[self newModel]];
}
//刷新数据
[self.collectionView reloadData];
[self reloadHeight];
}
}
- (void) reloadHeight {
if (self.heightBlock) {
self.heightBlock(self.blockViewNumber / 3 * 130 / 5 + 1 );
}
}
- (void)addNewModelWithNumber:(NSInteger)number {
[self.soureArr insertObject:[self newModel] atIndex:number];
[self sortArrWithArr:self.soureArr];
}
- (LZYAttributeModel *)newModel {
LZYAttributeModel *model = [[LZYAttributeModel alloc]init];
model.sizeNumber = 1;
return model;
}
@end
以上就是view的绘制
接下来就是调用
@interface ViewController ()
/**
基本参数
*/
@property (nonatomic ,strong)LZYRVBrandBasicParametersView *basicView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor grayColor];
UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 40, ScreenWidth, 150)];
bgView.backgroundColor = [UIColor blueColor];
[self.view addSubview:bgView];
self.basicView = [[LZYRVBrandBasicParametersView alloc]initWithFrame:CGRectMake(0, 56, ScreenWidth, 156) WithSourceArr:nil];
[bgView addSubview:self.basicView];
[self.basicView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(bgView);
make.top.mas_equalTo(0);
make.bottom.equalTo(bgView.mas_bottom).offset(0);
}];
self.basicView.heightBlock = ^(float height) {
bgView.frame = CGRectMake(0, 40, ScreenWidth, height + 81 - 56);
NSLog(@"基本参数：%lf",height);
};
self.basicView.soureArr = (NSMutableArray *)[self createDateSource1];
}
- (NSArray *)createDateSource1 {
LZYAttributeModel *model = [[LZYAttributeModel alloc]init];
model.keyString = @"床";
model.valueString = @"2张";
LZYAttributeModel *model1 = [[LZYAttributeModel alloc]init];
model1.keyString = @"冰箱";
model1.valueString = @"有";
LZYAttributeModel *model2 = [[LZYAttributeModel alloc]init];
model2.keyString = @"电视";
model2.valueString = @"有";
LZYAttributeModel *model3 = [[LZYAttributeModel alloc]init];
model3.keyString = @"空调";
model3.valueString = @"有";
LZYAttributeModel *model4 = [[LZYAttributeModel alloc]init];
model4.keyString = @"卫浴";
model4.valueString = @"有";
LZYAttributeModel *model5 = [[LZYAttributeModel alloc]init];
model5.keyString = @"电磁炉";
model5.valueString = @"有";
LZYAttributeModel *model6 = [[LZYAttributeModel alloc]init];
model6.keyString = @"倒车雷达";
model6.valueString = @"有";
LZYAttributeModel *model7 = [[LZYAttributeModel alloc]init];
model7.keyString = @"电动踏板";
model7.valueString = @"有";
LZYAttributeModel *model8 = [[LZYAttributeModel alloc]init];
model8.keyString = @"遮阳棚";
model8.valueString = @"有";
LZYAttributeModel *model9 = [[LZYAttributeModel alloc]init];
model9.keyString = @"尾部爬梯";
model9.valueString = @"有";
LZYAttributeModel *model10 = [[LZYAttributeModel alloc]init];
model10.keyString = @"自行车架";
model10.valueString = @"有";
LZYAttributeModel *model11 = [[LZYAttributeModel alloc]init];
model11.keyString = @"卫星电话";
model11.valueString = @"有";
LZYAttributeModel *model12 = [[LZYAttributeModel alloc]init];
model12.keyString = @"充电逆变器";
model12.valueString = @"有";
LZYAttributeModel *model13 = [[LZYAttributeModel alloc]init];
model13.keyString = @"暖风机";
model13.valueString = @"有";
NSArray *arr1 = [[NSArray alloc]initWithObjects:model,model1,model2,model3,model4,model5,model6,model7,model8,model9,model10,model11,model12,model13, nil];
return arr1;
}
这样就可以了
如果觉得不想看代码 直接加我QQ(1127038469) 我已经封装好了。
