Coder Social home page Coder Social logo

cararila / sctableviewcell Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sergiochan/sctableviewcell

0.0 1.0 0.0 3.32 MB

Swipe-to-Delete Effects like iOS Native Mail App。一个模仿iOS8中的邮箱里面的cell删除动效以及滑动右侧菜单按钮效果的开源库

License: MIT License

Objective-C 100.00%

sctableviewcell's Introduction

SCTableViewCell

Swipe-to-Delete Effects like iOS Native Mail App

效果 Visual Effects

这是一个模仿iOS8中的邮箱里面的cell删除动效以及滑动右侧菜单按钮效果的开源库。

This is a custom table view cell from iOS Native Mail App, including the special Swipe-to-Delete Effects and Swipe-to-Show menu.

图片高能

版本 Version

目前还在原型版本

Still prototype

V0.2

说明 Introduction

由于iOS 8 提供了- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath 这个API,因此例如微信和QQ的滑动菜单都是用系统自带的效果实现的,这个实现出来的效果和邮箱的有一些不一样,除了按钮在出现的动画上的区别,还有删除的交互和动效。我也比较欣赏苹果自己设计的这套交互,使用起来十分的爽,因此尝试着模仿实现了一下。

使用 How to use

继承SCTableViewCell,根据和系统类似的委托方法来控制编辑菜单和事件。在你的TableView中初始化你的cell:

cell = [[SCTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuseIdentifier" inTableView:self.tableView withSCStyle:SCTableViewCellStyleRight];
cell.delegate = self;

你需要在你的tableViewController中声明遵循SCTableViewCellDelegate,并且实现几个委托方法:

/**
 *  获取每一行cell对应的编辑样式
 *
 *  @param tableView 父级tableview
 *  @param indexPath 索引
 *
 *  @return
 */
- (SCTableViewCellStyle)SCTableView:(UITableView *)tableView editStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  获取每一行cell对应的按钮集合的委托方法,在layoutsubview的时候调用
 *
 *  @param tableView 父级tableview
 *  @param indexPath 索引
 *
 *  @return SCTableViewCellRowActionButton的数组
 */
- (NSArray *)SCTableView:(UITableView *)tableView rightEditActionsForRowAtIndexPath:(NSIndexPath *)indexPath;
- (NSArray *)SCTableView:(UITableView *)tableView leftEditActionsForRowAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  每一行cell的动作触发回调
 *
 *  @param tableView 父级tableview
 *  @param index     动作index
 *  @param indexPath 索引
 */
- (void)SCTableView:(UITableView *)tableView commitActionIndex:(NSInteger)index forIndexPath:(NSIndexPath *)indexPath;

其中定义了四种cell的编辑样式:

typedef NS_ENUM(NSInteger, SCTableViewCellStyle) {
    SCTableViewCellStyleDefault = 0,    // default table view cell style, just like UITableViewCell
    SCTableViewCellStyleRight,  // table view cell with right button menu
    SCTableViewCellStyleLeft,   // table view cell with left button menu
    SCTableViewCellStyleBoth    // table view cell with both side button menu
};

样式 Style

SCTableViewCellStyleDefault是和其他的cell没有区别的cell,不会触发菜单的动画,你也可以自己定义cell上的手势操作,这个库不会做其他操作。SCTableViewCellStyleRightSCTableViewCellStyleLeft就代表着只开放右侧或左侧滑动菜单,在邮箱中你也可以看到不管是左侧还是右侧你都能滑出一个自定义的菜单,如果你想要实现左右都能滑出菜单,则使用SCTableViewCellStyleBoth

目前只实现了SCTableViewCellStyleRight。(2015-09-21)

样式需要在 - (SCTableViewCellStyle)SCTableView:(UITableView *)tableView editStyleForRowAtIndexPath:(NSIndexPath *)indexPath;这个委托方法中为每一行来指定。SCTableViewCell会在每次layout的时候调用这个委托来获取当前行的样式。

定义菜单结构 Custom your menu buttons

菜单的结构则是在- (NSArray *)SCTableView:(UITableView *)tableView rightEditActionsForRowAtIndexPath:(NSIndexPath *)indexPath;- (NSArray *)SCTableView:(UITableView *)tableView leftEditActionsForRowAtIndexPath:(NSIndexPath *)indexPath;这两个委托方法中定义,现在是返回一个UIButton的数组即可,之后会做一个ActionButton的基类,名字叫做SCTableViewCellRowActionButton。具体定义方法可以参考demo。

操作的回调 Action Callback

获取菜单操作的委托方法是- (void)SCTableView:(UITableView *)tableView commitActionIndex:(NSInteger)index forIndexPath:(NSIndexPath *)indexPath;,滑动到底会触发actions中的最后一个UIButton的事件。记住你在定义菜单结构的时候,你数组中的button顺序就是在界面上呈现出来的顺序。

证书 License

MIT LICENSE

sctableviewcell's People

Contributors

sergiochan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.