2
votes

Comment arrondir correctement les bords d'une cellule de vue tableau avec une hauteur dynamique

Je rencontre un problème avec l'une de mes vues de table. J'écris une page de messagerie pour mon application qui utilise une vue de table pour afficher les messages envoyés et reçus. Les cellules du tableau doivent changer de hauteur en fonction du contenu de chaque cellule. Le dimensionnement fonctionne correctement, mais je dois maintenant arrondir les bords des cellules pour s'adapter à la conception de l'interface utilisateur. La façon dont j'ai fait cela dans le passé avec des hauteurs non dynamiques est d'appeler une fonction pour arrondir chaque coin dans la fonction de remplacement "layoutSubViews ()" dans la tableViewCell:

    func roundAllCorners(radius: CGFloat) {
        let allCorners: UIRectCorner = [.topLeft, .bottomLeft, .bottomRight, .topRight]
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: allCorners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }

Si je essayez d'appeler cette fonction mais la cellule est dimensionnée dynamiquement puis le bord gauche coupe un demi-centimètre. Si vous faites défiler la cellule hors de l'écran et inversement, cela le corrige. J'espère que vous pouvez trouver une solution à mon problème, cela fait un moment que vous avez mal au cou. Merci.

ios swift

1 commentaires

cell.cardView.layer.cornerRadius = 5

3 Réponses :

2
votes

Il se peut que vous deviez également remplacer le setter pour frame et l'appeler ici. Quoi qu'il en soit, ce n'est pas une bonne idée pour plusieurs raisons. Le fait est que la cellule de vue de tableau a de nombreuses vues (y compris elle-même étant une vue) comme la vue de contenu et la vue d'arrière-plan ...

Je vous suggère d'ajouter encore une autre vue sur la vue de contenu qui contient toutes vos vues de cellule. Faites ensuite de cette vue une sous-classe et gérez tous les arrondis. Donc, du point de vue du storyboard, vous auriez quelque chose comme:

class RoundedView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            refresh()
        }
    }
    @IBInspectable var fullyRounded: Bool = false {
        didSet {
            refresh()
        }
    }


    override func layoutSubviews() {
        super.layoutSubviews()
        refresh()
    }

    private func refresh() {
        layer.cornerRadius = fullyRounded ? min(bounds.width, bounds.height) : cornerRadius
    }

}

La vue arrondie a (ou devrait avoir) des contraintes donc layoutSubViews devrait être suffisante pour remplacer pour configurer le rayon de coin.

Vous pouvez avoir une classe soignée que vous pouvez utiliser pour arrondir votre vue comme:

- UITableViewCell
    - contentView
        - roundedContainer
            - imageView
            - button
            - label
            ...

Comme déjà mentionné par @iDeveloper it il serait peut-être préférable d'utiliser cornerRadius d'une couche. Mais si vous avez besoin d'utiliser un calque de forme, vous pouvez également le faire dans cette classe.

Assurez-vous de délimiter les limites sur cette vue.

2 commentaires

Cela a fonctionné. merci pour l'aide avec ceci, une dernière chose: pouvez-vous l'utiliser pour arrondir des coins spécifiques, donc si je voulais que les bords de la main gauche soient arrondis mais ceux de la main droite tranchants, je pourrais? Merci encore.

@Liam malheureusement non. Seulement tous les coins. Vous devrez utiliser des masques pour ceux-ci ou parfois vous pouvez appliquer d'autres astuces. Par exemple, pour arrondir les bords gauches, vous créez 2 vues qui se chevauchent. Celui de gauche a des bords arrondis et celui de droite non. Mais cela pose toutes sortes de problèmes comme ne pas pouvoir être transparent ... Une autre approche consiste à remplacer la méthode drawRect sur une vue et à dessiner l'arrière-plan comme vous le souhaitez. N'oubliez pas d'appeler setNeedsDisplay chaque fois que la présentation des sous-vues.

2
votes

Assurez-vous de RECHARGER LA VUE TABLE après avoir appelé votre fonction

yourTableView.reloadData()

0 commentaires

0
votes

Vous pouvez utiliser une cellule d'affichage de tableau à taille automatique en fonction du contenu. Vous pouvez maintenant suivre l'implémentation précédente pour la cellule d'angle arrondi.

Placez le code ci-dessous dans viewDidLoad.

tableView.estimatedRowHeight = YourEstimatedTableViewHeight tableView.rowHeight = UITableViewAutomaticDimension

Remarque : Vous devez donner correctement les contraintes du haut et du bas au contenu.

Pour une mise en œuvre détaillée, vous pouvez suivre self-sizing-table-view -cellules

0 commentaires