Images in a UIImageView do not display in a UITableView when a circular mask is applied to the ImageView, unless scrolling

Question

Thanks in advance for your help.

I have a UITableView in the main view of the contoller. In the prototype cell, I have a UIImageview. In the code below, everything works until I add 5 lines to apply the circular mask and border. Once I do this, the images will not load unless I scroll through the cells. The mask and border really apply perfectly. It will be great when it works ... but until then.

Of course, this has been seen before. I am a fast / objective-C newbie.

Work fast for this.

Code below;

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("mixerCell", forIndexPath: indexPath) as! MixerTableViewCell

    // set label background color to clear
    cell.textLabel?.backgroundColor = UIColor.clearColor()

    // set highlight selection to none
    cell.selectionStyle = .None

    // set image for cell
    let imageView = cell.viewWithTag(1) as! UIImageView

    // put circular mask and border. This is the problem code that causes initial load of the tableview images to show up blank.
    imageView.layer.cornerRadius = imageView.frame.size.width / 2;
    imageView.clipsToBounds = true;

    let color1 = UIColor(white: 1.0, alpha: 0.5).CGColor as CGColorRef
    imageView.layer.borderWidth = 2;
    imageView.layer.borderColor = color1

    // assign image
    imageView.image = UIImage(named: mixerSounds[indexPath.row])

    return cell
}

loading initial view

after scrolling

Answer 1

. Xcode-7. , Xcode-6.3 . Xcode-7., , heightforRowAtIndexpath , - .

Answer 2

,

// replace this
let imageView = cell.viewWithTag(1) as! UIImageView

// to

let imageView = cell.yourImageViewName 
/* yourImageViewName is the outlet 
reference name you have given in the 
MixerTableViewCell custom class.
*/

2: , hardcode , .

   imageView.image = UIImage(named: "first1.png")

Answer 3

override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell!
{
    let cellIdentifier = "cell"

    var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as UITableViewCell

    cell.image_View.image = UIImage(named: mixerSounds[indexPath.row])
    println("The loaded image: \(image)")
    cell.image_View.layer.masksToBounds = false
    cell.image_View.layer.borderColor = UIColor.blackColor().CGColor
    cell.image_View.layer.cornerRadius = image.frame.height/2
    cell.image_View.clipsToBounds = true
    return cell

}

imageview , - ,

Answer 4

, clipToBounds = true. UIImageView UITableViewCell

,

if (indexPath.row == indexPath.length && !isTableReloaded)
{
    let dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(0.000000001 * Double(NSEC_PER_SEC)))
    dispatch_after(dispatchTime, dispatch_get_main_queue(), {
            self.reloadTableView()
        })
}

func reloadTableView()
{
    isTableReloaded = true
    self.tableViewContacts.reloadData()
}

isTableReloaded - Bool var, false viewDidLoad() if cellForRowAtIndexPath, return

, , .

, , - .

Answer 5

Firstl: , , , cellForRowAtIndexPath , , , , , ( == ) let w = tableview.frame.width*(proportional value like 0.2)
imageView.layer.cornerRadius = w / 2
imageView.clipsToBounds = true;

Answer 6

let width = cell.frame.size.width
cell.img.layer.cornerRadius = width * 0.72 / 2

0.72 is the ratio of cell width to image width, for example. cellWidth = 125 and imageWidth = 90, so 125/90 will give 0.72. Make a similar calculation for your image.

Answer 7

Here's the perfect solution for circular imaging in UITableview Cell. Just change the UITableviewCell class (user cell) using the code below.

override func awakeFromNib() {
    super.awakeFromNib()
    imgEvent.layer.frame = (imgEvent.layer.frame).insetBy(dx: 0, dy: 0)
    imgEvent.layer.borderColor = UIColor.gray.cgColor
    imgEvent.layer.cornerRadius = (imgEvent.frame.height)/2
    imgEvent.layer.masksToBounds = false
    imgEvent.clipsToBounds = true
    imgEvent.layer.borderWidth = 0.5
    imgEvent.contentMode = UIViewContentMode.scaleAspectFill
  }

It will also help to solve the problem of a circular image only after scrolling through the table .. (if any!)