iOS UITableView(二)

本文主要内容:

1.纯代码创建自定义cell;

2.Xib创建自定义cell.

自定义Cell

自定义cell的样式,效果图:

1.纯代码方式自定义cell

Swift版:

在项目中新建一个Cocoa Touch Class文件,取名为:MyCell,继承自UITableViewCell.

进入创建好的MyCell.swift文件,声明要显示到cell上的控件:

然后重写cell的init方法,在init方法中定义上面创建的控件的各种属性,并把控件添加到页面上:

// 重写init方法
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    // 创建图片:cellImage,并添加到cell上
    let imageX: CGFloat = 10
    let imageY: CGFloat = 10
    let imageWidth: CGFloat = 100
    let imageHeight: CGFloat = 100
    cellImage = UIImageView(frame: CGRectMake(imageX, imageY, imageWidth, imageHeight))
    cellImage.backgroundColor = UIColor.redColor()
    self.addSubview(cellImage)

    // 创建标题:cellTitle,并添加到cell上
    let titleX: CGFloat = CGRectGetMaxX(cellImage.frame) + 10
    let titleY: CGFloat = 10
    let titleWidth: CGFloat = self.frame.size.width - titleX
    let titleHeight: CGFloat = 20
    cellTitle = UILabel(frame: CGRectMake(titleX, titleY, titleWidth, titleHeight))
    cellTitle.text = "cell的标题"
    cellTitle.font = UIFont.systemFontOfSize(18)
    self.addSubview(cellTitle)

    // 创建内容:cellText,并添加到cell上
    let textX: CGFloat = cellTitle.frame.origin.x
    let textY: CGFloat = CGRectGetMaxY(cellTitle.frame) + 10
    let textWidth: CGFloat = titleWidth
    let textHeight: CGFloat = 50
    cellText = UILabel(frame: CGRectMake(textX, textY, textWidth, textHeight))
    cellText.text = "cell的内容xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    cellText.font = UIFont.systemFontOfSize(12)
    cellText.numberOfLines = 0
    self.addSubview(cellText)

    // 创建日期:cellDate,并添加到cell上
    let dateX: CGFloat = 10
    let dateY: CGFloat = CGRectGetMaxY(cellImage.frame) + 10
    let dateWidth: CGFloat = self.frame.size.width - dateX*2
    let dateHeight: CGFloat = 20
    cellDate = UILabel(frame: CGRectMake(dateX, dateY, dateWidth, dateHeight))
    cellDate.text = "日期:2016-06-30"
    cellDate.font = UIFont.systemFontOfSize(12)
    self.addSubview(cellDate)
}
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

MyCell.swift的工作完毕,现在进入UITableview的数据源实现方法里,在创建cell的地方创建一个MyCell的对象即可。

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    // 创建一个cellID,用于cell的重用
    let cellID = "cellID"
    // 从tableview的重用池里通过cellID取一个cell
    var cell = tableView.dequeueReusableCellWithIdentifier(cellID)
    if (cell == nil) {
        // 如果tableview的重用池中没有取到,就创建一个新的cell,style为Value2,并用cellID对其进行标记。
        cell = MyCell(style: .Value2, reuseIdentifier: cellID)
    }
    return cell!
}

最后一步:设置cell的高度

// 设置 cell 的高度
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    // 这个数值是根据自定义cell的高度来计算出来的
    return 140
}

Objective-C版:

在项目中新建一个Cocoa Touch Class文件,取名为:MyCell,继承自UITableViewCell.

进入创建好的MyCell.h文件,声明要显示到cell上的控件:

然后进入MyCell.m文件,重写cell的init方法,在init方法中定义上面创建的控件的各种属性,并把控件添加到页面上:

// 重写init方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        // 创建图片:cellImage,并添加到cell上
        CGFloat imageX = 10;
        CGFloat imageY = 10;
        CGFloat imageWidth = 100;
        CGFloat imageHeight = 100;
        self.cellImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageWidth, imageHeight)];
        self.cellImage.backgroundColor = [UIColor redColor];
        [self addSubview:self.cellImage];

        // 创建标题:cellTitle,并添加到cell上
        CGFloat titleX = CGRectGetMaxX(self.cellImage.frame) + 10;
        CGFloat titleY = 10;
        CGFloat titleWidth = self.frame.size.width - titleX;
        CGFloat titleHeight = 20;
        self.cellTitle = [[UILabel alloc] initWithFrame: CGRectMake(titleX, titleY, titleWidth, titleHeight)];
        self.cellTitle.text = @"cell的标题";
        self.cellTitle.font = [UIFont systemFontOfSize:18];
        [self addSubview:self.cellTitle];

        // 创建内容:cellText,并添加到cell上
        CGFloat textX = self.cellTitle.frame.origin.x;
        CGFloat textY = CGRectGetMaxY(self.cellTitle.frame) + 10;
        CGFloat textWidth = titleWidth;
        CGFloat textHeight = 50;
        self.cellText = [[UILabel alloc] initWithFrame:CGRectMake(textX, textY, textWidth, textHeight)];
        self.cellText.text = @"cell的内容xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        self.cellText.font = [UIFont systemFontOfSize:12];
        self.cellText.numberOfLines = 0;
        [self addSubview:self.cellText];

        // 创建日期:cellDate,并添加到cell上
        CGFloat dateX = 10;
        CGFloat dateY = CGRectGetMaxY(self.cellImage.frame) + 10;
        CGFloat dateWidth = self.frame.size.width - dateX*2;
        CGFloat dateHeight = 20;
        self.cellDate = [[UILabel alloc] initWithFrame:CGRectMake(dateX, dateY, dateWidth, dateHeight)];
        self.cellDate.text = @"2016-06-30";
        self.cellDate.font = [UIFont systemFontOfSize:12];
        [self addSubview:self.cellDate];
    }
    return self;
}

MyCell的工作完毕,现在进入UITableview的数据源实现方法里,在创建cell的地方创建一个MyCell的对象即可。

// 设置 Cell
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 创建一个cellID,用于cell的重用
    NSString *cellID = @"cellID";
    // 从tableview的重用池里通过cellID取一个cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if (cell == nil) {
        // 如果tableview的重用池中没有取到,就创建一个新的cell,style为Value2,并用cellID对其进行标记。
        cell = [[MyCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:cellID];
    }
    return cell;
}

最后一步:设置cell的高度

// 设置 cell 的高度
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 这个数值是根据自定义cell的高度来计算出来的
    return 140;
}

现在运行一下程序,应该会看到文章开头的效果图。

2.使用Xib方式自定义cell

Swift版:

在项目中新建一个Cocoa Touch Class文件,取名为:MyCellWithXib,继承自UITableViewCell,勾选”Also create XIB file”。

进入创建好的MyCellWithXib.swift文件,声明要显示到cell上的控件:

点击MyCellWithXib.xib文件,进入xib界面,将要要添加的控件拖到xib界面上。

然后将界面上的控件和MyCellWithXib.swift文件中声明的控件连线

如果需要代码控制某个控件的属性,就在MyCellWithXib.swift中重写cell的init方法,在init方法中控制某个控件的属性:

// 重写init方法
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    // 在此控制控件的属性
    // ......
}
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

MyCellWithXib的工作完毕,现在进入创建UITableview的代码处,增加一个Xib的声明:

// 创建一个cell重用的ID
let cellID = "cellID"
// 对tableView注册xib
tableView.registerNib(UINib(nibName: "MyCellWithXib", bundle: nil), forCellReuseIdentifier: cellID)

然后找到tableView实现数据源的方法:

// 设置 Cell
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    // 创建一个cell重用的ID(这里的cellID必须和上面对tableView注册xib时的cellID一致)
    let cellID = "cellID"
    // 创建一个MyCellWithXib的cell
    let cell: MyCellWithXib = tableView.dequeueReusableCellWithIdentifier(cellID, forIndexPath: indexPath) as! MyCellWithXib
    return cell
}

最后一步:设置cell的高度

// 设置 cell 的高度
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    // 这个数值是根据自定义cell的高度来计算出来的
    return 140
}

完毕,运行一下,就会看到自定义的cell

Objective-C版:

在项目中新建一个Cocoa Touch Class文件,取名为:MyCellWithXib,继承自UITableViewCell,勾选”Also create XIB file”。

进入创建好的MyCellWithXib.h文件,声明要显示到cell上的控件:

点击MyCellWithXib.xib文件,进入xib界面,将要要添加的控件拖到xib界面上。

然后将界面上的控件和MyCellWithXib.swift文件中声明的控件连线

如果需要代码控制某个控件的属性,就在MyCellWithXib.swift中重写cell的init方法,在init方法中控制某个控件的属性:

// 重写init方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // 在此控制控件的属性
        // ......
    }
    return self;
}

MyCellWithXib的工作完毕,现在进入创建UITableview的代码处,增加一个Xib的声明:

// 创建一个cell重用的ID
NSString *cellID = @"cellID";
// 对tableView注册xib
[tableView registerNib:[UINib nibWithNibName:@"MyCellWithXib" bundle:nil] forCellReuseIdentifier:cellID];

然后找到tableView实现数据源的方法:

// 设置 Cell
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 创建一个cell重用的ID(这里的cellID必须和上面对tableView注册xib时的cellID一致)
    NSString *cellID = @"cellID";
    // 创建一个MyCellWithXib的cell
    MyCellWithXib *cell = [tableView dequeueReusableCellWithIdentifier: cellID forIndexPath:indexPath];
    return cell;
}

最后一步:设置cell的高度

// 设置 cell 的高度
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 140;
}

完毕,运行一下,就会看到自定义的cell。

以上,是自定义UITableviewCell的两种方式。下一篇会介绍UITableview的下拉刷新、上拉加载、数据刷新等内容。

时间: 2024-10-11 04:21:59

iOS UITableView(二)的相关文章

iOS UITableView划动删除的实现

标签:划动删除 iphone 滑动删除 ios UITableView 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://rainbird.blog.51cto.com/211214/634587 从七八月前对苹果一无所知,到现在手持iphone,ipad,itouch有三个线上成熟app并熟练开发ios应用.一路走来一直站在前辈的肩膀上不断进步.如今生活工作稳定是时候将一直以来的一些心得整理出来了.想来想去决定先说说UITab

iOS UITableView代理方法详解

原 iOS UITableView代理方法详解 IOS UITableView的代理方法详解(http://my.oschina.net/u/2340880/blog/404958) 一.补充 在上一篇博客中,http://my.oschina.net/u/2340880/blog/404605,我将IOS中tableView(表视图)的一些常用方法总结了一下,这篇将tableView的代理方法作了总结,对上一篇博客进行了补充. 二.UITableViewDataSourc(数据源代理) 1.必

ios UITableView 异步加载图片并防止错位

UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况 对错位原因不明白的同学请参考我的另外一篇随笔:http://www.cnblogs.com/lesliefang/p/3619223.html . 当然大多数情况下可以用 SDWebImage, 这个库功能强大,封装的很好.但自己重头来写可能对问题理解的更深. SDWebImage 有点复杂,很多人也会参考一下封装出一套适合自己的类库. 基本思路如下: 1 扩展(category) UIImage

iOS开发-二维码扫描和应用跳转

iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦,出错也不方便调试.在iOS7之后,苹果自身提供了二维码的扫描功能,从效率上来说,原生的二维码远高于这些第三方框架.本文讲解如何使用原生框架实现二维码扫描功能,并且进行扫描后的项目跳转.ps:本期的源代码会在文章结尾给出链接 扫描相关类 二维码扫描需要获取摄像头并读取

ios UItableView,UITableViewHeaderFooterView分组头部的重用机制,简单地仿射变换CGAffineTransform

怎样设置包括第一栏在内相同高度的section(小技巧,虽然容易但容易忽略) *第一步,在viewdidload里将尾部设为0,table.sectionFooterHeight = 0;(代理方法)- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{ return 0; }虽然也可以设置尾部高度,但是设置后没有效果 第二步,调用tableView的代理方法- (CGF

iOS之二维码的制作与扫描

IOS之二维码的制作与扫描     二维码SDK的Dome“QRCode”中制作libqrencode库文件,扫描ZBarSDK库文件1.制作二维码  /*字符转二维码导入 libqrencode文件添加  #import "QRCodeGenerator.h"@property (strong , nonatomic) UIImageView* qRImageView;- (void)viewDidLoad{    [super viewDidLoad];    self.qRIma

IOS UITableView NSIndexPath属性讲解

IOS UITableView NSIndexPath属性讲解 查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为:dataSource和delegate. dataSource 是UITableViewDataSource类型,主要为UITableView提 供显示用的数据(UITableViewCell),指定UITableViewCell支持的编辑操作类型(insert,delete和 reordering),并根据用户的操作进行相应的数据更

iOS 花式二维码生成和二维码识别

iOS 原生的二维码识别非常之棒,反正比 ZXing 和 ZBar 效果都好些,所以以后打算尽量用原生的二维码识别,然后最近把原生的二维码生成也顺便做了一遍,并且在原有基础上加了一些样式参数,封了一个小库方便以后使用. 项目地址:https://github.com/EyreFree/EFQRCode EFQRCode 是一个用 Swift 编写的用来生成和识别二维码的库,它基于系统二维码生成与识别进行开发. 生成:利用输入的水印图/图标等资源生成各种艺术二维码: 识别:识别率比 iOS 原生二

iOS——UITableView数据源的一些问题

UITableView数据源的问题"name=image_operate_1771416366029362alt="iOS UITableView数据源的问题"src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif"real_src="http://s15.sinaimg.cn/bmiddle/002WA StNzy6NJcgxGSafe&690">