You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

221 lines
10 KiB

5 years ago
  1. MGSwipeTableCell
  2. ================
  3. [![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)
  4. MGSwipeTableCell is an easy to use UITableViewCell subclass that allows to display swipeable buttons with a variety of transitions.
  5. This library is compatible with all the different ways to create a UITableViewCell: system predefined styles, programmatically created cells, cells loaded from a xib and prototype cells within a storyboard. You can use autolayout if you want.
  6. Works on iOS >= 5.0. Tested on all iOS versions on iPhone and iPad: iOS 7, iOS 8, iOS 9, iOS 10, iOS 11.
  7. ## Transitions demo
  8. ### Border transition
  9. <p align="center"><img src="https://raw.githubusercontent.com/MortimerGoro/MGSwipeTableCell/master/readme-assets/border.gif" /></p>
  10. ### Clip transition
  11. <p align="center"><img src="https://raw.githubusercontent.com/MortimerGoro/MGSwipeTableCell/master/readme-assets/clip.gif" /></p>
  12. ### 3D transition
  13. <p align="center"><img src="https://raw.githubusercontent.com/MortimerGoro/MGSwipeTableCell/master/readme-assets/3d.gif" /></p>
  14. ### Static transition
  15. <p align="center"><img src="https://raw.githubusercontent.com/MortimerGoro/MGSwipeTableCell/master/readme-assets/static.gif" /></p>
  16. ### Drag transition
  17. <p align="center"><img src="https://raw.githubusercontent.com/MortimerGoro/MGSwipeTableCell/master/readme-assets/drag.gif" /></p>
  18. ## API Reference
  19. See [`MGSwipeTableCell.h`](MGSwipeTableCell/MGSwipeTableCell.h) header file for a complete overview of the capabilities of the class.
  20. See [`MailAppDemo`](demo/MailAppDemo) for a complete project which mimics Apple's Mail App (written in Objective-C)
  21. See [`MailAppDemoSwift`](demo/MailAppDemoSwift) for a complete project which mimics Apple's Mail App (Written in Swift)
  22. See [`SpotifyDemo`](demo/SpotifyDemo) for a complete project which mimics Spotify App swipe style
  23. See [`MGSwipeDemo`](demo/MGSwipeDemo) for a complete project where you can test the variety of transitions on a real device/simulator.
  24. ##Setup your project
  25. You can use CocoaPods to include MGSwipeTableCell into you project:
  26. pod 'MGSwipeTableCell'
  27. You can use Carthage to include MGSwipeTableCell into your project. Just add this dependency to your Cartfile:
  28. github "MortimerGoro/MGSwipeTableCell"
  29. ## Usage
  30. ### Basic
  31. Integrating MGSwipeTableCell in your project is very easy. Basically, you only have to inherit from MGSwipeTableCell instead of UITableViewCell, or directly instantiate MGSwipeTableCell instances with iOS predefined cell styles. You can layout your cell content as you are used to do, MGSwipeTableCell doesn't force you to change layouts.
  32. Here is a example of a MGSwipeTableCell using iOS predefined styles. You can set an array of buttons to cell.leftButtons and/or cell.rightButtons properties. MGSwipeButton is a convenience class, you are not forced to use it. You can use your own UIButtons or UIViews. You can configure transitions (and swipe thresholds) with the leftSwipeSettings and/or rightSwipeSettings properties
  33. ##### Objective-C
  34. ```objc
  35. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  36. {
  37. static NSString * reuseIdentifier = @"programmaticCell";
  38. MGSwipeTableCell * cell = [self.tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
  39. if (!cell) {
  40. cell = [[MGSwipeTableCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];
  41. }
  42. cell.textLabel.text = @"Title";
  43. cell.detailTextLabel.text = @"Detail text";
  44. cell.delegate = self; //optional
  45. //configure left buttons
  46. cell.leftButtons = @[[MGSwipeButton buttonWithTitle:@"" icon:[UIImage imageNamed:@"check.png"] backgroundColor:[UIColor greenColor]],
  47. [MGSwipeButton buttonWithTitle:@"" icon:[UIImage imageNamed:@"fav.png"] backgroundColor:[UIColor blueColor]]];
  48. cell.leftSwipeSettings.transition = MGSwipeTransition3D;
  49. //configure right buttons
  50. cell.rightButtons = @[[MGSwipeButton buttonWithTitle:@"Delete" backgroundColor:[UIColor redColor]],
  51. [MGSwipeButton buttonWithTitle:@"More" backgroundColor:[UIColor lightGrayColor]]];
  52. cell.rightSwipeSettings.transition = MGSwipeTransition3D;
  53. return cell;
  54. }
  55. ```
  56. ##### Swift
  57. ```swift
  58. func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
  59. {
  60. let reuseIdentifier = "programmaticCell"
  61. var cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! MGSwipeTableCell
  62. cell.textLabel!.text = "Title"
  63. cell.detailTextLabel!.text = "Detail text"
  64. cell.delegate = self //optional
  65. //configure left buttons
  66. cell.leftButtons = [MGSwipeButton(title: "", icon: UIImage(named:"check.png"), backgroundColor: .green),
  67. MGSwipeButton(title: "", icon: UIImage(named:"fav.png"), backgroundColor: .blue)]
  68. cell.leftSwipeSettings.transition = .rotate3D
  69. //configure right buttons
  70. cell.rightButtons = [MGSwipeButton(title: "Delete", backgroundColor: .red),
  71. MGSwipeButton(title: "More",backgroundColor: .lightGray)]
  72. cell.rightSwipeSettings.transition = .rotate3D
  73. return cell
  74. }
  75. ```
  76. In order to listen for button click events you can implement the optional MGSwipeTableCellDelegate, or if you are too lazy to do that, the MGSwipeButton class comes with a convenience block callback ;)
  77. ##### Objective-c
  78. ```objc
  79. [MGSwipeButton buttonWithTitle:@"More" backgroundColor:[UIColor lightGrayColor] callback:^BOOL(MGSwipeTableCell *sender) {
  80. NSLog(@"Convenience callback for swipe buttons!");
  81. }]
  82. ```
  83. ##### Swift
  84. ```swift
  85. MGSwipeButton(title: "Delete", backgroundColor: .red) {
  86. (sender: MGSwipeTableCell!) -> Bool in
  87. print("Convenience callback for swipe buttons!")
  88. return true
  89. }
  90. ```
  91. ### Delegate
  92. MGSwipeTableCellDelegate is an optional delegate to configure swipe buttons or to receive triggered actions or another events. Buttons can be configured inline when the cell is created instead of using this delegate, but using the delegate improves memory usage since buttons are only created on demand.
  93. ```objc
  94. @protocol MGSwipeTableCellDelegate <NSObject>
  95. @optional
  96. /**
  97. * Delegate method to enable/disable swipe gestures
  98. * @return YES if swipe is allowed
  99. **/
  100. -(BOOL) swipeTableCell:(MGSwipeTableCell*) cell canSwipe:(MGSwipeDirection) direction;
  101. /**
  102. * Delegate method invoked when the current swipe state changes
  103. @param state the current Swipe State
  104. @param gestureIsActive YES if the user swipe gesture is active. No if the uses has already ended the gesture
  105. **/
  106. -(void) swipeTableCell:(MGSwipeTableCell*) cell didChangeSwipeState:(MGSwipeState) state gestureIsActive:(BOOL) gestureIsActive;
  107. /**
  108. * Called when the user clicks a swipe button or when a expandable button is automatically triggered
  109. * @return YES to autohide the current swipe buttons
  110. **/
  111. -(BOOL) swipeTableCell:(MGSwipeTableCell*) cell tappedButtonAtIndex:(NSInteger) index direction:(MGSwipeDirection)direction fromExpansion:(BOOL) fromExpansion;
  112. /**
  113. * Delegate method to setup the swipe buttons and swipe/expansion settings
  114. * Buttons can be any kind of UIView but it's recommended to use the convenience MGSwipeButton class
  115. * Setting up buttons with this delegate instead of using cell properties improves memory usage because buttons are only created in demand
  116. * @param swipeTableCell the UITableViewCell to configure. You can get the indexPath using [tableView indexPathForCell:cell]
  117. * @param direction The swipe direction (left to right or right to left)
  118. * @param swipeSettings instance to configure the swipe transition and setting (optional)
  119. * @param expansionSettings instance to configure button expansions (optional)
  120. * @return Buttons array
  121. **/
  122. -(NSArray*) swipeTableCell:(MGSwipeTableCell*) cell swipeButtonsForDirection:(MGSwipeDirection)direction
  123. swipeSettings:(MGSwipeSettings*) swipeSettings expansionSettings:(MGSwipeExpansionSettings*) expansionSettings;
  124. @end
  125. ```
  126. ### Expandable buttons
  127. Buttons are not expandable by default. You can set up expandable buttons using cell.leftExpansion and cell.rightExpansion properties
  128. Expandable button events are triggered automatically when the user ends the swipe gesture and the expansion is active (configurable via threshold value). Triggered expandable buttons can bounce back to their initial position or fill the entire UITableViewCell, you can select the desired animation using fillOnTrigger property.
  129. ```objc
  130. @interface MGSwipeExpansionSettings: NSObject
  131. /** index of the expandable button (in the left or right buttons arrays) */
  132. @property (nonatomic, assign) NSInteger buttonIndex;
  133. /** if true the button fills the cell on trigger, else it bounces back to its initial position */
  134. @property (nonatomic, assign) BOOL fillOnTrigger;
  135. /** Size proportional threshold to trigger the expansion button. Default value 1.5 */
  136. @property (nonatomic, assign) CGFloat threshold;
  137. @end
  138. ```
  139. ### Rounded corners and swipe buttons
  140. MGSwipeTableCell supports rounded corners. Example:
  141. ```objc
  142. cell.layer.cornerRadius = 50
  143. cell.backgroundColor = UIColor.gray
  144. cell.clipsToBounds = true
  145. cell.swipeBackgroundColor = UIColor.gray
  146. ```
  147. <p align="center"><img src="https://github.com/MortimerGoro/MGSwipeTableCell/blob/master/readme-assets/RoundTableViewCell.png" width="30%" /></p>
  148. ## License
  149. The MIT License (MIT)
  150. Copyright (c) 2014 Imanol Fernandez @MortimerGoro
  151. Permission is hereby granted, free of charge, to any person obtaining a copy
  152. of this software and associated documentation files (the "Software"), to deal
  153. in the Software without restriction, including without limitation the rights
  154. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  155. copies of the Software, and to permit persons to whom the Software is
  156. furnished to do so, subject to the following conditions:
  157. The above copyright notice and this permission notice shall be included in all
  158. copies or substantial portions of the Software.
  159. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  160. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  161. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  162. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  163. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  164. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  165. SOFTWARE.