Search code examples
iosswiftcocoa-touchuitableviewrowaction

Custom table view row action (image)


My app includes an UITableView. It's cells has the option to display more than one line. The cells has also a custom row action (image). I set the row action image like this:

let date = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "", handler: { (action, indexPath) -> Void in})    
date.backgroundColor = UIColor(patternImage: UIImage(named: "rowActionPic")!)

The image has has an 122x94 resolution. If the cell displays one line, all fits perfect. If the cell displays 2 or more lines, the image is going to be display 2 times. Is there an option to center the image?

Code in cellForRowAtIndexPath:

cell.textLabel?.numberOfLines = 0
let object = self.fetchedResultsController.objectAtIndexPath(indexPath) as! NSManagedObject
cell.textLabel?.text = object.valueForKey("name") as? String

Solution

  • naturally a pattern will be repeated to fill all space.

    The only way I could imaging is to increase height of the image to exceed the most probable maximum cell height.


    I used this code and an image with transparent background and height of 120px in which the icon occupies the first 44x44 px

    import UIKit
    
    class ViewController: UITableViewController {
        override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
            return 1
        }
    
        override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 30
        }
    
        override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell
            cell.textLabel?.text = "\(indexPath.row)"
            return cell
        }
    
        override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]? {
    
            let moreClosure = { (action: UITableViewRowAction!, indexPath: NSIndexPath!) -> Void in
                println("More closure called")
            }
    
            let moreAction = UITableViewRowAction(style: .Normal, title: "  ", handler: moreClosure)
    
            if let image = UIImage(named: "star.png"){
                moreAction.backgroundColor = UIColor(patternImage: image)
    
            }
            return [moreAction]
        }
    
    
        override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        }
    
    
        override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
                return  min((44.0 * CGFloat(indexPath.row) + 1), 120.0)
        }
    }
    

    result:

    enter image description here

    enter image description here

    With an image that has a opaque background it looks better.

    enter image description here


    visit GitHub for an example project.