码迷,mamicode.com
首页 > 其他好文 > 详细

【精】表格(UITableView)总结(1):介绍与基础实现

时间:2015-04-13 19:05:32      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:ios   swift   表格   uitableview   总结   

转载请声明出处:http://blog.csdn.net/jinnchang/article/details/45028267

1、表视图(UITableView)

UITableView 继承自 UIScrollView。一个表视图可以由多个分段(section)组成,每个分段可以有一个头和尾。很多情况下表视图只有一个分段,而且不显示头尾。表视图本身也可以有一个头(显示在第一个分段之前)和一个尾(显示在最后一个分段之后)。一个表视图的整体元素结构示意图如下:
技术分享

(1)表视图风格

UITableView 有以下两种样式(UITableViewStyle)

  • Plain(普通样式)

  • Grouped(分组样式)

上述两种风格本质无区别,只是显示样式不同而已。

(2)表视图分割线(Separator)

分割线有以下三种样式(UITableViewCellSeparatorStyle)

  • None(无分割线)

  • SingleLine(单线条)

  • SingleLineEtched(带浮雕效果的线条)

(3)表视图单元格(Cell)

Cell 有以下四种显示样式(UITableViewCellStyle)

  • Default(左侧显示 textLabel,不显示 detailTextLabel,最左边可选显示 imageView)

  • Value1(左侧显示 textLabel,右侧显示 detailTextLabel,最左边可选显示 imageView)

  • Value2(左侧依次显示 textLabel、detailTextLabel,最左边可选显示 imageView)

  • Subtitle(左侧上方显示 textLabel,左侧下方显示 detailTextLabel,最左边可选显示 imageView)

Cell 有以下四种选中样式(UITableViewCellSelectionStyle)

  • None

  • Blue

  • Gray

  • Default

(4)附属图形(Accessory)

单元格的 Accessory 有以下五种样式(UITableViewCellAccessoryType)

  • None(无附属图形)

  • DisclosureIndicator(小箭头)

  • DetailDisclosureButton(详细信息按钮 + 指向右侧的箭头)

  • Checkmark(勾号)

  • DetailButton(详细信息按钮)

2、UITableView 协议

iOS 遵循 MVC 设计模式,很多操作通过代理和外界沟通,UITableView 同理实现了以下两种协议:
  • UITableViewDelegate
  • UITableViewDataSource
以下是官方分别对这两个协议的原文介绍:
UITableViewDelegate has no required methods. It declares methods that allow the delegate to modify visible aspects of the table view, manage selections, support an accessory view, and support editing of individual rows in a table.
UITableViewDataSource has two required methods. The "numberOfRowsInSection" method tells the table view how many rows to display in each section, and the "cellForRowAtIndexPath" method provides the cell to display for each row in the table. Optional methods allow the data source to configure multiple sections, provide headers and/or footers, and support adding, removing, and reordering rows in the table.

3、表视图控制器(UITableViewController)

很多时候一个 UIViewController 中只有一个 UITableView,因此苹果官方为了方便大家开发直接提供了一个 UITableViewController,这个控制器实现了 UITableView 数据源和代理协议,内部定义了一个 tableView 属性供外部访问,同时自动铺满整个屏幕、自动伸缩以方便我们的开发。如果需要用到 Table View 是不充满全屏的话,我们应该使用 UIViewController 自己创建和维护 UITableView。
从一定层面上来说,除了方便、自动设置委托和数据源属性外,表视图控制器没有任何其它的优势。

4、UITableView 基础示例

//
//  ViewController.swift
//  UITableViewSample-Basic
//
//  Created by jinnchang on 15/4/12.
//  Copyright (c) 2015年 Jinn Chang. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        tableView = UITableView(frame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height), style: .Plain)
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.delegate = self
        tableView.dataSource = self
        
        self.view.addSubview(tableView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }


}
GitHub 上项目地址:https://github.com/jinnchang/SwiftSamples/tree/master/advanced/UITableViewSample-Basic

5、结语

参考资料如下:

About Table Views in iOS Apps

UITableView Class Reference

文章最后更新时间:2015年4月13日16:43:52

【精】表格(UITableView)总结(1):介绍与基础实现

标签:ios   swift   表格   uitableview   总结   

原文地址:http://blog.csdn.net/jinnchang/article/details/45028267

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!