这种布局是怎么元素布局的?
如上图,请问图中我用红圈卷中的区域是怎么布局的?是Collection View吗?谢谢
[解决办法]
UICollectionView 应该可以实现
当然自己计算位置来实现一样可以来做。最底层的那个框直接切成一个图片,只需要关心上层icon及title的位置。可以定义一个model类来封装一下
[解决办法]
我下面说的方案不是基于UICollectionView来实现的。
每一个方格,你可以自定义一个控件,这个控件名定义为CustomCell ,这个cell接收一个实体model,包含icon及title的实体
@interface CellModel : NSObject
@property (nonatomic,strong) NSString *iconName;
@property (nonatomic,strong) NSString *title;
@end
@class CellModel;
@interface CustomCell: UIView
@property (nonatomic,strong) CellModel *model;
-(id)initWithModel:(CellModel *)cm;
@end
#import "CellModel.h"
@implement CustomCell
-(id)initWithModel:(CellModel *)cm {
if (self=[super init]) {
self.model=cm;
}
return self;
}
-(void)layoutSubview {
if (nil!=self.model) {
/////draw icon
CGRect bounds=self.bounds;
UIImage *iconImg=[UIImage imageNamed:self.model.iconName];
UIImageView *iconView=[[UIImageView alloc] initWithImage:iconImg];
/////compute position. set iconview's frame
iconView.frame=CGRectMake((bounds.width-iconImg.size.width)/2, 5, iconImg.size.width,iconImage.size.height);
[self addSubview:iconView];
//////draw title
UILabel *lblTitle=[[UILabel alloc] init];
[lblTitle setTitle:self.model.title];
[lblTitle setColor;[UIColor black]];
[lblTitle setFont: [UIFont fontWithsize:12]];
[lblTitle setNumberOfLines:0];
[lblTitle setLineBreakModel:NSLineBreakWordWarpping];
CGSize titleSize=[lblTitle.text sizeWithFont:lblTitle.font];
lblTitle.frame=CGRectMake((bounds.width-titleSize.width)/2, CGRectGetMaxY(iconView.frame)+5, titleSize.width,titleSize.height);
[self addSubview:lblTitle];
}
}
@end