秃萝卜的技术博客

A iOS Developer Newer

欢迎来到我的技术博客,我是秃萝卜(@Tuluobo),一名 iOS 开发菜鸟。


希望能在 iOS 开发的道路上越走越远,拥有自己开发的千万级用户的 App 。

结合nib开发自定义cell

今天主要是想跟大家分享一下自己使用nib开发自定义cell的经验,此文是初级入门文章,适合入门菜鸟学习,大牛直接略过。

好了,话不多说,先上源码,欢迎大家提出各种意见和指导。

引言

在App中我们会经常用到TableView,这几乎是每一个App的标配,而官方的cell相对简单,很多时候我们都需要自己定义我们的cell,如果只在一个页面用到这个cell的话我们就可以直接在SB中设计,但是如果多个页面都要用的话我们就要考虑代码和文件的重用,这样,设计一个xib是必要的。那么如何来设计呢?

自定义cell的设计和使用

我在这里有一个Demo,可以再上面的网址下载到。

首先我们建立一个工程。

新建工程

首先我们看到的是项目的配置页面,接着我们需要新建一个TableViewController文件,按着Command+N弹出新建文件框,我们选ios下面的cocoa,接着出现下图所示弹窗,选择UITableViewController,这里不要勾选Xib。

勾选xib

我们切换到StoryBoard文件(这里我们关闭了Auto layout),如下图取消Autolayout。

取消Autolayout

拖入一个Button到项目初始的ViewController,再拖入一个TableViewController,接着点选button,并按着ctrl+拖到TableViewController,如果你还需要导航栏,可以选择push(show),如果没有导航栏,选择model,下图中选择的是push,但是还没有加导航栏。

下来我们要绑定SB中的TableViewController与我们新建的类。按照步骤设置即可。

绑定SB

接着,在工程中我们使用Command+N新建一个文件,如图,这里要勾选Xib这个选项。

新建一个文件

下来检查类与Cell的绑定,如果已经绑定,就不要管了,如果没有,我们手动绑定。

检查类与Cell的绑定

这个时候我们的项目中文件就是这样的。

我们的项目

到这里我们的前期工作就完成了,现在我们要设计自己的cell了,点击CustomTableViewCell.xib,这里我们拖进来两个Label,然后点击右上角的两个圈圈,这个时候屏幕一分为二,我们选择每一个Label,Ctrl+拖 到右边的面板,松手,选择outlet,下面输入我们的变量名,点击确认,完成后就是下面的图。

连接控件

我们点击两个圈圈左边的按钮就回到了一个视图的状态。

下面是我们CustomTableViewCell.swift的代码:

import UIKit

class CustomTableViewCell: UITableViewCell {

    //数据
    var data: MyModel? {
        didSet {
            updateUI()
        }
    }

    @IBOutlet weak var firstLabel: UILabel!
    @IBOutlet weak var secondLabel: UILabel!

    //更新UI,这里借鉴了斯坦福大学的课程中的编程方法
    func updateUI() {

        self.firstLabel.text = nil
        self.secondLabel.text = nil

        if let data = self.data {
            self.firstLabel.text = data.fText
            self.secondLabel.text = data.sTest
        }
    } 
}

这里面我们定义了一个data,这个data的类型是一个我们定义的模型类MyModel,下面是我们这个模型的简单代码:

import Foundation

class MyModel {

    var fText: String
    var sTest: String

    init(fd: String, sd: String){
        self.fText = fd
        self.sTest = sd
    }

}

我们现在已经设计好了我们的cell和模型类,现在我们回到CustomTableViewController.swift文件中,这里使我们加载自定义cell的TableView。下面贴出我的代码:

//定义数据源
    var dataSource = [MyModel]()

    override func viewDidLoad() {
        super.viewDidLoad()
        //这里是自定义cell的关键,需要注册Nib
        //还有这里一般的常量尽量写在一个文件中,我这里没有写出去为了让大家看明白
        let nib = UINib(nibName: "CustomTableViewCell", bundle: nil)
        self.tableView.registerNib(nib, forCellReuseIdentifier: "custom_cell")
        refresh()
    }

这里我们首先定义了我们的数据源,他是一个MyModel的数组,接着我们在加载完TableView后将我们的自定义cell注册到这个TableView中,这也是关键步骤。

其中我们定义了一个refresh()函数,这里一般是从网络中或者数据库中获取数据的函数,我们在这里模拟生成了一些数据:

//获得数据,这里一般通过网络获得数据
    func refresh(){
        for i in 0...10 {
            self.dataSource.append(MyModel(fd: "MyModel\(i)", sd: "\(i)"))
        }
        //一般通过网络获取数据都是异步的,所以这里要重新载入数据
        //测试使用的是自己生成数据,是串行,所以不用重新载入
        //self.tableView.reloadData()
    }

这里是我们对TableView中数据源的操作。

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    // 计算有多少行
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return dataSource.count
    }

    // cell 的使用
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("custom_cell", forIndexPath: indexPath) as! CustomTableViewCell

        cell.data = self.dataSource[indexPath.row]

        return cell
    }

这个时候我们的自定义cell已经可以工作了。下面看一下:

运行结果

后来我又在cell中加入了一张图片,这里我没有动态设置图片,使用了一张我准备的图片。

加入图片,运行结果

我再次运行,出现这样的结果,大家一定猜到了,高度不够,是的。下面我们要设置cell的高度。

设置cell的高度,运行结果

// 设置每行的高度
    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 120
    }

这里我们需要重载这个设置行高的函数,在这个函数我们可以设置固定的高度,也可以动态计算我们cell的高度。

总结

本文的测试环境是:Xcode7.1和Swift2.1

对于我们自定义的cell,其实主要的代码就是绑定类和注册到TableView。

好了,欢迎大家交流,最后再放一下 Demo源码

最近的文章

OC基本语法总结(一)——OC之门

2014年苹果发布了新的语言Swift,同时我又是一个喜欢玩转新东西的人。也是在这个时候,我进入了iOS开发的队列,开始学习Swift,开发iOS应用,现在已经有一个App在App Store上线。然后,在过去的将近两年的时间中,我一直没有深入玩转过苹果的元老语言Objective-C(后面简称OC),但是从编程语言排行榜来看,OC虽然一直再呈下降趋势,但是毕竟经过这么多年的沉淀,很多人还是不愿意抛弃他,学习新的语言,苹果目前也还在支持,并将在未来的一段时间支持,国内外的大部分公司还是以O...…

iosswift继续阅读
更早的文章

【Django实战问题】Pycharm中数据库迁移输入默认值出错

项目编码与终端默认编码不一致错误实际的开发场景是这样的,如果你在Django开发过程中,对某一个表增加了一个字段,而这个字段既没有设置默认值,也没有设置可为空,这个时候如果你使用Pycharm自带的终端做数据库迁移的时候就有可能出现错误。错误代码如下:Traceback (most recent call last):File "D:\Program Files (x86)\JetBrains\PyCharm 4.5.2\helpers\pycharm\django_manage...…

djangopython继续阅读