user3746428
user3746428

Reputation: 11175

How to add image to table view cell based on user selection

Basically I have a table view controller that I am populating with transactions. The user can choose to enter either a payment or credit via a segmented control when they tap the add button.

I was trying to figure out how I can display an image of (for example) a green arrow for a credit, and a red arrow for a payment in each cell based on what the user selected? I am using Swift by the way.

This is how the cell currently looks. I would like the arrow to be just to the left of the 'Amount' label.

enter image description here

Any help would be greatly appreciated.

Here is the code that I currently have...

ThirdViewController:

var arrayObject = ArrayData()

class ThirdViewController: UITableViewController {

@IBAction func addNewPaymentButton(sender : AnyObject) {
    //Add code for adding a new payment here
}

override func viewWillAppear(animated: Bool) {
    self.tableView.reloadData()
}

override func viewDidLoad() {
    super.viewDidLoad()

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = false

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

// #pragma mark - Table view data source

override func numberOfSectionsInTableView(tableView: UITableView?) -> Int {
    // #warning Potentially incomplete method implementation.
    // Return the number of sections.
    return 1
}

override func tableView(tableView: UITableView?, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete method implementation.
    // Return the number of rows in the section.
    return arrayObject.paymentsArray().count
}


override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! {
    var cell:CustomTransactionTableViewCell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as CustomTransactionTableViewCell
    cell.paymentNameLabel.text = (arrayObject.paymentsArray().objectAtIndex(indexPath.row)) as String
    cell.costLabel.text = (arrayObject.costArray().objectAtIndex(indexPath.row)) as String
    cell.dateLabel.text = (arrayObject.dateArray().objectAtIndex(indexPath.row)) as String

    if transactionType == 0 {
        cell.paymentArrowImage.hidden = false
    } else if transactionType == 1 {
        cell.creditArrowImage.hidden = false
    }

    return cell
}

override func tableView(tableView: UITableView!, canEditRowAtIndexPath indexPath: NSIndexPath!) -> Bool {
    return true
}

override func tableView(tableView: UITableView!, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath!) {
    if (editingStyle == UITableViewCellEditingStyle.Delete) {
        //Add code for deletion
    }
}
}

This is the only relevant code for the FifthViewController:

        arrayDataPayments.addObject(transactionName)
    arrayDataCost.addObject("£\(finalUserBudget)")
    arrayDataDate.addObject(transactionDateInputted)

ArrayData

var arrayDataPayments: NSMutableArray = []
var arrayDataCost: NSMutableArray = []
var arrayDataDate: NSMutableArray = []

class ArrayData: NSObject {

func paymentsArray() -> NSMutableArray { return arrayDataPayments }

func costArray() -> NSMutableArray { return arrayDataCost }

func dateArray() -> NSMutableArray { return arrayDataDate }
}

CustomTransactionTableViewCell

class CustomTransactionTableViewCell: UITableViewCell {

    @IBOutlet var paymentNameLabel : UILabel
    @IBOutlet var dateLabel : UILabel
    @IBOutlet var costLabel : UILabel
    @IBOutlet var creditArrowImage: UIImageView
    @IBOutlet var paymentArrowImage: UIImageView

    init(style: UITableViewCellStyle, reuseIdentifier: String) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        // Initialization code
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Please excuse the global variables. They are only temporary.

Upvotes: 0

Views: 620

Answers (1)

matt
matt

Reputation: 535526

This is going to work exactly like everything else about a table view. There's going to be an image view in your cell. Whether an image is showing in that image view, and what image is showing, is going to have to be part of your model, so that the model takes care of knowing this information with respect to each row. Then in cellForRowAtIndexPath: you manifest that info from the model in the view, setting the image view's image in the cell for whatever row you are asked about.

Upvotes: 1

Related Questions