zoukankan      html  css  js  c++  java
  • 自定义等高 Cell

    1、介绍

    • 1.1 代码自定义 cell(使用 frame)

      • 创建一个继承自 UITableViewCell 的子类,比如 BookCell1。
        • 在 initWithStyle:reuseIdentifier: 方法中。
          • 添加子控件。
          • 设置子控件的初始化属性(比如文字颜色、字体)。
        • 在 layoutSubviews 方法中设置子控件的 frame。
        • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件。
      • 在控制器中
        • 利用 registerClass... 方法注册 BookCell1 类。
        • 利用重用标识找到 cell(如果没有注册类,就需要手动创建 cell)。
        • 给 cell 传递模型数据。
        • 也可以将创建获得 cell 的代码封装起来(比如 cellWithTableView: 方法)。
    • 1.2 代码自定义 cell(使用 autolayout)

      • 创建一个继承自 UITableViewCell 的子类,比如 BookCell1。
        • 在 initWithStyle:reuseIdentifier: 方法中。
          • 添加子控件。
          • 添加子控件的约束(建议使用 Masonry)。
          • 设置子控件的初始化属性(比如文字颜色、字体)。
          • 需要提供一个模型属性,重写模型的 set 方法,在这个方法中设置模型数据到子控件。
      • 在控制器中
        • 利用 registerClass... 方法注册 BookCell1 类。
        • 利用重用标识找到 cell(如果没有注册类,就需要手动创建 cell)。
        • 给 cell 传递模型数据。
        • 也可以将创建获得 cell 的代码封装起来(比如 cellWithTableView: 方法)。

    2、代码创建 cell - frame

    • 2.1 BookCell1.h

    @class BookModel;
    
    @interface BookCell1 : UITableViewCell
    
    // 定义 Cell 的数据模型
    @property (nonatomic, retain)BookModel *book;
    
    @end
    
    • 2.2 BookCell1.m

    #import "BookCell1.h"
    #import "BookModel.h"
    
    @interface BookCell1()
    
    // 创建自定义 Cell 视图包含的内容
    @property(nonatomic, retain)UIImageView *iconView;
    @property(nonatomic, retain)UILabel *titleLabel;
    @property(nonatomic, retain)UILabel *detailLabel;
    @property(nonatomic, retain)UILabel *priceLabel;
    
    @end
    
    @implementation BookCell1
    
    // 重写初 Cell 始化方法,创建自定义 Cell
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    	if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
    
    		// 创建子视图
    		// 创建 iconView 视图,并添加到自定义 Cell 上
    		self.iconView = [[UIImageView alloc] init];
    		self.iconView.layer.borderColor = [[UIColor greenColor] CGColor];
    		self.iconView.layer.borderWidth = 2;
    		[self.contentView addSubview:self.iconView];
    
    		// 创建 titleLabel 视图
    		self.titleLabel = [[UILabel alloc] init];
    		self.titleLabel.font = [UIFont boldSystemFontOfSize:14];
    		self.titleLabel.textColor = [UIColor redColor];
    		[self.contentView addSubview:self.titleLabel];
    
    		// 创建 detailLabel 视图
    		self.detailLabel = [[UILabel alloc] init];
    		self.detailLabel.font = [UIFont systemFontOfSize:12];
    		[self.contentView addSubview:self.detailLabel];
    
    		// 创建 priceLabel 视图
    		self.priceLabel = [[UILabel alloc] init];
    		self.priceLabel.font = [UIFont systemFontOfSize:12];
    		[self.contentView addSubview:self.priceLabel];
    	}
    	return self;
    }
    
    // 布局子视图
    - (void)layoutSubviews {
    	[super layoutSubviews];
    
    	// 布局子视图
    	self.iconView.frame = CGRectMake(10, 10, 60, 60);
    	self.titleLabel.frame = CGRectMake(90, 5, 200, 25);
    	self.detailLabel.frame = CGRectMake(90, 30, 200, 25);
    	self.priceLabel.frame = CGRectMake(90, 55, 200, 25);
    }
    
    // 设置显示的数据
    - (void)setBook:(BookModel *)book {
    
    	_book = book;
    
    	// 设置数据,设置 cell 视图上显示的内容 内容
    	self.iconView.image = [UIImage imageNamed:book.icon];
    	self.titleLabel.text = book.title;
    	self.detailLabel.text = book.detail;
    	self.priceLabel.text = book.price;
    }
    
    @end
    
    • 2.3 ViewController.m

    // 使用自定义 Cell 创建,UITableViewDataSource 协议方法
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    	// 使用自定义的 Cell 定义
    	BookCell1 *cell = [tableView dequeueReusableCellWithIdentifier:@"testIdentifier"];
    
    	if (cell == nil) {
    		// 使用自定义的 Cell 创建
    		cell = [[BookCell1 alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testIdentifier"];
    	}
    	BookModel *bookModel = [self.myDataArray objectAtIndex:indexPath.row];
    	cell.book = bookModel;
    
    	return cell;
    }
    

    3、代码注册 cell - frame

    • 在 tableView 创建时,从 iOS7 开始多了一种创建 cell 的方式(注册),让 tableView 注册一种 cell,需要设置复用标志。
    • 用注册方式创建 cell,如果 tableView 已经注册了某一种 cell,从复用队列里查找,如果找不到,
    • 系统会自动通过注册的 cell 类来创建 cell 对象。
    • 3.1 自定义 Cell 部分同上。

    • BookCell1.h
    • BookCell1.m
    • 3.2 ViewController.m

    // 注册 cell
    [myTableView registerClass:[BookCell1 class] forCellReuseIdentifier:@"testIdentifier"];
    
    // 使用注册的 Cell 创建,UITableViewDataSource 协议方法
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    	BookCell1 *cell = [tableView dequeueReusableCellWithIdentifier:@"testIdentifier" forIndexPath:indexPath];                   
    	BookModel *bookModel = [self.myDataArray objectAtIndex:indexPath.row];
    
    	cell.book = bookModel;
    
    	return cell;
    }
    

    4、代码创建 cell - autolayout

    @interface XMGDeal : NSObject
    
    @property (strong, nonatomic) NSString *buyCount;
    @property (strong, nonatomic) NSString *price;
    @property (strong, nonatomic) NSString *title;
    @property (strong, nonatomic) NSString *icon;
    
    + (instancetype)dealWithDict:(NSDictionary *)dict;
    
    @end
    
    • 4.2 XMGDeal.m

    @implementation XMGDeal
    
    + (instancetype)dealWithDict:(NSDictionary *)dict {
    
    	XMGDeal *deal = [[self alloc] init];
    
    	// KVC - Key Value Coding
    	[deal setValuesForKeysWithDictionary:dict];
    
    	return deal;
    }
    
    @end
    
    • 4.3 XMGDealCell.h

    @class XMGDeal;
    
    @interface XMGDealCell : UITableViewCell
    
    /** 模型数据 */
    @property (nonatomic, strong) XMGDeal *deal;
    
    + (instancetype)cellWithTableView:(UITableView *)tableView;
    
    @end
    
    • 4.4 XMGDealCell.m

    #define MAS_SHORTHAND
    #define MAS_SHORTHAND_GLOBALS
    
    #import "Masonry.h"
    
    @interface XMGDealCell()
    
    @property (weak, nonatomic) UIImageView *iconView;
    @property (weak, nonatomic) UILabel *titleLabel;
    @property (weak, nonatomic) UILabel *priceLabel;
    @property (weak, nonatomic) UILabel *buyCountLabel;
    
    @end
    
    @implementation XMGDealCell
    
    + (instancetype)cellWithTableView:(UITableView *)tableView {
    
    	static NSString *ID = @"deal";
    
    	// 创建cell
    	XMGDealCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    	if (cell == nil) {
    		cell = [[XMGDealCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    	}
    	return cell;
    }
    
    // 1.在 initWithStyle:reuseIdentifier: 方法中添加子控件
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    	if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
    
    		UIImageView *iconView = [[UIImageView alloc] init];
    		[self.contentView addSubview:iconView];
    		self.iconView = iconView;
    
    		UILabel *titleLabel = [[UILabel alloc] init];
    		[self.contentView addSubview:titleLabel];
    		self.titleLabel = titleLabel;
    
    		UILabel *priceLabel = [[UILabel alloc] init];
    		priceLabel.textColor = [UIColor orangeColor];
    		[self.contentView addSubview:priceLabel];
    		self.priceLabel = priceLabel;
    
    		UILabel *buyCountLabel = [[UILabel alloc] init];
    		buyCountLabel.textAlignment = NSTextAlignmentRight;
    		buyCountLabel.font = [UIFont systemFontOfSize:14];
    		buyCountLabel.textColor = [UIColor lightGrayColor];
    		[self.contentView addSubview:buyCountLabel];
    		self.buyCountLabel = buyCountLabel;
    	}
    	return self;
    }
    
    // 2.在 layoutSubviews 方法中设置子控件的 约束
    - (void)layoutSubviews {
    
    	[super layoutSubviews];
    
    	CGFloat margin = 10;
    
    	[self.iconView makeConstraints:^(MASConstraintMaker *make) {
    		make.width.equalTo(100);
    		make.left.top.offset(margin);
    		make.bottom.offset(-margin);
    	}];
    
    	[self.titleLabel makeConstraints:^(MASConstraintMaker *make) {
    		make.top.equalTo(self.iconView);
    		make.left.equalTo(self.iconView.right).offset(margin);
    		make.right.offset(-margin);
    	}];
    
    	[self.priceLabel makeConstraints:^(MASConstraintMaker *make) {
    		make.left.equalTo(self.titleLabel);
    		make.bottom.equalTo(self.iconView);
    		make.width.equalTo(70);
    	}];
    
    	[self.buyCountLabel makeConstraints:^(MASConstraintMaker *make) {
    		make.bottom.equalTo(self.priceLabel);
    		make.right.equalTo(self.titleLabel);
    		make.left.equalTo(self.priceLabel.right).offset(margin);
    	}];
    }
    
    // 3.重写模型的 set 方法
    - (void)setDeal:(XMGDeal *)deal {
    
    	_deal = deal;
    
    	// 设置数据
    	self.iconView.image = [UIImage imageNamed:deal.icon];
    	self.titleLabel.text = deal.title;
    	self.priceLabel.text = [NSString stringWithFormat:@"¥%@", deal.price];
    	self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已购买", deal.buyCount];
    }
    
    @end
    
    • 4.5 XMGDealsViewController.m

    @interface XMGDealsViewController ()
    
    /** 所有的团购数据 */
    @property (nonatomic, strong) NSArray *deals;
    
    @end
    
    @implementation XMGDealsViewController
    
    - (NSArray *)deals {
    
    	if (_deals == nil) {
    
    		// 加载plist中的字典数组
    		NSString *path = [[NSBundle mainBundle] pathForResource:@"deals.plist" ofType:nil];
    		NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
    
    		// 字典数组 -> 模型数组
    		NSMutableArray *dealArray = [NSMutableArray array];
    		for (NSDictionary *dict in dictArray) {
    			XMGDeal *deal = [XMGDeal dealWithDict:dict];
    			[dealArray addObject:deal];
    		}
    
    		_deals = dealArray;
    	}
    	return _deals;
    }
    
    - (void)viewDidLoad {
    	[super viewDidLoad];
    	//    [self.tableView registerClass:[XMGDealCell class] forCellReuseIdentifier:@"deal"];
    }
    
    #pragma mark - Table view data source
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    	return self.deals.count;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    	//创建cell
    	XMGDealCell *cell = [XMGDealCell cellWithTableView:tableView];
    
    	// 取出模型数据
    	cell.deal = self.deals[indexPath.row];
    
    	return cell;
    }
    
    @end
    
  • 相关阅读:
    Linux 命令后台运行
    Linux Mint,Ubuntu 18 ,Deepin15.7 安装mysql 没有提示输入密码,修改root用户密码过程
    爬虫第一篇基本库的使用——urllib
    Python开发第五篇
    php 5.6 安装openssl extension 出现编译错误
    bash 中的变量可以这么用
    查表法现实数学函数
    封装boto3 api用于服务器端与AWS S3交互
    python 打包详解
    Python使用boto3操作AWS S3中踩过的坑
  • 原文地址:https://www.cnblogs.com/CH520/p/9420415.html
Copyright © 2011-2022 走看看