Créer un bouton cercle dans iOS7 sans images

Je voudrais recréer la circulaire boutons de l'application Horloge dans iOS7. Les boutons sont essentiellement des cercles avec un aspect différent selon les états du bouton (bordure verte, bordure rouge, fond gris).

Je pourrais bien sûr réaliser cela à l'aide d'un simple UIButton avec des images pour les différents états.

Cependant, je suis à la recherche d'une solution qui se dessine le cercle de la programmation, donc je peux facilement changer le rayon, la largeur du trait, etc.

Aussi loin que je peux voir UIButton seulement me permet de définir une UIImage pour chaque état, de sorte que je ne peux pas modifier les couches par l'état directement (par exemple, fournir une couche avec cornerRadius). Est-il une autre voie?

source d'informationauteur henning77

  1. 30

    Créer un bouton personnalisé peut être utile.

    dans le .h fichier;

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

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

@end

    dans le .m fichier;

        #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 de l'avis du contrôleur, appel [self.myCircleButton drawCircleButton:[UIColor myColor]]

  2. 11

    Il ya beaucoup de façons que vous pourriez accomplir ceci, par exemple:

    • Utilisation CAShapedLayer

    • Sous-classe UIView et l'utilisation de la drawRect: méthode pour dessiner un cercle

    • Juste un carré UIView et l'utilisation de la couche.cornerRadius
      de la propriété.

    En fonction de vos besoins, quelque chose d'aussi simple que la création d'normal UIButton et de l'appel de

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

    pourrait travailler (vous aurez besoin d'inclure la Quartz Cadre)

  3. 4

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

    Sous-classe UIButton et de mettre en œuvre drawRect pour dessiner le bouton que vous voulez, la personnalisation des couleurs qui se fondent sur la selected et highlighted les propriétés du bouton.

    Ensuite remplacer setSelected et setHighlighted pour forcer l'affichage comme suit:

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

    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>
  5. 4

    Solution avec une rapide Extension :

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

    Appelez simplement 

    myView.asCircle()

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

  6. 0

    Vous pouvez utiliser cette commande, il est sous-classe de UIButton.
    https://github.com/alvaromb/AMBCircularButton

  7. 0

    Je pense qu'il du bon travail.

    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")
}
  8. -1

    1. Dans le storyboard, Faire place UIButton (eg. 100 * 100 )

    2. Lien de sortie (par exemple. @property (Forte, nonatomic) UIButton IBOutlet * myButton; )

    3. Dans votre code à écrire ceci:
      auto.myButton.la couche.cornerRadius = 50;
      //50 est la moitié de la carré de la longueur d'un côté.