ios - puedo - control por boton iphone

Crear un botón circular en iOS7 sin imágenes

Question

Me gustaría recrear los botones circulares que se encuentran en la aplicación Reloj en iOS7. Los botones son básicamente círculos con apariencia diferente según los estados de los botones (borde verde, borde rojo, relleno gris).

Por supuesto, podría lograr esto usando un simple UIButton con imágenes para los diferentes estados.

Sin embargo, estoy buscando una solución que dibuje el círculo mediante programación, por lo que puedo cambiar fácilmente el radio, el ancho de carrera, etc.

Por lo que puedo ver, UIButton solo me permite definir un UIImage para cada estado, por lo que no puedo modificar las capas por estado directamente (por ejemplo, proporcionar una capa con cornerRadius). ¿Hay otra manera?

Answer 1

Hay muchas formas de lograr esto, por ejemplo:

• Use CAShapedLayer

• Subclase UIView y utiliza el método drawRect: para dibujar un círculo

• Solo tiene una UIView cuadrada y use la propiedad layer.cornerRadius .

Dependiendo de sus necesidades, algo tan simple como crear UIButton y llamadas normales

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

podría funcionar (deberás incluir el Marco de Cuarzo )

Answer 2

El patrón que he usado para lograr este tipo de cosas es:

La subclase UIButton e implementa drawRect para dibujar el botón como desee, personalizando los colores según las propiedades selected y highlighted del botón.

A continuación, anule setSelected y setHighlighted para forzar los setHighlighted de esta forma:

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

Answer 3

Crear un botón personalizado puede ser útil.

en el archivo .h;

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

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

@end

en el archivo .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

Y en el controlador de vista, llame [self.myCircleButton drawCircleButton:[UIColor myColor]]

Answer 4

Agrega este código

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

donde imagePreview es UIview / UIimageview / UIButton

no te olvides de agregar

#import <QuartzCore/QuartzCore.h>

Answer 5

Puede usar este control, es una subclase de UIButton. https://github.com/alvaromb/AMBCircularButton

Answer 6

Creo que funciona 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")
}

Answer 7

1. En el guión gráfico, haz un UIButton cuadrado (p. Ej., 100 * 100)

2. Salida de enlace (por ejemplo, @property (Strong, nonatomic) UIButton IBOutlet * myButton;)

3. En su código, escriba esto: self.myButton.layer.cornerRadius = 50; // 50 es la mitad de la longitud del cuadrado de un lado.

Answer 8

Solución con una extensión rápida:

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

Solo llama

myView.asCircle()

Puede trabajar con cualquier tipo de vista, no solo con un botón