ios-UI基础控件-UITbleViewCell的自定义（ce
2016-06-17 本文已影响382人
风一样的程序员
火焰 是我最喜欢的玩具！
UITableVie 中系统的Cell共提供了四种默认样式, 分别是:
UITableVieCellStyleDefault
UITableVieCellStyleValue1
UITableVieCellStyleValue2
UITableVieCellStyleSubtitle
实际我们往往需要的是更为复杂或者专门效果展示所以需要按照要求去自己定义cell
自定义cell步骤
- 1.创建一个
继承于UITableViewCell的类 - 2.实现UITableVieCell的
初始化方法:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
_imageLabel = [[UIImageView alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:_imageLabel];
_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLabel.numberOfLines = 0;
[self.contentView addSubview:_titleLabel];
}
return self;
}
- 3.确保所有的你想添加的
子视图都在自定义Cell的初始化方法中创建,由于UITableView 的重用机制, 一个Cell在第 一次创建成功并于下一 次显示的时候,不会再去走初始化方法,这样可以避免子视图的重复创建。 - 4.在Cell的子视图创建成功后,
将子视图设置为属性,类似于UITableViewCell所自带的 text Label和detailTextLabel属性。便于在UITableView 的协议中给自定义视图赋值。
@interface SecondTableViewCell : UITableViewCell
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *imageLabel;
@property (nonatomic, strong) SecondModel *secondModel;
@end
多种cell可以混合使用
一个重用标识符只能针对于一种Cell样式,不同的Cell样式需要基于不同的重用标识符来进行区分, 重用标识符的区分需要根据不同的情况来划分, 如:
- model属性划分(不同的数据内容, 如 一个数据中有图片类型有文字类型)
Model *model = [self.tableArray objectAtIndex:indexPath.row];
//根据model属性划分
if (model.type == 0) {
FirstTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:firstIdentify];
return cell;
}
if (model.type == 1) {
SecondTableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:secondIdentify]; return cell;
}
- 固定的行显示的Cell类型不一样
// 第⼀一⾏行显⽰示第⼀一种Cell
if (indexPath.row == 0) {
FirstTableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:firstIdentify];
return cell;
}
// 第⼆二⾏行显⽰示第⼆二种Cell
if (indexPath.row == 1) {
SecondTableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:secondIdentify];
return cell;
}
布控子视图方法LayoutSubviews的调用场景
- 当前视图添加到父视图的时候
- 当前视图的大小发变化的时候
- 切换横竖屏
- ScrollView 滚动的时候
一般 ,Cell在创建的时候的fame 是(0,0,320,44), 我们给定的Cell的 度 般都会 于这个 。因此:在自定义Cell中创建的子视图的frame为CGRectZero。在Cell添加到TableView上的时候才会给子视图设置frame(即LayoutSubviews方法中),Cell 添加到TableView 的时候其大小已经更改为TableView设定的大小 ,这样就方便布局
- (void)layoutSubviews
{
//赋值
_imageLabel.image = [UIImage imageNamed:_secondModel.picUrl];
_titleLabel.text = _secondModel.title;
//取图片和标签的高度
CGFloat labelH = [CalculateTool heightForLabel:_secondModel.title];
CGFloat imageH = [CalculateTool heightForImage:_secondModel.picUrl];
//设置frame
_imageLabel.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width*2/3, imageH);
_titleLabel.frame = CGRectMake(CGRectGetMaxX(_imageLabel.frame), 0, [UIScreen mainScreen].bounds.size.width/3, labelH);
}
Model的使用
- Model类主要是为了给我们提供数据,简单的说就是定义类且继承于NSObject的称之为Model。 继承于UIView 的称之为View 类。
- 现在我们的数据提供都是存放在数组和字典中,OC中的KVC就是帮助我们将字典转换为Model类而存在的。
创建步骤:
1. 创建一个类并继承于NSObject
2. 添加和字典中对应的属性 (根据数据处理)
3. 在视图控制器中将字典通过KVC为Model赋值
4. 将Model对象添加到数组中并刷新TableView
#import <Foundation/Foundation.h>
@interface SecondModel : NSObject
@property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) NSString *picUrl;
- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)secondModelWithDic:(NSDictionary *)dic;
@end
#import "SecondModel.h"
@implementation SecondModel
- (instancetype)initWithDic:(NSDictionary *)dic
{
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dic];
}
return self;
}
+ (instancetype)secondModelWithDic:(NSDictionary *)dic
{
return [[SecondModel alloc] initWithDic:dic];
}
- (void)setValue:(id)value forUndefinedKey:(NSString *)key
{
}
@end
封装一个自适应高度方法实现两个功能
- 文本自适应高度:根据文本的内容设定Label的高度
- 图片的高度适应:根据图片的宽度进行等比例缩放
建一个工具类GetHeightTool:继承于NSObject
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface CalculateTool : NSObject
+ (CGFloat)heightForLabel:(NSString *)text;
+ (CGFloat)heightForImage:(NSString *)imageName;
@end
#import "CalculateTool.h"
@implementation CalculateTool
+ (CGFloat)heightForLabel:(NSString *)text
{
//计算字符串所占的大小
CGRect rect = [text boundingRectWithSize:CGSizeMake([UIScreen mainScreen].bounds.size.width/3, 10000) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:17]} context:nil];
return rect.size.height;
}
+ (CGFloat)heightForImage:(NSString *)imageName
{
if (imageName) {
UIImage *image = [UIImage imageNamed:imageName];
CGFloat width = image.size.width;
CGFloat height = image.size.height;
return height / width * ([UIScreen mainScreen].bounds.size.width);
}
return 0;
}
@end
boundingRectWithSize的接口说明
- 传入参数：
参数1: 你需要展示的文字
参数2: 你需要的字体类型一般就是给大小
参数3: 你定义的Label的宽也就是要在多宽的地方展示文字 - 返回值
返回值就是自适应的高度
封装接口说明
- 传入参数
heightForLabel：label上字符串的名字（NSString类型）
heightForImage：ImageView上照片的名字（NSString类型）
使用场景
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
SecondModel *model = _dataArray[indexPath.row];
//文字高度
CGFloat labelH = [CalculateTool heightForLabel:model.title];
//图片高度
CGFloat imageH = [CalculateTool heightForImage:model.picUrl];
CGFloat length = labelH + 20 +imageH;
return length;
}
