web-dev-qa-db-fra.com

Comment créer une UIImage / -View avec des angles arrondis CGRect (Swift)

Comment créer un UIImageView avec des angles arrondis sur un Swift iOS Playground?
À l'intérieur, il doit être rempli d'une couleur.

uiimageviewswiftrounded-cornersswift-playground
56
Thomas
let imageView = UIImageView(frame: CGRectMake(0, 0, 100, 100))
imageView.backgroundColor = UIColor.redColor()
imageView.layer.cornerRadius = 8.0
imageView.clipsToBounds = true

Résultat:

enter image description here

160
Mundi

Pour Swift, le cadre d’image en cercle arrondi a fonctionné de la manière suivante:

    self.profileImageView.image =  UIImage(named:"profileUser")
    self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
    self.profileImageView.clipsToBounds = true

Et pour ajouter une ombre:

    self.profileImageView.layer.masksToBounds = NO;
    self.profileImageView.layer.cornerRadius = 8;
    self.profileImageView.shadowOffset = CGSizeMake(5.0, 5.0);
    self.profileImageView.shadowRadius = 5;
    self.profileImageView.shadowOpacity = 0.5;
25
Javier Calatrava Llavería

Essayez ceci, cela a fonctionné pour moi.

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2
self.profileImageView.clipsToBounds = true
20
Ronaldoh1

J'étais fatigué d'écrire définir le rayon et le masque sur lié pour chaque vue UIV. J'ai donc réalisé l'extension suivante pour UIView. Devrait fonctionner pour chaque sous-classe UIView, bien que je ne l’aie pas testée. L'extension peut être réduite pour des vues spécifiques que vous utilisez bien sûr.

extension UIView {      
    func setRadius(radius: CGFloat? = nil) {
        self.layer.cornerRadius = radius ?? self.frame.width / 2;
        self.layer.masksToBounds = true;
    }
}

Si vous ne lui transmettez aucune valeur spécifique, la demi-largeur de la vue est définie par défaut.

14
Evdzhan Mustafa

Swift 3.0, 4.0

Si vous voulez utiliser le storyboard. J'ai appliqué cela et assurez-vous que "Clip to bounds" est activé.

enter image description here

6
A. Trejo

Si vous voulez avoir une option pour arrondir chaque UIImageView, vous pouvez copier ce code dans votre projet sans oublier de vérifier clip to bounds et définissez sa valeur sur true

import UIKit

@IBDesignable
extension UIImageView
{
    private struct AssociatedKey
    {
        static var rounded = "UIImageView.rounded"
    }

    @IBInspectable var rounded: Bool
    {
        get
        {
            if let rounded = objc_getAssociatedObject(self, &AssociatedKey.rounded) as? Bool
            {
                return rounded
            }
            else
            {
                return false
            }
        }
        set
        {
            objc_setAssociatedObject(self, &AssociatedKey.rounded, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            layer.cornerRadius = CGFloat(newValue ? 1.0 : 0.0)*min(bounds.width, bounds.height)/2
        }
    }
}

screenshot

3
Mendy Barouk

Swift 5.0:

Ma préférence personnelle est d'avoir un fichier supplémentaire Swift pour des modifications spécifiques comme celle-ci. Ce que je fais est ensuite de créer une classe, par exemple "RoundCorner", qui est une sous-classe de l'élément que je souhaite modifier. Dans ce cas, un élément View. Ensuite, je remplace les paramètres individuels.

class RoundCorner: UIView {
override func draw(_ rect: CGRect) {
    self.layer.cornerRadius = 10 // change this number to get the corners you want
    self.layer.masksToBounds = true
    }
}

Après cela, il vous suffit de sélectionner l'élément sur lequel vous souhaitez que cela change et de définir la classe personnalisée sur la classe que nous avons créée précédemment.

Regardez la capture d'écran ici

1
Panagiotis D.

La définition de layer.cornerRadius = 1 dans attributs d'exécution définis par l'utilisateur de l'inspecteur d'identité fonctionne même sur des éléments répétables, tels que les cellules de tableau.

1
Daniel Miranda