web-dev-qa-db-fra.com

Comment faire une UIView circulaire

Je veux créer un UIView ou UIImageView qui est un cercle. Ou un cercle dont je peux changer la taille à l'aide d'un curseur et la couleur avec une vue d'ensemble.

iphoneuiviewuiimageviewgeometryquartz-core
52
Jab

Je peux au moins vous montrer un raccourci pour dessiner des cercles de taille arbitraire. Aucun OpenGL, aucun dessin Core Graphics requis.

Importez le framework QuartzCore pour accéder à la propriété . CornerRadius de votre UIView ou UIImageView.

#import <QuartzCore/QuartzCore.h>

Ajoutez-le également manuellement au dossier Frameworks de votre projet.

Ajoutez cette méthode à votre contrôleur de vue ou là où vous en avez besoin:

-(void)setRoundedView:(UIImageView *)roundedView toDiameter:(float)newSize;
{
    CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.Origin.x, roundedView.frame.Origin.y, newSize, newSize);
    roundedView.frame = newFrame;
    roundedView.layer.cornerRadius = newSize / 2.0;
    roundedView.center = saveCenter;
}

Pour l'utiliser, il suffit de lui passer un UIImageView et un diamètre. Cet exemple suppose que vous avez un UIImageView nommé "circ" ajouté en tant que sous-vue à votre vue . Il doit avoir un backgroundColor défini pour que vous puissiez le voir.

circ.clipsToBounds = YES;
[self setRoundedView:circ toDiameter:100.0];

Cela gère juste UIImageViews mais vous pouvez le généraliser à n'importe quel UIView .

REMARQUE: Depuis iOS 7, clipToBounds doit être OUI.

106
willc2
// For those looking to round the corners of an image view
imageView.layer.cornerRadius = imageView.bounds.size.width/2;
imageView.layer.masksToBounds = YES;
31
John Erck

Si quelqu'un cherche Swift équivalent que ci-dessous est la réponse (Xcode7.2):

(Pour que cela fonctionne, la hauteur et la largeur doivent être égales.) 

extension UIView {
    func makeCircular() {
        self.layer.cornerRadius = min(self.frame.size.height, self.frame.size.width) / 2.0
        self.clipsToBounds = true
    }
}

enter image description here

22
पवन

Pas besoin d'appels graphiques. Il suffit de définir le rayon du coin sur la largeur/2. Cela peut être fait sur n'importe quel objet visuel, c'est-à-dire l'élément UI

13
infiniteLoop

Comme mentionné dans certains commentaires, @IBDesignable rend cela beaucoup plus facile maintenant, vous pouvez donc utiliser Interface Builder pour configurer votre UIImageView arrondi.

Créez d'abord une classe nommée RoundedImageView.Swift et collez-y ce code:

import UIKit

@IBDesignable public class RoundedImageView: UIImageView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        //hard-coded this since it's always round
        layer.cornerRadius = 0.5 * bounds.size.width
    }
}

Sélectionnez UIImageView dans InterfaceBuilder et changez la classe de UIImageView en RoundedImageView personnalisé:

enter image description here

Ensemble Clip to Bounds à vrai (ou l'image s'étendra au-delà du cercle):

enter image description here

Il devrait maintenant s'arrondir ici dans InterfaceBuilder, ce qui est assez astucieux. Assurez-vous de régler la largeur et la hauteur sur les mêmes valeurs, sinon elles auront la forme d'un zeppelin!

enter image description here

4
James Toomey

Vous devez créer une UIView transparente (couleur d'arrière-plan alpha de 0), puis, dans son drawRect:, dessinez votre cercle à l'aide d'appels CoreGraphics. Vous pouvez également modifier le calque de la vue et lui donner un cornerRadius.

3
Ben Gottlieb