Rundes UIImage in einer TableViewCell

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Rundes UIImage in einer TableViewCell

    Hallo,

    ich bin neu hier und auch noch Anfänger was Swift Programmierung angeht. Mein Problem besteht aktuell darin das ich ein UIImage in einer TableViewCell habe und das Bild gerne komplett rund darstellen würde, was mir nicht wirklich gelingen möchte. Leider weiß ich nicht warum mein Code nicht funktionieren möchte und hoffe hier auf Hilfe zu stoßen :D

    Das ist der für das Problem relevante Code denke ich...


    Quellcode

    1. override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    2. // Wichtig um den Subtitle Style umzusetzen
    3. var cell = tableView.dequeueReusableCell(withIdentifier: "QuestionLine")
    4. cell = UITableViewCell(style: .subtitle, reuseIdentifier: "QuestionLine")
    5. // Eigenschaften der Zelle einstellen
    6. let user = users[indexPath.row]
    7. cell?.textLabel?.text = user.question
    8. cell?.detailTextLabel?.text = user.name
    9. let image = UIImage(named: "bild_user29Lifestyle")
    10. cell?.imageView?.image = image
    11. cell?.imageView?.layer.cornerRadius = (image?.size.width)! / 2
    12. return cell!
    13. }
    Alles anzeigen
    Was mache ich falsch ? ?(
  • Okay also ich hab das gerade mal eben ausprobiert in dem ich die Zeile hinzugefügt habe:


    Quellcode

    1. cell?.imageView?.clipsToBounds = true
    Vorher wurden die Bilder ganz normal eckig angezeigt. Jetzt wird gar kein Bild mehr angezeigt, sondern an der Stelle an der das Bild sein soll ist jetzt einfach nichts. Habe auch schon mal ein wenig recherchiert und bin da auf etwas mit layoutIfNeeded() gestoßen aber ich kann mir das leider nicht erklären.

    Zufällig ne Idee was das Problem ist und was man noch machen könnte ?
  • Hm, setzt Du clipsToBounds bevor Du das Image setzt?

    Führt

    Quellcode

    1. var cell = tableView.dequeueReusableCell(withIdentifier: "QuestionLine")
    2. cell = UITableViewCell(style: .subtitle, reuseIdentifier: "QuestionLine")
    nicht dazu, dass immer eine neue Zelle erzeugt wird, oder wird bei Swift die 2. Zeile nur ausgeführt, wenn cell = null ist? ?(
  • MCDan schrieb:

    Hm, setzt Du clipsToBounds bevor Du das Image setzt?

    Führt

    Quellcode

    1. var cell = tableView.dequeueReusableCell(withIdentifier: "QuestionLine")
    2. cell = UITableViewCell(style: .subtitle, reuseIdentifier: "QuestionLine")
    nicht dazu, dass immer eine neue Zelle erzeugt wird, oder wird bei Swift die 2. Zeile nur ausgeführt, wenn cell = null ist? ?(
    Nein ist eine ganz normale Zuweisung. Soviel Swift sollte man mittlerweile doch verstehen als iOS Dev ;)
  • Also egal an welche Stele ich clipstobounds setze, es hat immer den Effekt zur Folge das keine Bilder sichtbar sind. Vielleicht stimmt etwas nicht mit dem cornerRadius den ich setze ?

    UPDATE:
    Wenn ich bspw. bei cornerRadius 30 eingebe dann scheint es halbwegs zu funktionieren (clipstobounds ist dabei auch gesetzt). Das Bild ist dann kreisförmig aber nicht zu 100%. Oben und unten am Bild lassen sich dann bei genauerem hinsehen gerade Kanten erkennen. Gibts vielleicht ne gute Lösung dafür ? :)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von ThisIsBeat ()

  • Das Problem ist nur das es mir nicht möglich ist direkt auf die UIImageView zuzugreifen :/ Ich komme immer nur so weit

    Quellcode

    1. cell?.imageView?.layer.cornerRadius = UIImageView.frame.size
    ab size schmeißt er einen Fehler und sagt Value of type '(UIImageView) -> (CGRect) -> CGRect' has no member 'size'. Was auch verständlich ist, nur ich weiß nicht wie ich sonst darauf zugreifen kann :(
  • ja so ähnlich hab ich das bereits versucht

    Quellcode

    1. cell?.imageView?.layer.cornerRadius = (cell?.imageView?.frame.size.width)! / 2

    ich muss das ganze zwar in Klammern setzen aber das funktioniert so auch nicht. Die Bilder werden alle eckig anzeigt. An welcher Stelle könnte das Problem noch ausgelöst werden

    Nochmal ein kleines Update. So sieht das ganze aktuell aus:

    Quellcode

    1. override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    2. // Wichtig um den Subtitle Style umzusetzen
    3. var cell = tableView.dequeueReusableCell(withIdentifier: "QuestionLine")
    4. cell = UITableViewCell(style: .subtitle, reuseIdentifier: "QuestionLine")
    5. // Eigenschaften der Zelle einstellen
    6. let user = users[indexPath.row]
    7. cell?.textLabel?.text = user.question
    8. cell?.detailTextLabel?.text = user.name
    9. let image = UIImage(named: user.profilePicture)
    10. cell?.imageView?.image = image
    11. cell?.imageView?.layer.cornerRadius = (cell?.imageView?.frame.size.width)! / 2
    12. cell?.imageView?.clipsToBounds = true
    13. return cell!
    14. }
    Alles anzeigen
  • Evtl. musst Du eine CustomTableViewCell verwenden und in layoutSubviews() den cornerRadius vom imageView passend zur Größe des imageViews setzen.

    Alternativ probiere mal, in der UITableViewDelegate Methode tableView(_:willDisplay:forRowAt:) den cornerRadius entsprechend zu setzen. Dann sollte die TableViewCell ggf. komplett den Layout durchlaufen haben und die Größe vom imageView final sein.
  • Also vielen Dank schon mal für die ganzen Vorschläge. Habe es auch ausprobiert doch leider weiterhin ohne Erfolg. Habe aber mal so ein bisschen rumprobiert in dem ich mir auch einfach mal die Breite von image? ausgeben lassen hab

    Quellcode

    1. print(image?.size.width)

    Die Breite der Bilder ist immer unterschiedlich und zumeist auch recht groß.

    Quellcode

    1. cell?.imageView?.layer.cornerRadius = (image?.size.width)! / 2
    Bei der print Ausgabe kam bspw. der Wert 1080 raus. 1080 / 2 ergibt aber immer noch eine Breite von 540 und das scheint Xcode aus irgendeinem Grund zu groß zu sein :/

    Teile ich bspw. durch 15 oder werden die Bilder angezeigt, wenn auch in sehr sehr klein und nicht mehr rund. Aber naja weiß so langsam nicht mehr weiter :/
    Jemand noch ne Ahnung woran das alles liegen könnte ?
  • Man man man, wie schon mehrfach geschrieben, kannst Du nicht unbedingt die Breite der Bilder für den cornerRadius verwenden da die Bilder nicht die Breite/Höhe des ImageViews haben müssen.

    Du musst die Breite bzw. halbe Breite des ImageViews verwenden!

    Implementiere also in der Delegate Klasse vom TableView die Methode tableView(_:willDisplay:forRowAt:). Dort setzt Du dann den cornerRadius vom imageView der Zelle auf die halbe Breite des imageViews.

    Dann bitte mal Feedback geben, ob dies funktioniert oder nicht!
  • Auch wenn das nichts mit dem eigentlichen Problem zu tun hat, nur mal so eine kleine Nebenbemerkung. Wenn schon forced unwrap dann doch an der richtigen Stelle. Also, aus

    Quellcode

    1. (image?.size.width)!

    mach

    Quellcode

    1. image!.size.width

    ;)
    Das iPhone sagt: "Zum Antworten streichen". Wie? Echt Jetzt? Muß ich erst die Wohnung streichen!?
  • MCDan schrieb:

    Man man man, wie schon mehrfach geschrieben, kannst Du nicht unbedingt die Breite der Bilder für den cornerRadius verwenden da die Bilder nicht die Breite/Höhe des ImageViews haben müssen.

    Du musst die Breite bzw. halbe Breite des ImageViews verwenden!

    Implementiere also in der Delegate Klasse vom TableView die Methode tableView(_:willDisplay:forRowAt:). Dort setzt Du dann den cornerRadius vom imageView der Zelle auf die halbe Breite des imageViews.

    Dann bitte mal Feedback geben, ob dies funktioniert oder nicht!
    Also ich bin deinem Ratschlag mal gefolgt und habe das ganze mal umgesetzt, hoffentlich auch richtig...


    Quellcode

    1. override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    2. let cell = tableView.dequeueReusableCell(withIdentifier: "QuestionLine", for: indexPath as IndexPath) as UITableViewCell
    3. cell.imageView?.layer.cornerRadius = (cell.imageView?.frame.size.width)! / 2
    4. cell.imageView?.clipsToBounds = true
    5. }
    Leider bewirkt das auch nichts. Hätte ich in cellForRowAt noch großartig was ändern müssen oder gibt es noch was anderes zu beachten was ich vergessen haben könnte ?