web-dev-qa-db-fra.com

Créer un bouton de cercle dans iOS7 sans images

Je voudrais recréer les boutons circulaires trouvés dans l'application Horloge sous iOS7. Les boutons sont essentiellement des cercles d'apparence différente selon leur état (bordure verte, bordure rouge, remplissage gris).

Je pouvais bien sûr y parvenir en utilisant un simple UIButton avec des images pour les différents états.

Cependant, je cherche une solution qui dessine le cercle par programmation afin de pouvoir facilement changer de rayon, de largeur de trait, etc.

Autant que je sache, UIButton ne me permet que de définir un UIImage pour chaque état. Je ne peux donc pas modifier directement les couches par état (par exemple, fournir une couche avec cornerRadius). Y a-t-il un autre moyen?

iosuibuttonios7
14
henning77

La création d'un bouton personnalisé peut être utile.

dans le fichier .h;

#import <UIKit/UIKit.h>
@interface CircleLineButton : UIButton

- (void)drawCircleButton:(UIColor *)color;

@end

dans le fichier .m;

    #import "CircleLineButton.h"

    @interface CircleLineButton ()

    @property (nonatomic, strong) CAShapeLayer *circleLayer;
    @property (nonatomic, strong) UIColor *color;
    @end

    @implementation CircleLineButton



    - (void)drawCircleButton:(UIColor *)color
    {
        self.color = color;

        [self setTitleColor:color forState:UIControlStateNormal];

        self.circleLayer = [CAShapeLayer layer];

        [self.circleLayer setBounds:CGRectMake(0.0f, 0.0f, [self bounds].size.width,
                                      [self bounds].size.height)];
        [self.circleLayer setPosition:CGPointMake(CGRectGetMidX([self bounds]),CGRectGetMidY([self bounds]))];

        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];

        [self.circleLayer setPath:[path CGPath]];

        [self.circleLayer setStrokeColor:[color CGColor]];

        [self.circleLayer setLineWidth:2.0f];
        [self.circleLayer setFillColor:[[UIColor clearColor] CGColor]];

        [[self layer] addSublayer:self.circleLayer];
    }

    - (void)setHighlighted:(BOOL)highlighted
    {
        if (highlighted)
        {
            self.titleLabel.textColor = [UIColor whiteColor];
            [self.circleLayer setFillColor:self.color.CGColor];
        }
        else
        {
            [self.circleLayer setFillColor:[UIColor clearColor].CGColor];
            self.titleLabel.textColor = self.color;
        }
    }

@end

Et dans le contrôleur de vue, appelez [self.myCircleButton drawCircleButton:[UIColor myColor]]

30
caglar

Vous pouvez y parvenir de nombreuses façons, par exemple:

  • Utilisez CAShapedLayer

  • Sous-classe UIView et utilisez la méthode drawRect: pour dessiner un cercle

  • Juste un carré UIView et utilisez la propriété layer.cornerRadius

Selon vos besoins, quelque chose d'aussi simple que de créer un UIButton normal et d'appeler

myButton.layer.cornerRadius = myButton.bounds.size.width / 2.0;

pourrait fonctionner (vous devrez inclure le Quartz Framework)

11
Peter Sarnowski

Le modèle que j'ai utilisé pour réaliser ce genre de chose est:

Sous-classe UIButton et implémentez drawRect pour dessiner le bouton comme vous le souhaitez, en personnalisant les couleurs en fonction des propriétés selected et highlighted du bouton.

Puis remplacez setSelected et setHighlighted pour forcer le redessinage de la manière suivante:

-(void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self setNeedsDisplay];
}
4
Mike Pollard

Solution avec une extension rapide:

extension UIView{
    func asCircle(){
        self.layer.cornerRadius = self.frame.size.width / 2;
        self.layer.masksToBounds = true
    }
}

Il suffit d'appeler 

myView.asCircle()

Peut fonctionner avec tout type de vue, pas seulement un bouton

4
Kevin ABRIOUX

Ajouter ce code

imagePreview.layer.cornerRadius = (imagePreview.bounds.size.height/2);

où imagePreview est UIview/UIimageview/UIButton 

n'oubliez pas d'ajouter 

#import <QuartzCore/QuartzCore.h>
4
wmsschlck

Je pense que ça marche bien.

override func viewDidLoad() {
    super.viewDidLoad()

    var button = UIButton.buttonWithType(.Custom) as UIButton
    button.frame = CGRectMake(160, 100, 50, 50)
    button.layer.cornerRadius = 0.5 * button.bounds.size.width
    button.setImage(UIImage(named:"thumbsUp.png"), forState: .Normal)
    button.addTarget(self, action: "thumbsUpButtonPressed", forControlEvents: .TouchUpInside)
    view.addSubview(button)
}

func thumbsUpButtonPressed() {
    println("thumbs up button pressed")
}
0
Aya Aboud

Vous pouvez utiliser ce contrôle, c'est la sous-classe de UIButton . https://github.com/alvaromb/AMBCircularButton

0
Abo3atef