您的位置:首页 > 产品设计 > UI/UE

UITableViewCell cell中图片文字的自适应高度

2015-08-11 19:00 337 查看
首先定义一个tableView

效果图:





在这里需要用到自己定义的cell,和系统的cell不同

在创建tableView之前要先初始化图片和文字的数组

-(instancetype )initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
[super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.picArr=[NSMutableArray arrayWithObjects:@"tara1.jpg",@"tara2.jpg",@"tara3.jpg",@"tara4.jpg", nil];
self.ziArr=[NSMutableArray arrayWithObjects:@"中国共产党新闻网北京4月1日电 (万鹏)3月28日,习近平主席出席2015年博鳌论坛年会开幕式并发表了题为《迈向命运共同体 开创亚洲新未来》的主旨演讲,他强调,“亚洲是世界的亚洲。亚洲要迈向命运共同体、开创亚洲新未来,必须在世界前进的步伐中前进、在世界发展的潮流中发展。习主席的演讲传递了哪些重要信息?国务院参事室特邀研究员保育钧,中国国际问题研究院研究员杨希雨做客人民网时谈到,习主席主旨演讲展现出“五大亮点”,再次提出“亚洲方式”的新命题,开幕式本身可谓“一带一路”的各国大合唱,让人印象深刻", @"床前明月光,疑是地上霜.举头望明月,低头思故乡", @"NBA常规赛强强对话,勇士在一度落后17分的情况下,客场以110-106逆转快船,终结对手7连胜的同时豪取10连胜。库里全场轰下27分,并在第二节运球晃倒保罗,技惊四座。快船格里芬40分,外加12篮板5助攻",@"tara巡回演唱会", nil];
}
return self;
}


1.在viewController中定义一个tableView

1.设置背景颜色
self.view.backgroundColor =[UIColor redColor];
2. 把透明度去掉
self.navigationController.navigationBar.translucent=NO;
3. 把tableView设置成属性,建一个tableView
self.tableView=[[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, HEIGHT-64) style:UITableViewStylePlain];
[self.view addSubview:self.tableView];
[self.tableView release];
4.在上面签订两个协议:并设置各自的代理人
@interface MainViewController ()<UITableViewDelegate,UITableViewDataSource>
self.tableView.delegate =self;
self.tableView.dataSource=self;


2.实现签订的两份协议

第一个协议是返回行数

代码:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.picArr.count;
}


第二个协议,设置cell,这个cell用自定义cell:MyCell

代码:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.picArr.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *reuse=@"reuse";
MyCell *cell=[tableView dequeueReusableCellWithIdentifier:reuse];
if (!cell) {
cell=[[[MyCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:reuse] autorelease];
}
添加图片
cell.leftImageView.image=[UIImage imageNamed:self.picArr[indexPath.row]];
添加文字
cell.myLabel.text =self.ziArr[indexPath.row];
return cell;
}


3.计算图片和文字的自适应高度

`(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{`
// 根据图片的尺寸,设置行高
UIImage *image= [UIImage imageNamed:self.picArr[indexPath.row]];

// 通过CGSize找到image里面的图片的尺寸
CGSize picSize= image.size;
// 计算行高
CGFloat rowHeight =picSize.height*self.view.frame.size.width/picSize.width;

// 计算label的高度
// 根据对应的文字求出cell上label显示的高度
NSDictionary *fontDic =[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14 ],NSFontAttributeName, nil];

// 根据字的大小 ,计算出文本的尺寸
// 还需要执行一个尺寸(375, 0)
// 第三个参数:计算高度需要的依据字体的哪个特征来确定
CGRect rect=[self.ziArr[indexPath.row] boundingRectWithSize:CGSizeMake(375, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];

// 最后把结果作为返回值返回

return rowHeight+rect.size.height;
}


这个方法是tableView的delegate所提供的协议方法,主要是用来设置每一行的高度

4.创建MyCell

(1). 在MyCell.h定义两个属性.视图,和字符串

注意:他们的名不能和系统的已有的属性名重复,包括imageView,textLabel,detailTextField

@property(nonatomic ,retain)UIImageView *leftImageView;
@property(nonatomic ,retain)UILabel *myLabel;


(2.).重写cell的初始化方法

代码:

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self =[super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// 完成对属性视图的创建,但是一般创建之后不给属性视图frame
[self createView];
}

return self;
}


(3.).属性视图进行创建(实现重写cell中的创建视图的方法)

代码:

-(void)createView{
self.leftImageView=[[UIImageView alloc] init];
[self.contentView addSubview:self.leftImageView];
[self.leftImageView release];

self.myLabel =[[UILabel alloc] init];
// 指定label的字体大小,默认字体是17号
self.myLabel.font =[UIFont systemFontOfSize:14];
// 0 是最大行数
self.myLabel.numberOfLines =0;
[self.myLabel sizeToFit];
[self.contentView addSubview:self.myLabel];
[_myLabel release];
}


注意,在创建view视图时,一般不设置尺寸

(4).根据之前算出的自适应高度设置图片(imageView)和文字(label)的尺寸

代码:

-(void)layoutSubviews{
[super layoutSubviews];
// 让imageView的尺寸和cell的图片大小相同
// 因为这个方法是最后一个被执行的,所以执行到这个方法的时候,已经对cell的各个属性进行完赋值操作,所以可以通过imageView.image找到图片的尺寸

CGSize picSize =self.leftImageView.image.size;
CGFloat height =picSize.height*self.contentView.frame.size.width/picSize.width;
self.leftImageView.frame =CGRectMake(0, 0, self.contentView.frame.size.width, height);

NSDictionary *fontDic =[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14 ],NSFontAttributeName, nil];
CGRect rect=[self.myLabel.text boundingRectWithSize:CGSizeMake(375, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];
self.myLabel.frame =CGRectMake(0, height, self.contentView.frame.size.width, rect.size.height);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息