www.icesr.com
IT运维工程师的摇篮

iOS UITableView(二)

本文主要内容:

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

2.Xib创建自定义cell.

自定义Cell

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

1.纯代码方式自定义cell

Swift版:

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

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

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

<code><span class="hljs-comment">// 重写init方法</span>
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    <span class="hljs-keyword">super</span><span class="hljs-variable">.init</span>(style: style, reuseIdentifier: reuseIdentifier)

    <span class="hljs-comment">// 创建图片:cellImage,并添加到cell上</span>
    let imageX: <span class="hljs-built_in">CGFloat</span> = <span class="hljs-number">10</span>
    let imageY: <span class="hljs-built_in">CGFloat</span> = <span class="hljs-number">10</span>
    let imageWidth: <span class="hljs-built_in">CGFloat</span> = <span class="hljs-number">100</span>
    let imageHeight: <span class="hljs-built_in">CGFloat</span> = <span class="hljs-number">100</span>
    cellImage = <span class="hljs-built_in">UIImageView</span>(frame: CGRectMake(imageX, imageY, imageWidth, imageHeight))
    cellImage<span class="hljs-variable">.backgroundColor</span> = <span class="hljs-built_in">UIColor</span><span class="hljs-variable">.redColor</span>()
    <span class="hljs-keyword">self</span><span class="hljs-variable">.addSubview</span>(cellImage)

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

    <span class="hljs-comment">// 创建内容:cellText,并添加到cell上</span>
    let textX: <span class="hljs-built_in">CGFloat</span> = cellTitle<span class="hljs-variable">.frame</span><span class="hljs-variable">.origin</span><span class="hljs-variable">.x</span>
    let textY: <span class="hljs-built_in">CGFloat</span> = CGRectGetMaxY(cellTitle<span class="hljs-variable">.frame</span>) + <span class="hljs-number">10</span>
    let textWidth: <span class="hljs-built_in">CGFloat</span> = titleWidth
    let textHeight: <span class="hljs-built_in">CGFloat</span> = <span class="hljs-number">50</span>
    cellText = <span class="hljs-built_in">UILabel</span>(frame: CGRectMake(textX, textY, textWidth, textHeight))
    cellText<span class="hljs-variable">.text</span> = <span class="hljs-string">"cell的内容xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"</span>
    cellText<span class="hljs-variable">.font</span> = <span class="hljs-built_in">UIFont</span><span class="hljs-variable">.systemFontOfSize</span>(<span class="hljs-number">12</span>)
    cellText<span class="hljs-variable">.numberOfLines</span> = <span class="hljs-number">0</span>
    <span class="hljs-keyword">self</span><span class="hljs-variable">.addSubview</span>(cellText)

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

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

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

最后一步:设置cell的高度

<code><span class="hljs-comment">// 设置 cell 的高度</span>
func tableView(tableView: <span class="hljs-built_in">UITableView</span>, heightForRowAtIndexPath indexPath: <span class="hljs-built_in">NSIndexPath</span>) -&gt; <span class="hljs-built_in">CGFloat</span> {
    <span class="hljs-comment">// 这个数值是根据自定义cell的高度来计算出来的</span>
    <span class="hljs-keyword">return</span> <span class="hljs-number">140</span>
}</code>

Objective-C版:

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

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

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

<code><span class="hljs-comment">// 重写init方法</span>
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(<span class="hljs-built_in">NSString</span> *)reuseIdentifier {
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">self</span> = [<span class="hljs-keyword">super</span> initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        <span class="hljs-comment">// 创建图片:cellImage,并添加到cell上</span>
        <span class="hljs-built_in">CGFloat</span> imageX = <span class="hljs-number">10</span>;
        <span class="hljs-built_in">CGFloat</span> imageY = <span class="hljs-number">10</span>;
        <span class="hljs-built_in">CGFloat</span> imageWidth = <span class="hljs-number">100</span>;
        <span class="hljs-built_in">CGFloat</span> imageHeight = <span class="hljs-number">100</span>;
        <span class="hljs-keyword">self</span><span class="hljs-variable">.cellImage</span> = [[<span class="hljs-built_in">UIImageView</span> alloc] initWithFrame:CGRectMake(imageX, imageY, imageWidth, imageHeight)];
        <span class="hljs-keyword">self</span><span class="hljs-variable">.cellImage</span><span class="hljs-variable">.backgroundColor</span> = [<span class="hljs-built_in">UIColor</span> redColor];
        [<span class="hljs-keyword">self</span> addSubview:<span class="hljs-keyword">self</span><span class="hljs-variable">.cellImage</span>];

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

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

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

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

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

最后一步:设置cell的高度

<code><span class="hljs-comment">// 设置 cell 的高度</span>
-(<span class="hljs-built_in">CGFloat</span>)tableView:(<span class="hljs-built_in">UITableView</span> *)tableView heightForRowAtIndexPath:(<span class="hljs-built_in">NSIndexPath</span> *)indexPath {
    <span class="hljs-comment">// 这个数值是根据自定义cell的高度来计算出来的</span>
    <span class="hljs-keyword">return</span> <span class="hljs-number">140</span>;
}</code>

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

2.使用Xib方式自定义cell

Swift版:

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

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

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

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

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

<code><span class="hljs-comment">// 重写init方法</span>
<span class="hljs-keyword">override</span> init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    <span class="hljs-keyword">super</span>.init(style: style, reuseIdentifier: reuseIdentifier)
    <span class="hljs-comment">// 在此控制控件的属性</span>
    <span class="hljs-comment">// ......   </span>
}
required init?(coder aDecoder: NSCoder) {
    fatalError(<span class="hljs-string">"init(coder:) has not been implemented"</span>)
}</code>

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

<code><span class="hljs-comment">// 创建一个cell重用的ID</span>
<span class="hljs-keyword">let</span> cellID = <span class="hljs-string">"cellID"</span>
<span class="hljs-comment">// 对tableView注册xib</span>
tableView.registerNib(UINib(nibName: <span class="hljs-string">"MyCellWithXib"</span>, bundle: nil), forCellReuseIdentifier: cellID)</code>

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

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

最后一步:设置cell的高度

<code><span class="hljs-comment">// 设置 cell 的高度</span>
func tableView(tableView: <span class="hljs-built_in">UITableView</span>, heightForRowAtIndexPath indexPath: <span class="hljs-built_in">NSIndexPath</span>) -&gt; <span class="hljs-built_in">CGFloat</span> {
    <span class="hljs-comment">// 这个数值是根据自定义cell的高度来计算出来的</span>
    <span class="hljs-keyword">return</span> <span class="hljs-number">140</span>
}</code>

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

Objective-C版:

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

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

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

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

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

<code><span class="hljs-comment">// 重写init方法</span>
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(<span class="hljs-built_in">NSString</span> *)reuseIdentifier {
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">self</span> = [<span class="hljs-keyword">super</span> initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        <span class="hljs-comment">// 在此控制控件的属性</span>
        <span class="hljs-comment">// ......</span>
    }
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>;
}</code>

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

<code><span class="hljs-comment">// 创建一个cell重用的ID</span>
<span class="hljs-built_in">NSString</span> *cellID = @<span class="hljs-string">"cellID"</span>;
<span class="hljs-comment">// 对tableView注册xib</span>
[tableView registerNib:[UINib nibWithNibName:@<span class="hljs-string">"MyCellWithXib"</span> bundle:<span class="hljs-literal">nil</span>] forCellReuseIdentifier:cellID];</code>

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

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

最后一步:设置cell的高度

<code><span class="hljs-comment">// 设置 cell 的高度</span>
-(<span class="hljs-built_in">CGFloat</span>)tableView:(<span class="hljs-built_in">UITableView</span> *)tableView heightForRowAtIndexPath:(<span class="hljs-built_in">NSIndexPath</span> *)indexPath {
    <span class="hljs-keyword">return</span> <span class="hljs-number">140</span>;
}</code>

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

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

未经允许不得转载:冰点网络 » iOS UITableView(二)

分享到:更多 ()

评论 抢沙发

评论前必须登录!