Customize Image View in Custom Tableview

[brian_brinker]

Problem. Can’t figure out how to corner radius my images in my custom TableView Controller. First is the original code:

import UIKit
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{
@IBOutlet weak var table:UITableView!

struct Beer {
    let title: String
    let imageName: String
}

//Enter cell lines here for new beers
let data: [Beer] = [
    Beer(title: "Helles Half Life", imageName: "HellesHalfLife"),
    Beer(title: "Racemic Red Ale", imageName: "RedAle"),
    Beer(title: "RSIPA", imageName: "RSIPA"),
    Beer(title: "Stage II HAC", imageName: "HellesHalfLife"),
    Beer(title: "Helleva Stage II Lager", imageName: "HellevaStageII"),
    Beer(title: "Train of Four Stout", imageName: "TrainOfFour"),
    Beer(title: "Patrick's Feeling Hazy", imageName: "PatricksFeelingHazy"),
    Beer(title: "BIS 40", imageName: "BIS40"),
    Beer(title: "40 Winks", imageName: "FortyWinks"),
    Beer(title: "", imageName: ""),
]

override func viewDidLoad() {
    super.viewDidLoad()
    table.dataSource = self
    table.delegate = self
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let Beer = data[indexPath.row]
    let cell = table.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
    cell.label.text = Beer.title
    cell.iconImageView.image = UIImage(named: Beer.imageName)
    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) ->
CGFloat{
return 120
    }

}

Now this is what I “thought” I had to do…someone able to help?
import UIKit
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{
@IBOutlet weak var table:UITableView!

struct Beer {
    let title: String
    let imageName: String
}

//Enter cell lines here for new beers
let data: [Beer] = [
    Beer(title: "Helles Half Life", imageName: "HellesHalfLife"),
    Beer(title: "Racemic Red Ale", imageName: "RedAle"),
    Beer(title: "RSIPA", imageName: "RSIPA"),
    Beer(title: "Stage II HAC", imageName: "HellesHalfLife"),
    Beer(title: "Helleva Stage II Lager", imageName: "HellevaStageII"),
    Beer(title: "Train of Four Stout", imageName: "TrainOfFour"),
    Beer(title: "Patrick's Feeling Hazy", imageName: "PatricksFeelingHazy"),
    Beer(title: "BIS 40", imageName: "BIS40"),
    Beer(title: "40 Winks", imageName: "FortyWinks"),
    Beer(title: "", imageName: ""),
]

override func viewDidLoad() {
    super.viewDidLoad()
    table.dataSource = self
    table.delegate = self
    *table.layer.cornerRadius = 20*
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let Beer = data[indexPath.row]
    let cell = table.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
    cell.label.text = Beer.title
    cell.iconImageView.image = UIImage(named: Beer.imageName)
    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) ->
CGFloat{
return 120
    }

}

[Chris_Parker]

@brian_brinker

Hey Brian,

Can you share your entire project so that we can debug it without having to try and create a test project with a storyboard and link it all together. It will make it much quicker for us to help you.

Can you compress the entire project into a zip file and post that to either Dropbox or Google Drive. Then create a share link and post that link in a reply.

If you choose to use Google Drive then when you create the Share link, ensure that the “General Access” option is set to “Anyone with the Link” rather than “Restricted”.

[Chris_Parker]

@brian_brinker

In your TableViewCell swift file if you add the following in the function setSelected()

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

        // Configure the view for the selected state
        iconImageView.layer.borderColor = UIColor.black.cgColor
        iconImageView.layer.borderWidth = 1
        iconImageView.layer.cornerRadius = 10
    }

That will give you a border outline of black with the line width of 1 point and also a cornerRadius of 10 points.

If you wanted a backgroundColor of, say, light gray then you could do this instead which probably does not look quite so good.

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

        // Configure the view for the selected state
        iconImageView.layer.backgroundColor = UIColor.lightGray.cgColor
        iconImageView.layer.cornerRadius = 10
    }

Mess around with the layer settings yourself until you get what you want. It really depends on what your images look like and what looks good.

[brian_brinker]

I ended up having to post inside "CellForRowAt with…

cell.yourImageViewContainerView.layer.cornerRadius = 10.0
cell.yourImageView.clipsToBounds = true