Demo github地址: https://github.com/liuzhiyi1992/ZYThumbnailTableView
本人博客原文：http://zyden.vicp.cc/zythumbnailtableview/
歡迎轉(zhuǎn)載，請(qǐng)注明出處，謝謝
后期會(huì)更新oc版本

可展開(kāi)型預(yù)覽TableView，開(kāi)放接口，完全自由定制

雖然最近很忙，天天被html+css虐待，但是在許多朋友的壓力下，最近還是抽空完成了一個(gè)新輪子ZYThumbnailTableView。以下嚴(yán)格按照小學(xué)語(yǔ)文老師教的方式排版：

Summary：

tableView的皮膚，類似一個(gè)小型app的強(qiáng)大交互心臟，四肢高度解耦高度自由定制，每個(gè)cell其實(shí)都是一個(gè)業(yè)務(wù)的縮略view，原諒我語(yǔ)文不太好不懂表達(dá)，這樣的縮略view下文就叫做thumbnailView，可以根據(jù)上下手勢(shì)展開(kāi)更多的功能視圖塊，這些視圖塊已經(jīng)開(kāi)放了接口，支持使用者自己diy提供創(chuàng)建，同時(shí)接口中帶的參數(shù)基本滿足使用者需要的交互，當(dāng)然tableviewCell也是完全自由diy的，規(guī)矩，先上效果圖。

• 工作特點(diǎn)：tableViewCell充當(dāng)一個(gè)縮略內(nèi)容的容器，初始內(nèi)容展示局限于cellHeight，當(dāng)cell被點(diǎn)擊后，根據(jù)縮略view內(nèi)容重新計(jì)算出完整的高度，裝入另外一個(gè)容器中完整展示出來(lái)，并且可以上下拖拽擴(kuò)展出上下功能視圖。

• 自由定制：看見(jiàn)的除了功能以外，全部視圖都開(kāi)放接口靈活Diy，tableViewCell，頭部擴(kuò)展視圖(topView)，底部擴(kuò)展視圖(bottomView)都是自己提供。

• 使用簡(jiǎn)單：只需要把自己的tableViewCell，topView，bottomView配置給ZYThumbnailTableViewController對(duì)象。

profile(可略過(guò)):

Block:

• ConfigureTableViewCellBlock = () -> UITableViewCell?
• UpdateTableViewCellBlock = (cell: UITableViewCell, -indexPath: NSIndexPath) -> Void
• CreateTopExpansionViewBlock = (indexPath: NSIndexPath) -> UIView
• CreateBottomExpansionViewBlock = () -> UIView

Define:

• NOTIFY_NAME_DISMISS_PREVIEW
  通知名(讓展現(xiàn)出來(lái)的thumbnailView消失)
• MARGIN_KEYBOARD_ADAPTATION
  自動(dòng)處理鍵盤(pán)遮擋輸入控件后，鍵盤(pán)與輸入控件保持的間距（自動(dòng)處理鍵盤(pán)遮擋事件使用ZYKeyboardUtil實(shí)現(xiàn)
• TYPE_EXPANSION_VIEW_TOP
  處理展開(kāi)抖動(dòng)事件時(shí)，頂部擴(kuò)展控件的標(biāo)識(shí)
• TYPE_EXPANSION_VIEW_BOTTOM
  處理展開(kāi)抖動(dòng)事件時(shí)，底部擴(kuò)展控件的標(biāo)識(shí)

Property:
開(kāi)放：

• tableViewCellHeight
• tableViewDataList
• tableViewCellReuseId
• tableViewBackgroudColor
• keyboardAdaptiveView 你自定義控件里如果有希望不被鍵盤(pán)遮擋的輸入控件，賦值給他，會(huì)幫你==自動(dòng)處理遮蓋事件==
  私有：
• mainTableView
• clickIndexPathRow 記錄被點(diǎn)擊cell的indexPath row
• spreadCellHeight 存儲(chǔ)thumbnailCell展開(kāi)后的真實(shí)高度
• cellDictionary 存儲(chǔ)所有存活中的cell
• thumbnailView 縮略view
• thumbnailViewCanPan 控制縮略view展開(kāi)(擴(kuò)展topView&buttomView)手勢(shì)是否工作
• animator UI物理引擎控制者
• expandAmplitude view展開(kāi)時(shí)抖動(dòng)動(dòng)作的振幅
• keyboardUtil 自動(dòng)處理鍵盤(pán)遮擋事件工具對(duì)象ZYKeyboardUtil

Delegate func:

• optional func zyTableViewDidSelectRow(tableView: UITableView, indexPath: NSIndexPath)

對(duì)外會(huì)用到的func:

• dismissPreview()
  讓thumbnailView消失，在TopView,BottomView等沒(méi)有zyThumbnailTableView對(duì)象的地方可以使用通知NOTIFY_NAME_DISMISS_PREVIEW
• reloadMainTableView()
  重新加載tableView

Usage:

------結(jié)合Demo介紹使用方法：
創(chuàng)建ZYThumbnailTableViewController對(duì)象：

zyThumbnailTableVC = ZYThumbnailTableViewController()

配置tableViewCell必須的參數(shù)：cell高，cell的重用標(biāo)志符，tableView的數(shù)據(jù)源等

zyThumbnailTableVC.tableViewCellReuseId = "DIYTableViewCell"
zyThumbnailTableVC.tableViewCellHeight = 100.0
//當(dāng)然cell高可以在任何時(shí)候動(dòng)態(tài)配置
zyThumbnailTableVC.tableViewDataList = dataList
zyThumbnailTableVC.tableViewBackgroudColor = UIColor.whiteColor()
//背景顏色可不設(shè)置，默認(rèn)為白色

接下來(lái)給ZYTableView配置你自己的tableViewCell，當(dāng)然除了createCell外還可以在里面進(jìn)行其他額外的操作，不過(guò)這個(gè)Block只會(huì)在需要生成cell的時(shí)候被調(diào)用，而重用cell并不會(huì)

//--------insert your diy tableview cell
zyThumbnailTableVC.configureTableViewCellBlock = {
    return DIYTableViewCell.createCell()
}

配置cell的update方法，tableView配置每個(gè)cell必經(jīng)之處，除了updateCell可以添加額外的操作。這里要注意updateCell的時(shí)候建議盡量使用zyThumbnailTableVC對(duì)象里的數(shù)據(jù)源datalist,同時(shí)要注意時(shí)刻保證VC對(duì)象里的數(shù)據(jù)源為最新，接口回調(diào)更改數(shù)據(jù)源時(shí)不要忘了對(duì)zyThumbnailTableVC.tableViewDataList的更新。

zyThumbnailTableVC.updateTableViewCellBlock =  { [weak self](cell: UITableViewCell, indexPath: NSIndexPath) -> Void in
    let myCell = cell as? DIYTableViewCell
    //Post是我的數(shù)據(jù)model
    guard let dataSource = self?.zyThumbnailTableVC.tableViewDataList[indexPath.row] as? Post else {
        print("ERROR: illegal tableview dataSource")
        return
    }
    myCell?.updateCell(dataSource)
}

配置你自己的頂部擴(kuò)展視圖 & 底部擴(kuò)展視圖（expansionView）

• 兩個(gè)Block均提供indexPath參數(shù)，只是因?yàn)槲业腂ottomView的業(yè)務(wù)暫時(shí)不需要識(shí)別對(duì)應(yīng)的是哪個(gè)cell，所以使用時(shí)把參數(shù)省略掉了。
• 這里還有一個(gè)對(duì)zyThumbnailTableVC.keyboardAdaptiveView的賦值，是因?yàn)槲业腂ottomView中包含有TextField，正如上文所說(shuō)，ZYKeyboardUtil會(huì)自動(dòng)幫我處理鍵盤(pán)遮擋事件。(==注意==：賦值給keyboardAdaptiveView的和我往Block里送的是同一個(gè)對(duì)象)

//--------insert your diy TopView
zyThumbnailTableVC.createTopExpansionViewBlock = { [weak self](indexPath: NSIndexPath) -> UIView in
    //Post是我的數(shù)據(jù)model
    let post = self?.zyThumbnailTableVC.tableViewDataList[indexPath.row] as! Post
    let topView = TopView.createView(indexPath, post: post)!
    topView.delegate = self;
    return topView
}

let diyBottomView = BottomView.createView()!
//--------let your inputView component not cover by keyboard automatically (animated) (ZYKeyboardUtil)
zyThumbnailTableVC.keyboardAdaptiveView = diyBottomView.inputTextField;
//--------insert your diy BottomView
zyThumbnailTableVC.createBottomExpansionViewBlock = { _ in
    return diyBottomView
}

結(jié)合ZYKeyboardUtil工作的效果:

• 標(biāo)記為已讀后，小圓點(diǎn)會(huì)消失
• 標(biāo)識(shí)為喜歡后，會(huì)在對(duì)應(yīng)的cell旁邊出現(xiàn)一個(gè)星星

createView的時(shí)候我將從createTopExpansionViewBlock參數(shù)中得到的indexPath儲(chǔ)存在我的topView對(duì)象中，當(dāng)favorite按鈕被點(diǎn)擊時(shí)就可以indexPath為憑據(jù)利用代理改變對(duì)應(yīng)數(shù)據(jù)源里的對(duì)應(yīng)狀態(tài)，同時(shí)在下次createView時(shí)根據(jù)indexPath取得對(duì)應(yīng)的數(shù)據(jù)源來(lái)顯示。如果這些交互會(huì)更新一些與cell相關(guān)的數(shù)據(jù)，還可以在代理方法中調(diào)用zyThumbnailTableVC.reloadMainTableView()讓tableView重新加載一遍。

//TopView---------------------------------------------
class func createView(indexPath: NSIndexPath, post: Post) -> TopView? {
    //--------do something
    view.indexPath = indexPath
    return view
}

//touch up inside---------------------------------------------
@IBAction func clickFavoriteButton(sender: UIButton) {
    //--------do something
    delegate.topViewDidClickFavoriteBtn?(self)
}

//代理方法---------------------------------------------
func topViewDidClickFavoriteBtn(topView: TopView) {
    let indexPath = topView.indexPath
    //Post是我的數(shù)據(jù)model
    let post = zyThumbnailTableVC.tableViewDataList[indexPath.row] as! Post
    post.favorite = !post.favorite
    zyThumbnailTableVC.reloadMainTableView()
}

還有對(duì)于導(dǎo)航條樣式處理的話，Demo中直接在外面對(duì)zyThumbnailTableView對(duì)象的navigationItem做處理，亦或者可以在我的源代碼中讓ZYThumbnailTabelViewController繼承你封裝過(guò)導(dǎo)航欄樣式的父類。

func configureZYTableViewNav() {
        let titleView = UILabel(frame: CGRectMake(0, 0, 200, 44))
        titleView.text = "ZYThumbnailTabelView"
        titleView.textAlignment = .Center
        titleView.font = UIFont.systemFontOfSize(20.0);
        //503f39
        titleView.textColor = UIColor(red: 63/255.0, green: 47/255.0, blue: 41/255.0, alpha: 1.0)
        zyThumbnailTableVC.navigationItem.titleView = titleView
    }

==今天一次跟那么Block接觸，還是那一句，注意循環(huán)引用問(wèn)題。==

附上一張層級(jí)示意圖：

感謝我們公司的UI朋友，設(shè)計(jì)上的強(qiáng)迫癥要趕上我代碼上的強(qiáng)迫癥了。

CocoaPods:

pod 'ZYThumbnailTableView', '~> 0.2.1'

Relation:

@liuzhiyi1992 on Github

License:

ZYThumbnailTableView is released under the MIT license. See LICENSE for details.

輪子不一定適合所有人，但是希望分享造輪子上螺絲的過(guò)程，和扳手螺絲刀的更多使用技巧，毫無(wú)保留，全在代碼里了。交流，快樂(lè)！
Demo & 源代碼

有什么問(wèn)題可以在github中提交issues交流，謝謝