Abgerundete Ecken auf benutzerdefiniertem UITableViewCell-Bild

Question

Ich versuche, einen Radius auf die Ecke der Bilder anzuwenden, die in einer Tabelle angezeigt werden, damit sie wie ein Kreis aussehen. Das Problem ist, dass die Bilder per Autolayout lokalisiert werden, so dass die endgültige Größe nicht berechnet wird, bis die Ansicht das Layout aller Unteransichten hat und ich danach die Kreismaske codieren muss.

Die Lösung, die zu mir kam, war es, den Code innerhalb der Methode Tableview (... willDisplayCell ...) oder innerhalb der Methoden didMoveToSuperview() und layoutSubviews() auf der benutzerdefinierten UITableViewCell Unterklasse zu schreiben. Ich habe diese Lösung in einigen Fragen dieses Forums gesehen, aber keiner von ihnen arbeitet.

Hier ist der Code mit einem dieser Methoden kommentiert:

import UIKit 

struct Contact { 
    var name: String 
    var image: UIImage 
} 

class ActiveChatsController: UITableViewController { 

    let contacts = [ 
     Contact(name: "Alex", image: UIImage(named: "Alex")!), 
     Contact(name: "Puto Albert", image: UIImage(named: "Albert")!), 
     Contact(name: "Golfo-man", image: UIImage(named: "Pablo")!) 
    ] 

    override func viewDidLoad() { 
     self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: AppDesign.color(withIntensity: 6)] 
    } 

    override func numberOfSections(in tableView: UITableView) -> Int { 
     return 1 
    } 

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

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
     let cell = Bundle.main.loadNibNamed("OpenedChatCell", owner: self, options: nil)?.first as! OpenedChatCell 
     cell.contactImage.image = contacts[indexPath.row].image 
     cell.contactName.text = contacts[indexPath.row].name 

     return cell 
    } 

} 

und die benutzerdefinierten Zelle Unterklasse wird aus einer XIB-Datei bekommt:

import UIKit 

class OpenedChatCell: UITableViewCell { 

    @IBOutlet weak var contactImage: UIImageView! 
    @IBOutlet weak var contactName: UILabel! 

    /* 
    override func didMoveToSuperview() { 
     self.contactImage.layer.cornerRadius = self.contactImage.frame.width/2 
     self.contactImage.clipsToBounds = true 
    } 
    */ 

} 

Wenn ich diese Codes auf dem Simulator laufen, ich bekomme diese:

Aber wenn ich löschen th e Kommentare auf der didMoveToSuperview() -Methode und lassen Sie es, den Radius ich das bekommen ändern:

Danach schrieb ich in didMoveToSuperview():

print(self.contactImage.frame.height) 

Und es zeigt eine Höhe von 177.0, so weiß ich nicht, wo der Fehler sein kann.

override func layoutSubviews() { 
super.layoutSubviews() 
self.contactImage.layer.cornerRadius = self.contactImage.frame.width/2 
self.contactImage.clipsToBounds = true 
} 

Answer 1

Try layoutSubviews statt didMoveToSuperview ovveride. Es kann

import UIKit 

class OpenedChatCell: UITableViewCell { 

@IBOutlet weak var contactImage: UIImageView! 
@IBOutlet weak var contactName: UILabel!  

    override func awakeFromNib() { 
    super.awakeFromNib() 
    // Initialization code 
    setRoundedView(roundedView: customImageView) 
    } 

func setRoundedView (roundedView:UIView) { 
    let saveCenter = roundedView.center 
    let newFrame:CGRect = CGRect(origin: CGPoint(x: roundedView.frame.origin.x,y :roundedView.frame.origin.y), size: CGSize(width: roundedView.frame.size.width, height: roundedView.frame.size.height)) 
    roundedView.layer.cornerRadius = roundedView.frame.height/2 
    roundedView.frame = newFrame; 
    roundedView.center = saveCenter 
    roundedView.clipsToBounds = true 
    } 
} 

Answer 2

dies ausprobieren:

Answer 3

Das Problem könnte sein, dass die Arbeit Tabellenansicht selbst früh, des Rahmens der Bildansicht vor der endgültigen Einstellung erstellt werden. So sind alle Ihre Versuche, die abgerundeten Ecken zu setzen, auch zu früh geschehen, weil sie alle von der anfänglichen Bildung der Tabellenansicht abhängen.

Die Lösung, in diesem Fall würde wie folgt aussehen:

var didLayout = false 
override func viewDidLayoutSubviews() { 
    if !self.didLayout { 
     self.didLayout = true // only need to do this once 
     self.tableView.reloadData() 
    } 
} 

Wenn Sie Ihren Code in dieses Delegatmethode verschoben haben:

func tableView(UITableView, willDisplay cell: UITableViewCell, 
    forRowAt indexPath: IndexPath) 

... das Verfahren läuft nun wieder für alle Zellen der Tabelle, und die Bildansicht Frame wird korrekt sein und die abgerundeten Ecken werden korrekt herauskommen.