RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看105 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 105|回复: 1
收起左侧

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容

[复制链接]
SwiftRobot 发表于 2016-11-3 10:38:06 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 1

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 1





1、RHPreviewCell

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 12

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 12


I envied so much Spotify iOS app this great playlist preview cell

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 1

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 1
, I decided to create my own one

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 2

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 2
. Now you can give your users ability to quick check "what content is hidden under your UITableViewCell". Great think is that this Library not requires 3D Touch support from user device

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 3

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 3
.




2、Play with it

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 13

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 13


RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 2

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 2





3、Installation

You can install RHPreviewCell library using Cocoapods:

[Bash shell] 纯文本查看 复制代码
pod 'RHPreviewCell'


or you can simply copy RHPreviewCellSource folder to your project.




4、Usage

To fully integrate RHPreviewCell with your Table View you just need to use RHPreviewCell like normal UITableViewCell in terms of your TableView data source 'cellForRowAtIndexPath' method.

[Swift] 纯文本查看 复制代码
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    // Fetching already registered RHPreviewTableViewCell 
    let cell = tableView.dequeueReusableCellWithIdentifier(reuseCellIdentifier) as! RHPreviewTableViewCell 

    // Delegate using which, tiles will talk to your class
    cell.delegate = self 
    // Data source for feed small tiles [attach]36867[/attach]
    cell.dataSource = self

    return cell
}


RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 5

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 5
Important think is that your View Controller needs to comform to RHPreviewCellDataSource and RHPreviewCellDelegate protocols. In that way you will be able to provide all neccesary data for RHPreviewTalveViewCell tiles.



4.1、RHPreviewCellDataSource

[Swift] 纯文本查看 复制代码
func previewCellNumberOfTiles(cell: RHPreviewTableViewCell) -> Int
func previewCell(cell: RHPreviewTableViewCell, tileForIndex: Int) -> RHPreviewTileView




4.2、RHPreviewCellDelegate

func previewCell(cell: RHPreviewTableViewCell, didSelectTileAtIndex indexValue: RHTappedTileIndexValue)

And thats it!

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 6

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 6
You have already integrete Library with your Table View

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 7

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 7


RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 3

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:遵从简洁交互设计,通过遮罩层快速预览单元格内容 3





5、Implementation hint from me

[Q] How may look like tiles communiacation with my class

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 8

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 8

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 9

RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 - 敏捷大拇指 - RHPreviewCell:简洁交互设计,通过遮罩层快速预览单元格内容 9


As I said using RHPreviewCellDelegate . I will show you how to handle it for particular cell:

[Swift] 纯文本查看 复制代码
func previewCell(cell: RHPreviewTableViewCell, didSelectTileAtIndex indexValue: RHTappedTileIndexValue) {
    let cellIndex = tableView.indexPathForCell(cell)!.row

    switch indexValue {
    case .TileTapped(let index):
        print("[attach]36861[/attach] \(index) has been selected")
    case .FingerReleased:
        print("[attach]36860[/attach] Finger has been released (non of tiles has been tapped)")
    }
}


... as you can see delegate method as a argument takes RHTappedTileIndexValue , yup... it is swift enum using which you will gather information about tapped tile (.TileTapped(let index) ) or even whether user released his finger out of tiles area (.FingerReleased ).




6、Swift support

Library ver
Swift ver
1.0.0
2.3





7、Check the Demo project

Please check out the demo project, you can see there how Library has been implemented in details.

GitHub地址:
游客,如果您要查看本帖隐藏内容请回复



都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

apper 发表于 2016-11-3 14:44:16 | 显示全部楼层
App中什么时候需要预览?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表