Is there a way I can make the trailing Swipe Actions have rounded corners like in macOS 11.0?

user_10136624 0
Viewed 1174

The iOS application I am writing has a bubble like feel and I want to make it constant with the whole UI. The only thing that I am not able to get constant is the trailing swipe actions. macOS Big Sur has something like what I am trying to achieve (attached). I have tried customizing the buttons, but it does not seem to have the cornerRadius attribute other elements have (UIViews, Buttons, etc). I attached a code snippet of what I did.

Is there any way for me to accomplish such actions?

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath)
-> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: nil) { (_, _, completionHandler) in
        print("removed obj: \(self.setArr[indexPath.row])")

        self.setArr.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .fade)
        UserDefaults.standard.setValue(self.setArr, forKey: "sets")
        
        completionHandler(true)
    }
    deleteAction.image = UIImage(systemName: "trash")
    deleteAction.backgroundColor = .systemRed
    
    let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
    return configuration
}

What I am trying to accomplish:

What I am trying to accomplish

swift ios
2 Answers

Try using UICollectionViewCompositionalLayout with a sidebar appearance. (The other answer above is not correct.)

let layout = UICollectionViewCompositionalLayout() { sectionIndex, layoutEnvironment in
var configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
configuration.leadingSwipeActionsConfigurationProvider = { indexPath in
user_1448340

Step 1 : Add your custom view in cell and set its frame as outside the cell

deleteView.frame = CGRect(x: cell.width, y: 0, width: 50, height: 50) // Here you need to set delete view outside the cell frame

Step 2 : You need to add tap gesture to you cell. Here I'm using https://github.com/SwipeCellKit/SwipeCellKit 's delegate method for handling swipe animations.

//Here You can use your custom logic for cell gesture animation

var swipeIndex: Int = 0 // Here this is global variable

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> [SwipeAction]?
{
    if orientation == .right
    {
        if self.swipeIndex != indexPath.row
        {
            self.hideSwipeView(at: self.swipeIndex)
        }
        self.showSwipeView(at: indexPath.row)
    }
    else if orientation == .left
    {
        hideSwipeView(at: indexPath.row)
    }
    return nil
}

func hideSwipeView(at index:Int)
{
    if (index < yourArray.count)
    {
        let cell = tableView.cellForRow(at: IndexPath.init(row: index, section: 0)) as! DetailTVCell

        UIView.animate(withDuration: 0.1,
                       delay: 0,
                       options: [.curveEaseOut],
                       animations:
            {
                cell.viewCell.transform = CGAffineTransform(translationX: 0, y: 0) // Here viewCell is Main View inside Cell and all cell's content is inside viewCell
                cell.deleteView.transform = CGAffineTransform(translationX: 0, y: 0)
        }) { _ in
            cell.btnDelete.isHidden = true
        }
    }
}

func showSwipeView(at index:Int)
{
    let cell = tableView.cellForRow(at: IndexPath.init(row: index, section: 0)) as! DetailTVCell
    
    cell.btnDelete.isHidden = false
    
    UIView.animate(withDuration: 0.1,
                   delay: 0,
                   options: [.curveEaseOut],
                   animations:
        {
            cell.viewCell.transform = CGAffineTransform(translationX: -100, y: 0)
            cell.deleteView.transform = CGAffineTransform(translationX: -100, y: 0)
    }) { _ in
        self.swipeIndex = index
     }
   }
user_16797540
Related