Custom table view row action (image)

paro picture paro · Aug 25, 2015 · Viewed 8.5k times · Source

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

Answer

vikingosegundo picture vikingosegundo · Aug 25, 2015

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.