美文网首页Swift专题Oc & SwiftiOS学习
Swift编程(一):UITableView及自定义Cell的X

Swift编程(一):UITableView及自定义Cell的X

作者: zZ爱吃菜 | 来源:发表于2015-11-03 22:08 被阅读10644次

    写在前面:

    欢迎大家关注我的个人博客:<a href="http://blog.noasis.cn" >博客地址</a>,这里主要是我在个人开发时候遇到的坑和挖完的坑,包括 PHP CentOS 以及 Swift 等相关只是

    学习目标:

    • 使用纯代码创建任意自定义的UITableViewCell
    • 使用纯代码创建UITableView并调用UITableViewCell

    步骤

    1. 创建一个UITableViewCell(并创建xib)命名为 DemoListCell
    创建Cell

    1) 在DemoListCell.xib中画出你想要的cell样式(AutoLayout),另外注意要给Cell制定 IdentityId: DemoListID

    设置CellId

    2) 我这里创建了两个UIImage,一个UILabel (图片我会后续补上)

    创建布局控件

    3) 从UIDemoListCell.xib 向 UIDemoListCell.swift 划线(右键选择控件不放拖到.swift文件中放手并命名),Cell样式的初始化就完成了,接下来我们需要调用。代码如下:

    @IBOutlet weak var cellImg: UIImageView!
    @IBOutlet weak var cellLabel: UILabel!
    @IBOutlet weak var cellIcon: UIImageView!
    

    注释:图片我会后续补上去

    1. 调用自定义的UITableViewCell
      1) 创建数据源和CellId
    let cellId = "DemoListID" //获取CellId
    var tableData: (titles:[String], values:[String])? //定义一个数据源
    

    2) 在viewDidLoad中使用代码创建一个UITableView

    override func viewDidLoad() {
            super.viewDidLoad()
            self.title = "主页"
            self.view.backgroundColor = UIColor.whiteColor()
            
            //demoList的设置
            self.demoList.frame = CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)
            //下面代码是用来去掉UITableView的Cell之间的线
            //self.demoList.separatorStyle = UITableViewCellSeparatorStyle.None
            let nib = UINib(nibName: "DemoListCell", bundle: nil) //nibName指的是我们创建的Cell文件名
            self.demoList.registerNib(nib, forCellReuseIdentifier: cellId)
            self.demoList.delegate = self
            self.demoList.dataSource = self
            self.view.addSubview(self.demoList)
            self.showData()
        }```  
    3. 展示数据源,这里我就写一个静态数据作为数据源即可
    ```swift
    func showData()
        {
            self.tableData = (["SLC提示组件", "SwiftNotice组件--JohnLui", "CNPPopup组件","闭包回调","KLCPopup组件","Pitaya网络组件","Neon布局组件"], ["SCLAlert", "SwiftNotice", "CNPPopup","ClosureBack","","",""])
            self.demoList.reloadData()
    }
    
    1. 既然使用了UITableView那么就必须要使用注意到有些必须的代理需要重写,其实我们可以去UITableView中查看,没有 optional开头的function都是必须重写
      1) 这里我们重写 这里我们重写四个,代码如下:
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
            return 1
        }
        
        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            
            guard let count:Int = self.tableData!.titles.count else {
                print("没有数据")
            }
            
            return count
        }
        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCellWithIdentifier(self.cellId, forIndexPath: indexPath) as! DemoListCell
            //cell.cellImg.image = UIImage(named: powerData[indexPath.row][2])
            cell.cellLabel.text = self.tableData!.titles[indexPath.row]
            
            return cell
        }
        
        func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)
        {
            let index = indexPath.row
            let storyID = tableData!.values[index] as String
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            var nextView:UIViewController
            switch storyID {
            case "SCLAlert":
                nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! SCLAlertDemoViewController
            case "SwiftNotice":
                nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! SwiftNoticeDemoViewController
            case "CNPPopup":
                nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! CNPPopupDemoViewController
            case "ClosureBack":
                nextView = LWRootViewController()
            default:
                nextView = storyboard.instantiateViewControllerWithIdentifier("SCLAlert") as! SCLAlertDemoViewController
            }
            self.navigationController?.pushViewController(nextView, animated: true)
        }
        
        func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat
        {
            return 50
        }
    

    注意事项:

    既然创建了UITableView,需要在Class继承后面加上Delegate和DataSource

    class MainViewController: UIViewController,UITableViewDelegate,UITableViewDataSource
    

    总结:

    这样我们就成功创建了一个纯代码创建的UITableView以及调用了自定义的Cell,是不是很简单!
    下面就是效果图(<a href="https://github.com/liu1013269528/Collection">我的GitHub</a> )

    效果图

    相关文章

      网友评论

      • Dio丶:虽然基本上是照着斯坦福的公开课生搬硬套,看起来都是基本的翻译而已,但至少你做了,其实写的东西价值没有太大,路过,点个赞。奉劝路人看斯坦福公开课。
        zZ爱吃菜:@c130635e4495 没求你来看,也没求你在我文章下面随地大小便:blush:
      • 2b03c4482187:感谢大神分享,谢谢了 :smile: :smile:
      • light_of_king:纯代码请不要用 XIB
        butterflyer:@light_of_king 你好,能说下你是啥意思嘛,不大会弄。
        light_of_king:@zZ爱吃菜 建议你将纯代码的一些方法简要提一下,就是 自定义cell中对 init 的重写以及 require, 然后是控件的添加方法,以及在 tableView 中调用自定义 cell 的方法,注册 cell,还有关于返回cell时需要用!来表示接受子类
        我在搜索时搜索到你的答案,建议你补充一下,以便能帮助更多的人
        zZ爱吃菜:@light_of_king 复杂的视图我还是会用Xib来布局的
      • 一号线:请问用纯代码时,cell内部控件是否用懒加载要好一点。。
      • 921daab44a8c:感谢分享,学习了

      本文标题:Swift编程(一):UITableView及自定义Cell的X

      本文链接:https://www.haomeiwen.com/subject/cuiqhttx.html