cell的自适应高度

设有三张图及三张段文字并且一一对应匹配,那么应该获取显示文本Label的尺寸和相应图片的UIImageView尺寸

需要注意的是无论图片的大小如何变化,但是图片的长宽之比是不变的



(1).求cell高度的方法是tableviewdelegate所提供的协议方法,主要是用来设置每一行高度该方法在MainViewController.m写

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    只有三张图片所以indexPath范围是0 - 2;

    根据图片的尺寸设置行高

    UIImage *image = [UIImage imageNamed:self.picArr[indexPath.row]];

    通过CGSize 找到image里面图片的尺寸

    CGSize picSize = image.size;

    

    计算行高

    CGFloat rowHeight = picSize.height * WIDTH / picSize.width;

    图片的高度和文字的高度加起来是cell的高度

    根据对应的文字求出celllabel显示的高度

    NSDictionary *fontDic = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14];                        NSFontAttributeName, nil];

    

    根据文字的大小,计算出文本的尺寸

    还需要指定一个尺寸(375, 0)( 0是最大值)

    第三个参数:计算高度需要依据字体的哪个特征来确定

    CGRect rect = [self.ziArr[indexPath.row] boundingRectWithSize:CGSizeMake(WIDTH, 0)                                           options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];

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

    return rowHeight + rect.size.height;   

}


(2).自定义cell

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {

        [self createView];

    }

    return self;

}

-(void)createView

{

    self.image1 = [[UIImageView alloc]init];

    self.image1.backgroundColor = [UIColor cyanColor];

    [self.contentView addSubview:self.image1];

    [self.image1 release];

    

    self.myLabel = [[UILabel alloc]init];

    self.myLabel.backgroundColor = [UIColor grayColor];

    

    指定label的字体大小

    self.myLabel.font = [UIFont systemFontOfSize:14];

    

    0是最大行数

    self.myLabel.numberOfLines = 0;

    [self.myLabel sizeToFit];

    

    [self.contentView addSubview:self.myLabel];

    [self.myLabel release]; 

}


-(void)layoutSubviews

{

    [super layoutSubviews];

    imageView的尺寸和cell的图片大小相同

    因为这个方法是在uihou一个被执行的,所以执行到这个方法的时候已经对cell的各个属性进行完整赋值操作,所以可以通过imageview,image找到图片的尺寸

    CGSize picSize = self.image1.image.size;

    CGFloat height = self.contentView.frame.size.width * picSize.height / picSize.width;

    self.image1.frame = CGRectMake(0, 0, self.contentView.frame.size.width, height)


    NSDictionary *fontDic = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14], NSFontAttributeName, nil];

    根据文字的大小,计算出文本的尺寸

    还需要指定一个尺寸(375, 0)// 0是最大值

    第三个参数:计算高度需要依据字体的哪个特征来确定

    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);

}

-(void)dealloc

{

    [self.image1 release];

    [super dealloc];

}


使用方法

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *reuse = @"reuse";

    zidingyiTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuse];

    if (cell == nil) {

        cell = [[[zidingyiTableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:reuse] autorelease];

    }

    cell.image1.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.png", indexPath.row + 1]];

    cell.myLabel.text = self.ziArr[indexPath.row];

    return cell;

}









  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 ElementUI 的表格组件,如果你想要实现单元格高度自适应,可以尝试以下方法: 1. 使用 slot-scope 自定义单元格内容: 在表格组件中,可以使用 slot-scope 来自定义单元格内容。你可以在 slot-scope 中访问到每个单元格的数据,然后根据数据的长度或内容来动态设置单元格的高度。例如: ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <div :style="{ height: scope.row.name.length > 10 ? 'auto' : '30px' }"> {{ scope.row.name }} </div> </template> </el-table-column> <!-- 其他列 --> </el-table> ``` 在上述示例中,我们通过判断 `scope.row.name` 的长度来决定是否设置 `div` 的高度为 `auto`,如果长度超过 10 就设置为 `auto`,否则设置为固定的 `30px`。 2. 使用 CSS 样式控制单元格高度: 你也可以使用 CSS 来控制单元格的高度。使用 `el-table-column` 的 `className` 属性来添加自定义样式类,然后在这个样式类中设置单元格的高度。例如: ```html <style> .custom-cell { height: 30px; } </style> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" :class-name="'custom-cell'"></el-table-column> <!-- 其他列 --> </el-table> ``` 在上述示例中,我们在 `el-table-column` 中使用 `:class-name` 属性来绑定样式类 `custom-cell`,然后在样式中设置了单元格的高度为 `30px`。 以上是两种常用的方法来实现 ElementUI 表格单元格高度自适应。你可以根据实际需求选择合适的方法进行使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值