ZYThumbnailTableView---堪比一个小型阅读App

Demo github地址: https://github.com/liuzhiyi1992/ZYThumbnailTableView

原文地址:http://zyden.vicp.cc/zythumbnailtableview/

欢迎转载,请注明出处,谢谢

后期会更新oc版本

可展开型预览TableView,开放接口,完全自由定制

虽然最近很忙,天天被html+css虐待,但是在许多朋友的压力下,最近还是抽空完成了一个新轮子ZYThumbnailTableView。以下严格按照小学语文老师教的方式排版:

Summary:

tableView的皮肤,类似一个小型app的强大交互心脏,四肢高度解耦高度自由定制,每个cell其实都是一个业务的缩略view,原谅我语文不太好不懂表达,这样的缩略view下文就叫做thumbnailView,可以根据上下手势展开更多的功能视图块,这些视图块已经开放了接口,支持使用者自己diy提供创建,同时接口中带的参数基本满足使用者需要的交互,当然tableviewCell也是完全自由diy的,规矩,先上效果图。

  • 工作特点:tableViewCell充当一个缩略内容的容器,初始内容展示局限于cellHeight,当cell被点击后,根据缩略view内容重新计算出完整的高度,装入另外一个容器中完整展示出来,并且可以上下拖拽扩展出上下功能视图。
  • 自由定制:看见的除了功能以外,全部视图都开放接口灵活Diy,tableViewCell,头部扩展视图(topView),底部扩展视图(bottomView)都是自己提供。
  • 使用简单:只需要把自己的tableViewCell,topView,bottomView配置给ZYThumbnailTableViewController对象。

profile(可略过):

Block:

- ConfigureTableViewCellBlock = () -> UITableViewCell?

- UpdateTableViewCellBlock = (cell: UITableViewCell, -indexPath: NSIndexPath) -> Void

- CreateTopExpansionViewBlock = (indexPath: NSIndexPath) -> UIView

- CreateBottomExpansionViewBlock = () -> UIView

Define:

- NOTIFY_NAME_DISMISS_PREVIEW

通知名(让展现出来的thumbnailView消失)

- MARGIN_KEYBOARD_ADAPTATION

自动处理键盘遮挡输入控件后,键盘与输入控件保持的间距(自动处理键盘遮挡事件使用ZYKeyboardUtil实现

- TYPE_EXPANSION_VIEW_TOP

处理展开抖动事件时,顶部扩展控件的标识

- TYPE_EXPANSION_VIEW_BOTTOM

处理展开抖动事件时,底部扩展控件的标识

Property:

开放:

- tableViewCellHeight

- tableViewDataList

- tableViewCellReuseId

- tableViewBackgroudColor

- keyboardAdaptiveView 你自定义控件里如果有希望不被键盘遮挡的输入控件,赋值给他,会帮你==自动处理遮盖事件==

私有:

- mainTableView

- clickIndexPathRow 记录被点击cell的indexPath row

- spreadCellHeight 存储thumbnailCell展开后的真实高度

- cellDictionary 存储所有存活中的cell

- thumbnailView 缩略view

- thumbnailViewCanPan 控制缩略view展开(扩展topView&buttomView)手势是否工作

- animator UI物理引擎控制者

- expandAmplitude view展开时抖动动作的振幅

- keyboardUtil 自动处理键盘遮挡事件工具对象ZYKeyboardUtil

Delegate func:

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

对外会用到的func:

- dismissPreview()

让thumbnailView消失,在TopView,BottomView等没有zyThumbnailTableView对象的地方可以使用通知NOTIFY_NAME_DISMISS_PREVIEW

- reloadMainTableView()

重新加载tableView

Usage:

——结合Demo介绍使用方法:

创建ZYThumbnailTableViewController对象:

zyThumbnailTableVC = ZYThumbnailTableViewController()

配置tableViewCell必须的参数:cell高,cell的重用标志符,tableView的数据源等

zyThumbnailTableVC.tableViewCellReuseId = "DIYTableViewCell"
zyThumbnailTableVC.tableViewCellHeight = 100.0
//当然cell高可以在任何时候动态配置
zyThumbnailTableVC.tableViewDataList = dataList
zyThumbnailTableVC.tableViewBackgroudColor = UIColor.whiteColor()
//背景颜色可不设置,默认为白色

接下来给ZYTableView配置你自己的tableViewCell,当然除了createCell外还可以在里面进行其他额外的操作,不过这个Block只会在需要生成cell的时候被调用,而重用cell并不会

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

配置cell的update方法,tableView配置每个cell必经之处,除了updateCell可以添加额外的操作。这里要注意updateCell的时候建议尽量使用zyThumbnailTableVC对象里的数据源datalist,同时要注意时刻保证VC对象里的数据源为最新,接口回调更改数据源时不要忘了对zyThumbnailTableVC.tableViewDataList的更新。

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

配置你自己的顶部扩展视图 & 底部扩展视图(expansionView)

- 两个Block均提供indexPath参数,只是因为我的BottomView的业务暂时不需要识别对应的是哪个cell,所以使用时把参数省略掉了。

- 这里还有一个对zyThumbnailTableVC.keyboardAdaptiveView的赋值,是因为我的BottomView中包含有TextField,正如上文所说,ZYKeyboardUtil会自动帮我处理键盘遮挡事件。(==注意==:赋值给keyboardAdaptiveView的和我往Block里送的是同一个对象)

//--------insert your diy TopView
zyThumbnailTableVC.createTopExpansionViewBlock = { [weak self](indexPath: NSIndexPath) -> UIView in
    //Post是我的数据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
}

结合ZYKeyboardUtil工作的效果:

就这样,属于你自己的thumbnailtableView就完成了。展开,关闭,基本功能上都能使用,但是如果在topView,bottomView中有什么交互功能之类的,就要在自己的头部尾部扩展控件和自定义的tableViewCell里面完成了,ZYThumbnailTableView提供cell的indexPath贯通三者通讯交流。

回看下Demo中的交互是怎样利用indexPath的:

  • 标记为已读后,小圆点会消失
  • 标识为喜欢后,会在对应的cell旁边出现一个星星

createView的时候我将从createTopExpansionViewBlock参数中得到的indexPath储存在我的topView对象中,当favorite按钮被点击时就可以indexPath为凭据利用代理改变对应数据源里的对应状态,同时在下次createView时根据indexPath取得对应的数据源来显示。如果这些交互会更新一些与cell相关的数据,还可以在代理方法中调用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是我的数据model
    let post = zyThumbnailTableVC.tableViewDataList[indexPath.row] as! Post
    post.favorite = !post.favorite
    zyThumbnailTableVC.reloadMainTableView()
}

还有对于导航条样式处理的话,Demo中直接在外面对zyThumbnailTableView对象的navigationItem做处理,亦或者可以在我的源代码中让ZYThumbnailTabelViewController继承你封装过导航栏样式的父类。

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接触,还是那一句,注意循环引用问题。==

附上一张层级示意图:

感谢我们公司的UI朋友,设计上的强迫症要赶上我代码上的强迫症了。

CocoaPods:

pod ‘ZYThumbnailTableView‘, ‘~> 0.2.1‘

Relation:

@liuzhiyi1992 on Github

License:

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

轮子不一定适合所有人,但是希望分享造轮子上螺丝的过程,和扳手螺丝刀的更多使用技巧,毫无保留,全在代码里了。交流,快乐!

Demo & 源代码

有什么问题可以在github中提交issues交流,谢谢

时间: 2024-10-11 12:11:54

ZYThumbnailTableView---堪比一个小型阅读App的相关文章

[ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP

前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 项目介绍 本项目基于移动跨平台开发框架 Ionic 开发,主要包含健康.医疗.生活.农业.和用户五大模块,以下是功能架构图. 目录 第1讲 前言,技术储备,环境搭建,常用命令 第2讲 新建项目,架构页面,配置app.js和controllers.js 第3讲 使用Tabs和SlideBox实现左右滑动菜单 第4讲 第4讲 通过Service层获取新

【RecyclerView与Glide】实现一个Android电子书阅读APP

http://www.cnblogs.com/xfangs/ 欢迎在本文下方评论,小方很需要鼓励支持!!! 本系列教程仅供学习交流 小说阅读器最终实现效果见 第一篇博文 前言 在上一篇文章中,我们实现了ViewPager的基本功能,按照计划,制作咱们的电子书阅读app需要使用ViewPager插入两页视图,一个用来显示当前书架,一个用来展示不同的分类.这一节,我们将在被标记为find的页面上实现分类选项. 涉及组件或框架:RecyclerView.Glide 首先·布局 同样的,在这里,小方因为

创建一个成功的App前要考虑的5个要点

在智能机时代,相比浏览网页而言,人们一般更喜欢喜欢使用手机应用.这种趋势就导致了成千上万的APP在Google Play 和 Apple Store 平台的诞生.有一些企业想要通过创建APP去提升他们的业务,其他人比如兄弟连学编程的学员也想要通过创建APP去获得收益. 移动应用的热潮激发人们都想要去开发一个自己的APP.你是不是也是其中一员呢? 你是不是想要创建一个APP但是却又不知道如何开始呢?如果是,兄弟连的小编整理的这篇文章可以指导你创建一个APP的流程. 1. 计划阶段 开始构建应用程序

分分钟教你做出自己的新闻阅读APP

分分钟教你做出自己的新闻阅读APP 引子 曾经不小心发现了一些好的看新闻的网站,但是电脑又不是随身携带,因此想要下载一个这个网站的手机APP来看新闻,但是问题来了,这个网站根本没有做Android端!你说用手机浏览器来看?天,有些网站用手机浏览器来看又会出现好些个问题,比如说:广告太多,还有那令人厌恶的弹窗,更有些排版简直让人不忍直视有木有.因此,我萌生出一个自己打造一个新闻阅读器的APP的想法,毕竟以前也玩过Android的开发,虽然是菜鸟级别的,但是做出一个手机新闻阅读APP还是难不倒我的~

如何做一个小型公司的技术总监

本文在腾讯内部论坛被浏览达7347次,收藏615次,评论几百条,曾经是讨论最热烈的项目管理文章之一.作为作者本身,感觉这个话题可以讨论的范围非常大,希望能有更多朋友一起切磋探索技术团队的管理之道. 资深程序员是团队中最强大的生产力,但往往被不合理的工作安排浪费掉.因此作为一个团队的技术的"头",必须要有明确清晰的认识,把主要的事务性工作剥离出来.并且放弃大量的管理"权力",以提高团队开发质量和效率为最主要的目标去安排自己的工作.一般来说技术总监其实会被要求做事实上是

android五子棋游戏、资讯阅读、大学课程表、地图拖拽检测、小说搜索阅读app等源码

Android精选源码 Android 自动生成添加控件 android旋转动画.圆形进度条组合效果源码 一款很强的手机五子棋app源码 android地图拖拽区域检测效果源码 实现Android大学课表效果APP源码 android完全免费的小说搜索阅读app 一个互联网资讯阅读平台和良好的阅读体验的App Android优质博客 Android中高效的显示图片Bitmap的内存模型 相对于文字来说,图片的表达更直接.更有冲击力.更容易吸引用户的眼球.设计师们也理所当然的喜欢用图片来传达信息.

从无到有写一个运维APP(三)完结篇

前言:自己的挖的坑还得填,此篇为完结篇,环境的搭建参考第一篇从无到有写一个运维APP(一),至于第二篇就跳过吧,写个APP没那么复杂.由于自己现在无业游民,所以没有什么现成的环境,环境就随便找个公网的..再者当下的完成度应该算不上一个完整的APP,但是作为参考,依瓢画葫芦绝对足够了,如果等完整产品,可能得等一段时间了,下面的是该项目的地址. 项目地址: https://github.com/youerning/MyApp(star一下呗) 效果图如下 文章目录: 准备工作 代理 页面框架 获取数

使用PhoneGap搭建一个山寨京东APP

为什么要写一个App 首先解释下写出来的这个App,其实无任何功能,只是用HTML和CSS模仿JD移动端界面写的一个适配移动端的Web界面.本篇主要内容是介绍如何使用PhoneGap把开发出来的mobile web app快速打包成Native App.最近还在学习HTML&CSS以及Javascript,偶然想想学这些有什么用,一方面可以做Web系统的前端开发,另一方面也可以做移动端的Web App.刚好最近了解到PhoneGap,研究了一下它的框架平台,花了两个晚上终于把一个web系统变成了

如何自己构建一个小型的Zoomeye----从技术细节探讨到实现

 0.概述 Zoomeye是个网络空间的搜索引擎,它不同于传统意义上的搜索引擎,而是一种可以搜索网络组件和网络设备的搜索引擎. 这种以各大组件指纹作为识别基础的数据平台,更多的是为了使得安全研究人员更好地评估漏洞的影响范围与其中隐含的数据模式. 1.架构分析 这是从网上搜索到的一张Zoomeye的后端架构图,主要分为调度框架.ES存储.UI呈现等模块.对于一次漏洞的评估,启动调度框架分配域名或者IP列表给扫描节点,节点完成任务后执行回调,做出自动化的效果其实也不是很难,从网上找个开源消息队列