Создать кнопку круга в iOS7 без изображений

Я хотел бы воссоздать круговые кнопки, найденные в приложении Clock в iOS7. Кнопки в основном представляют собой круги с различным внешним видом в зависимости от состояния кнопок (зеленая рамка, красная рамка, серая заливка).

Я мог бы, конечно, достичь этого, используя простой UIButton с изображениями для разных состояний.

Однако я ищу решение, которое рисует круг программно, поэтому я могу легко изменить радиус, ширину штриха и т.д.

Насколько я вижу, UIButton позволяет мне определять UIImage для каждого состояния, поэтому я не могу напрямую изменять уровни для каждого состояния (например, предоставить слой с помощью cornerRadius). Есть ли другой способ?

Ответы

Ответ 1

Создание настраиваемой кнопки может быть полезно.

в .h файле;

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

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

@end

в .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

И в контроллере представления вызовите [self.myCircleButton drawCircleButton:[UIColor myColor]]

Ответ 2

Существует много способов сделать это, например:

Используйте CAShapedLayer
Подкласс UIView и используйте метод drawRect: для рисования круга
Просто используйте квадратный UIView и используйте layer.cornerRadius свойство.

В зависимости от ваших потребностей, что-то простое, как создание обычного UIButton и вызов

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

может работать (вам нужно включить Кварц)

Ответ 3

Образец, который я использовал для достижения такого рода вещей:

Подкласс UIButton и реализуем drawRect, чтобы нарисовать кнопку, как вы хотите, настраивая цвета на основе свойств selected и highlighted кнопки.

Затем переопределите setSelected и setHighlighted, чтобы принудительно выполнить перерисовку:

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

Ответ 4

Добавьте этот код

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

где imagePreview - это UIview/UIimageview/UIButton

не забудьте добавить

#import <QuartzCore/QuartzCore.h>

Ответ 5

Решение с быстрым расширением:

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

Просто позвоните

myView.asCircle()

Может работать с любым типом просмотра, а не только с кнопкой

Ответ 6

Вы можете использовать этот элемент управления, это подкласс из UIButton. https://github.com/alvaromb/AMBCircularButton

Ответ 7

Я думаю, что он работает хорошо.

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

В раскадровке сделайте квадратный UIButton (например, 100 * 100)
Вывод ссылки (например, @property (сильный, неатомный) UIButton IBOutlet * myButton;)
В коде написано: self.myButton.layer.cornerRadius = 50; // 50 - половина квадратной длины одной стороны.