Swift实现自定义TableViewCell

25 篇文章 0 订阅

虽然SDK里面自带的TableViewCell功能已经算强大了,但是很多时候,我们还是需要自定义的Cell来满足我们自己的需求。最近研究了下如何用Swift实现自定义的TableViewCell,记录一下吧。

1. 

点击左下角的加号,添加新的类


XCode6.3 做了一些小改动,整合了一下,点击File,然后进行下一步:

2. 


这里可以给你自己的TableViewCell修改名字,记得把"Also create XIB file"前面的复选框选中

3. 

设计你自己想要的XIB样式。AutoLayout很强大,多用一用就慢慢熟练了,可以省去很多代码量。


StationTableViewCell.swift文件基本不需要做大的变动

下面进行关键的步骤,在TableView中添加进刚才我们自定义的TableViewCell

4. 

StoryBoard中我们设置好承载TableView的ViewController(ProjectDetail...Controller.swift)的各项属性


注意这里把tableview的style设置为Grouped,这样会在顶部出现一段空白,不过别担心,在接下来的代码里面我们会解决这个问题。

5. 

ViewDidLoad

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let appdelegate = UIApplication.sharedApplication().delegate as! AppDelegate
        appdelegate.projectDetail = self
        self.tableView.delegate = self
        self.tableView.dataSource = self
        // remove the blank of the header of the table view, mind the height must be more than 0
        self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.tableView.frame.size.width, 0.01))
        // register the custom tableview cell
        var nib = UINib(nibName: "StationTableViewCell", bundle: nil)
        self.tableView.registerNib(nib, forCellReuseIdentifier: "cell")
    }

为了在Cell里面点击button可以实现页面的跳转,我在界面刚初始化的时候,在AppDelegate里面实例化了一个当前ViewController的实例。如果对这个过程不了的,可以参见我的下一篇Blog,我会详细介绍一下如何实现。

接下来设置tableview的delegatedatasource代理

然后就是刚才提到的,去除顶部的空白的代码了:

        self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.tableView.frame.size.width, 0.01))
注意这里frame的height不能是0,如果是0是没有效果的,必须是比0大一点,但是我们把这个值设置的特别小,用肉眼看不出来,所以就变相达到了去除顶部空白的作用。所以我们设置成了0.01

接下来就是最关键的步骤了,初始化自定义的cell

        var nib = UINib(nibName: "StationTableViewCell", bundle: nil)
        self.tableView.registerNib(nib, forCellReuseIdentifier: "cell")

6. 

实现两个代理方法

    // #MARK: tableview delegate
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 80
    }
    
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        // To do 
    }
    
    // #MARK: tableview datasource
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        // all the custom cell into the tableview 
        var cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! StationTableViewCell
        return cell
    }

这几个代理方法就不多说了,很常用的。


到这里所有的步骤都完成了,运行一下程序,看看自定义的是什么样子的吧。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要根据文字内容自动撑开TableViewCell的高度,可以按照以下步骤操作: 1. 首先,在TableViewCell中添加一个UILabel,并设定好约束。 2. 在TableView的代理方法中,实现heightForRowAt方法。该方法返回值为该行的高度。在该方法中,计算UILabel的高度,并返回该高度。代码如下: ```swift func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { let text = dataArray[indexPath.row] let width = UIScreen.main.bounds.size.width - 20 let font = UIFont.systemFont(ofSize: 17) let size = CGSize(width: width, height: CGFloat(MAXFLOAT)) let paragraph = NSMutableParagraphStyle() paragraph.lineBreakMode = .byWordWrapping let attributes = [NSAttributedString.Key.font: font, NSAttributedString.Key.paragraphStyle: paragraph] let rect = text.boundingRect(with: size, options: [.usesLineFragmentOrigin, .usesFontLeading], attributes: attributes, context: nil) return rect.height + 20 } ``` 3. 在TableViewCell中,设置UILabel的numberOfLines为0,并设定好约束。 4. 在TableView的代理方法中,实现cellForRowAt方法。在该方法中,设置UILabel的text属性。代码如下: ```swift func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) let label = cell.viewWithTag(100) as! UILabel label.text = dataArray[indexPath.row] return cell } ``` 这样,就可以根据文字内容自动撑开TableViewCell的高度了。其中,dataArray是存储文字内容的数组。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值