教你写个多表视图

multi_table.gif

如图所示的多表视图是一个很常用的东西,之前我是用UIScrollViewUITableViewController做的。把当前的控制器作为一个父控制器,添加三个UITableViewController的实例作为子控制器,把父控制器中的 scrollView 作为容器,然后添加子控制器中的 tableView 作为子视图。这样做有一个问题,一旦有十几二十个表的话,内存就要爆炸了。解决的办法是可以自己写个重用机制,不过这显然没必要,用自带重用机制的UICollectionView应该是个更好的选择。

首先新建个HomeContainerViewController,继承自UICollectionViewController,然后在viewDidLoad里面加上这两句:

collectionView?.pagingEnabled = true
collectionView?.bounces = false

这样滑动的时候就会有翻页的段落感,滑到边界的时候也不会有回弹效果。

然后要用 layout 控制布局,用最常用的 UICollectionViewFlowLayout 就行了,设置单元格的宽高,既然是翻页,宽肯定是跟屏幕等宽,高度就看你需求了,但是不要超过 collectionView 的高,如下:

lazy var layout: UICollectionViewFlowLayout = {
    let lazyLayout = UICollectionViewFlowLayout()
    lazyLayout.itemSize = CGSize(width: Width, height: Height)
    lazyLayout.minimumInteritemSpacing = 0
    lazyLayout.minimumLineSpacing = 0
    lazyLayout.scrollDirection = .Horizontal
    return lazyLayout
}()

之后就可以用这个 layout 来初始化之前定义的HomeContainerViewController。接下来我们要自定义一个UICollectionViewCell,让它包含一个 tableView:

class HomeCollectionViewCell: UICollectionViewCell {
    
    var tableView: UITableView!
    var dataSource: HomeTableDataSource!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        tableView = UITableView(frame: bounds, style: .Grouped)

        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: CellReuseIdentifier.LatestArticles)
        addSubview(tableView)

        dataSource = HomeTableDataSource()
        tableView.dataSource = dataSource
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }  
}

这边还有一个 dataSource(同理可自行添加 delegate),是 tableView 的数据源,可能大部分人习惯把控制器又当 dataSource 又当 delegate,不过我比较喜欢分开,就算是用同一个控制器,也会用extension把代码分开。好现在我们看看如何定义这个 dataSource:

class HomeTableDataSource: NSObject, UITableViewDataSource {

    var cellData: String?
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 20
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return 1
    }

    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier(CellReuseIdentifier.LatestArticles, forIndexPath: indexPath)

        //Configure the cell...
        cell.textLabel?.text = cellData
        return cell
    }
}

注意一定要继承 NSObject ,因为 UITableViewDataSource协议是继承了NSObjectProtocol协议的,所以如果你不继承NSObject的话,还得自己写一堆方法来遵守NSObjectProtocol协议。因为这边只是个 Demo,所以我直接在 cell 中显示cellData的值,那cellData 的值在哪里设置呢?显然是在HomeContainerViewController中:

let tableViewDataList = ["first table", "second table", "third table"]
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! HomeCollectionViewCell
    
    // Configure the cell
    cell.dataSource.cellData = tableViewDataList[indexPath.section]
    cell.tableView.reloadData()
    
    return cell
}

在真实场景中一般是会在 dataSource 中放一个 urlString 的属性,然后一旦这个属性被赋值就自动联网取数据。这边 cell 是会被复用的,在翻到第三页时,会复用第一页的 cell ,第四页复用第二页的 cell……依此类推,所以需要给 cell 中的tableView调用 reloadData方法,不然就算改变了表中的数据,也不能正确的显示(奇数页都显示第一页的数据,偶数页都显示第二页的数据)。

这样就完成了一个多表视图,实际项目一般会在 table 上方放个小滑块指示器什么的,也很简单,只要在cellForItemAtIndexPath方法中根据indexPath.section来设置滑块位置就好了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java 源码分析

JDBC

1.普通的 JDBC 链接 public class JdbcConnect { @Test public void connect() thro...

3426
来自专栏LinXunFeng的专栏

iOS - 解决tableHeaderView添加searchBar后出现的问题

1122
来自专栏移动端开发

Swift 2.0 自定义cell和不同风格的cell

      昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码。先自己创建一个cell,继承于U...

1966
来自专栏技术之路

【swift学习笔记】三.使用xib自定义UITableViewCell

使用xib自定义tableviewCell看一下效果图 ? 1.自定义列 新建一个xib文件 carTblCell,拖放一个UITableViewCell,再拖...

2247
来自专栏Rindew的iOS技术分享

iOS实现三列表格点选(附Demo)

2103
来自专栏移动端开发

Swift 2.0 UItableView 的简单使用

在IOS开发中,UItableView 的使用真的是最常见最普通的了,现在在自学swift 今天也是这用Swift 写了写 UItableview的使用,还有一...

2399
来自专栏青玉伏案

iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调

UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout...

2258
来自专栏一“技”之长

iOS流布局UICollectionView系列二——UICollectionView的代理方法

        在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与思路,这篇博客是上一篇...

4762
来自专栏Android点滴积累

Android 短信拦截及用途分析

监听系统短信这个只能作为一个技术点来研究下,读者可能在工作中可能不会哦涉及到,一般的应用软件也不会有这个需求 但是作为程序员呢,多了解一下也是好的。 Andro...

3436
来自专栏编程微刊

hcharts实现堆叠柱形图

1573

扫码关注云+社区

领取腾讯云代金券