SwipeableMenu works well for both UITableViewCell and UICollectionViewCell, implemented in Swift.*
A swipeable Menu has below mentioned features:
- Left and right swipe actions
- Menu Action button with: image only*
- Menu Style: Horizontal, Square and Vertical
- Animated expansion from left, right, top and bottom
- Custom Menu: Alignment, Menu Style and direction
- Custom Menu Items: title text and Image
I have used many menus for a tableviewcell and collectionviewcell but WBSwipeableCell is used where we have lengthy number of menu items and needs to display in one view.
The transition style describes how the action buttons are exposed during the swipe.
| Horizontal Layout | Square Layout | Vertical Layout |
|---|---|---|
 |
 |
 |
For Horizontal menu layout, we need to implement one optional delegate method of MenuViewDelegate protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .horizontal
}For Vertical menu layout, we need to implement one optional delegate method of MenuViewDelegate protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .vertical
}For Square menu layout, we need to implement one optional delegate method of MenuViewDelegate protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .square
}The expansion style describes the behavior when we call the open and close function of Menu View.
| Left | Right | Top | Bottom |
|---|---|---|---|
 |
|
 |
 |
Expansion from the left side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .left
}Expansion from the right side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .right
}Expansion from the top side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}Expansion from the bottom side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .bottom
}- If we want to show/hide icon, we need to implement below mentiond protocol method. It will show/hide based on the method return type value.
func menuView(_ menuview: MenuView, showMenuIconForRowAtIndexPath indexPath: IndexPath) -> Bool {
return true
}- Below mentioned protocol method controls the position of the menu icon that will be left, right, top, bottom.
func menuView(_ menuview: MenuView, positionOfMenuIconForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}we can customize menu View with the below mentioned functions.
let menu = MenuView(mCell: cell, items: [], indexPath: indexPath)
menu.setMenuContentAlignment(.center)
menu.setBgColor(UIColor(red: 90.0/255.0, green: 200.0/255.0, blue: 250.0/255.0, alpha: 1.0))
menu.setMenuItemSpacingVertical(5.0)
menu.setMenuItemSpacingHorizontal(15.0)
menu.setMenuContentInset(10, left: 10, bottom: 10, right: -10)we can customize each menu item with the below mentioned functions.
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
}
firstItem.itemBorderColor = UIColor.white
firstItem.itemBorderWidth = 2.0
firstItem.itemIconSize = CGSize(width: 50, height: 30)
firstItem.titleColor = UIColor.gray
firstItem.titleFont = UIFont.systemFont(ofSize: 11.0)
firstItem.backgroundColor = UIColor.blue- Swift 4.0
- Xcode 9+
- iOS 9.0+
CocoaPods (recommended)
use_frameworks!
# Latest release in CocoaPods
pod 'WBSwipeableCell'You need to add below mentioned code in cellForRowAt for UITableView or cellForItemAt for UICollectionView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
// Menu Item click Handler
}
let secondItem = MenuItem(title: "Submit", icon: "save"){ (item) in
// Menu Item click Handler
}
let thirdItem = MenuItem(title: "Save", icon: "submit"){ (item) in
// Menu Item click Handler
}
let fourthItem = MenuItem(title: "Edit", icon: "edit"){ (item) in
// Menu Item click Handler
}
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
let menu = MenuView(mCell: cell, items: [firstItem, secondItem, thirdItem, fourthItem], indexPath: indexPath)
menu.delegate = self
return cell
}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
// Menu Item click Handler
}
let secondItem = MenuItem(title: "Submit", icon: "save"){ (item) in
// Menu Item click Handler
}
let thirdItem = MenuItem(title: "Save", icon: "submit"){ (item) in
// Menu Item click Handler
}
let fourthItem = MenuItem(title: "Edit", icon: "edit"){ (item) in
// Menu Item click Handler
}
let menu = MenuView(mCell: cell, items: [firstItem, secondItem, thirdItem, fourthItem], indexPath: indexPath)
menu.delegate = self
return cell
}Adopt the MenuViewDelegate protocol:
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .bottom
}
func menuView(_ menuview: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .horizontal
}
func menuView(_ menuview: MenuView, showMenuIconForRowAtIndexPath indexPath: IndexPath) -> Bool {
return true
}
func menuView(_ menuview: MenuView, positionOfMenuIconForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}mwaqasbhati, m.waqas.bhati@hotmail.com
WBSwipeableCell is available under the MIT license. See the LICENSE file for more info.