iOSDay30之UITableVIewCell自定义

1. 自定义Cell

 1> 为什么要自定义Cell

  • UITableView 中系统的Cell共提供了四种默认样式,  分别是:

    UITableViewCellStyleDefault

    UITableViewCellStyleValue1

    UITableViewCellStyleValue2  

    UITableViewCellStyleSubtitle

  但是在实际使用过程中, Cell样式的布局上千差万别, 因此我们需要自定义Cell

  • 在前期我们学过自定义视图, 即创建一个类继承于 UIView 或者 其他的视图, 在自定义类中创建其子视图, 这样就会形成一个新的自定义视图。
  • 系统提供的cell满足不了复杂的样式,因此: 定义Cell和自定义视图一样,自己创建一种符合我们需求的Cell并使用这个Cell。

 2> 自定义Cell的步骤

  • 创建一个类继承于 UITableViewCell
  • 实现 UITableViewCell 的初始化方法:
 1 // 初始化
 2 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
 3     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 4     if (self) {
 5         //初始化子视图
 6         [self initLayout];
 7     }
 8     return self;
 9 }
10
11 //初始化子视图布局方法
12 - (void)initLayout {
13
14     //1.头像
15     self.headerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(16, 10, 100, 100)];
16
17     self.headerImageView.layer.masksToBounds = YES;
18
19     self.headerImageView.layer.cornerRadius = CGRectGetWidth(self.headerImageView.frame) / 2;
20
21     // cell提供一个contactVIew属性,专门用来自定义cell,防止在cell布局的时候发生布局混乱,如果是自定义cell,记得将子控件添加到contactVIew上
22     [self.contentView addSubview:self.headerImageView];
23
24     //2.姓名
25     self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.headerImageView.frame) + 10, CGRectGetMinY(self.headerImageView.frame), 100, 40)];
26
27     [self.contentView addSubview:self.nameLabel];
28
29     //3.电话号码
30     self.phoneLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.nameLabel.frame), CGRectGetMaxY(self.nameLabel.frame) + 20, 200, 40)];
31
32     [self.contentView addSubview:self.phoneLabel];
33 }

contentView 是 Cell 提供一个属性,专门用来自定义 Cell ,防止在 Cell 布局的时候发生布局混乱,如果是自定义 Cell,记得将子控件添加到 contactVIew 上

效果图:

  • 确保所有的你想添加的子视图都在自定义 Cell 的初始化方法中创建, 由于 UITableView 的重用机制, 一个 Cell 在第一次创建成功并用于下一次显示的时候,不会再走初始化方法, 这样可以避免子视图的重复创建。
  • 在 Cell 的子视图创建成功后,将子视图设置为属性,类似于 UITableViewCell 所自带的 textLabel 和 detailTextLabel 属性。便于在 UITableView 的协议中给自定义视图赋值。

2. 多种Cell混合使用

 1> 概述

  在 TableView 中不仅仅只显示一种 Cell , 多种 Cell 可以并存

 2> 使用场景

  一个重用标识符只能针对于一种 Cell 样式, 不同的 Cell 需要基于不同的重用标识符来进行区分, 重用标识符的区分需要根据不同的情况来划分, 如:

  • model 属性划分(不同的数据内容,比如一个数据中有 type 字段, 为1代表图片类型, 为0代表文字类型)
 1 Model *model = [self.tableArray objectAtIndex:indexPath.row];
 2 //根据model属性划分
 3 if (model.type == 0) {
 4     FirstTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:firstIdentify];
 5     return cell;
 6 }
 7 if (model.type == 1) {
 8     SecondTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:secondIdentify];
 9     return cell;
10 }
  • 固定的行显示的 Cell 类型不一样
 1 // 第一行显示第一种Cell
 2 if (indexPath.row == 0) {
 3     FirstTableViewCell *cell = [tableView
 4                                 dequeueReusableCellWithIdentifier:firstIdentify];
 5     return cell;
 6 }
 7 // 第二行显示第二种Cell
 8 if (indexPath.row == 1) {
 9     SecondTableViewCell *cell = [tableView
10                                  dequeueReusableCellWithIdentifier:secondIdentify];
11     return cell;
12 }

3. Cell自适应高度

 1> 自适应高度的两种应用

  ① 文本自适应高度:根据文本内容设定Label高度

   第一步: 修改 Label 的高度(在 - (void)layoutSubView 方法中 )

1 - (void)layoutSubviews {
2
3     // 1. 获取文本高度
4     CGFloat textHeight = [Tool textHeightWithText:self.myLabel.text font:[UIFont systemFontOfSize:20]];
5     // 2.修改label的frame
6     self.myLabel.frame = CGRectMake(0, 0, self.bounds.size.width, textHeight);
7 }    

   获取文本高度的方法(一般封装在工具类中)

 1 // 计算文本高度
 2 + (CGFloat)textHeightWithText:(NSString *)text font:(UIFont *)font {
 3
 4     // iOS7.0中求文本高度的方法,返回一个CGRect的高度
 5
 6     // 第一个参数
 7     CGSize size = CGSizeMake([UIScreen mainScreen].bounds.size.width, 10000);
 8
 9     // 第二个参数:设置以行高为单位
10     CGRect rect = [text boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : font} context:nil];
11
12     return rect.size.height;
13 }

  第二步:设置 Cell 的高度

1 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
2
3     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:20]];
4
5     return textHeight;
6 }

   ② 图片自适应高度:根据图片宽度进行等比例缩放

  第一步:修改imageView的高度

1 - (void)layoutSubviews {
2     // 1.获取图片的高度
3     CGFloat imageH = [Tool imageHeightWithImage:self.myImageView.image];
4     // 2.修改imageView的高度
5     self.myImageView.frame = CGRectMake(0, textHeight, [UIScreen mainScreen].bounds.size.width, imageH);
6 }

  获取图片高度的方法(一般封装在工具类中)

 1 + (CGFloat)imageHeightWithImage:(UIImage *)image {
 2
 3     // 获取图片的宽度和高度
 4     CGFloat width = image.size.width;
 5     CGFloat height = image.size.height;
 6     // 计算图片高度
 7     float scile = height / width;
 8     float screenH = [UIScreen mainScreen].bounds.size.width;
 9
10     return  scile * screenH;
11 }

  第二步:设置 Cell 的高度

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

    CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];

    return imageHeight;
}

  在上面 获取图片高度的方法 中存在一个 bug , 当计算图片高度的数据类型为CGFloat时, 对于某些图片就会出现程序崩溃

  错误代码:

 1 + (CGFloat)imageHeightWithImage:(UIImage *)image {
 2
 3     // 获取图片的宽度和高度
 4     CGFloat width = image.size.width;
 5     CGFloat height = image.size.height;
 6     // 计算图片高度
 7     CGFloat scile = height / width;
 8     CGFloat screenH = [UIScreen mainScreen].bounds.size.width;
 9
10     return  scile * screenH;
11 }

  错误信息:

  ③ 两种使用同时出现

   其他部分全部相同,处理在第二步设置Cell的高度, 代码如下:

1 // 设置cell的高度
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
3     // 得到文字自适应高度
4     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:20]];
5     // 得到图片自适应高度
6     CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];
7     // 返回两者的和
8     return textHeight + imageHeight;
9 }

   

时间: 2024-11-05 16:03:54

iOSDay30之UITableVIewCell自定义的相关文章

UITableViewCell自定义

待完善 UITableViewCell自定义,布布扣,bubuko.com

iOS:UITableViewCell自定义单元格

UITableViewCell:自定义的单元格,可以在xib中创建单元格,也可以在storyBorad中创建单元格.有四种创建方式 <1>在storyBorad中创建的单元格,它是静态的单元格,单元格一开始就存在,可以直接根据自定义的重用标识名加载使用: <2>当然,storyBorad中单元格也可以关联一个自定义的类,这个类必须是继承UITableViewCell,这种情况下,直接根据自定义的重用标识名加载使用也是可以的. <3>在xib中创建的单元格,如果直接通过b

##DAY12 UITableViewCell自定义

#pragma mark -------自定义视图步骤--------- 自定义视图步骤: 1)在自定义cell类中,将所有cell要显示的子视图控件都声明成属性 2)重写cell的初始化方法,对内部控件进行布局,frame指定为0(CGRectZero),将控件添加到cell上面进行显示,一定要注意使用self.contentView添加: //自定义cell内部添加子视图,不能使用self,应该使用self.contentView - (instancetype)initWithStyle:

Objective-C:UITableViewCell自定义单元格

UITableViewCell:自定义的单元格,可以在xib中创建单元格,也可以在storyBorad中创建单元格.有四种创建方式 <1>在storyBorad中创建的单元格,它是静态的单元格,单元格一开始就存在,可以直接根据自定义的重用标识名加载使用: <2>当然,storyBorad中单元格也可以关联一个自定义的类,这个类必须是继承UITableViewCell,这种情况下,直接根据自定义的重用标识名加载使用也是可以的. <3>在xib中创建的单元格,如果直接通过b

[UITableViewCell] 自定义cell初始化

方法一: 方法一没有讲单元格重用 建的单元格数量少还可以 1.新建一个Swift文件 import UIKit class Custom: UITableViewCell { var label1: UILabel? var label2: UILabel? var label3: UILabel? var label4: UILabel? var label5: UILabel? override func awakeFromNib() { super.awakeFromNib() // In

UITableViewCell自定义分割线

产品设计今天要求cell的分割线不能是整个屏幕的长度,这时候我们有两种方法可以解决 方法一就是自己写一个label放在cell上 方法二就是自定义一个分割线,方法如下 首先我们要去掉cell默认的分割线,设为none [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone]; 然后实现- (void)drawRect:(CGRect)rect方法 - (void)drawRect:(CGRect)rect{ //首先

ios自定义类(UIView)代码生成简单的UITableViewCell

由于一个项目中有大量的UITableViewCell需要书写,样式差不多都是 文字介绍:显示内容 这样的.自己又懒得写UITableViewCell类嫌没必要:在方法tableView:cellForRowAtIndexPath中手写又繁琐.就封装变化写了一个UIView类. 项目:点击下载 构思:首先由于文字介绍和显示内容的宽度固定,然后Cell的一行(Cell可以包括多行)高度就是文字介绍和显示内容所需要的高度两者相比高一些的.下一行就是高度累加重复:Cell的最上端和最下端给个高度:最下端

纯代码自定义不等高cell

数据模型.plist解析这里就不过多赘述. 错误思路之一: 通过在heightForRowAtIndexPath:方法中调用cellForRowAtIndexPath:拿到cell,再拿到cell的子控件的最大Y值的方法是不可取的.会出现死循环,因为cellForRowAtIndexPath:方法中会调用heightForRowAtIndexPath:方法.错误思路之二: 在layoutSubviews方法中,根据子控件的高度,计算cell的高度.先初始化一个变量为0为cell的高度,计算出来所

【IOS】UITableView样式的自定义

很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳. 1.添加自定义的Cell. 这个问题已经涉及过,但是,这里要说的主要是两种方法的比较! 因为,我经常发现有两种方式: 1.xib方式 这种方式,也就是说,为自定义的UITableViewCell类添加一个xib的文件.并且让两者关联. 这时候,写法为: // 返回cell - (UITableViewCell *)tableView:(U