Utwórz przycisk koła w iOS7 bez obrazów

Question

Chciałbym odtworzyć okrągłe przyciski znajdujące się w aplikacji Zegar w iOS7. Przyciski są zasadniczo okręgami o różnym wyglądzie w zależności od stanu przycisku (zielona ramka, czerwona ramka, szare wypełnienie).

Mogę oczywiście osiągnąć to za pomocą prostego UIButton z obrazami dla różnych stanów.

jednak szukam rozwiązania, które rysuje okrąg programowo, więc można łatwo zmienić promień, szerokość udar mózgu, itd

O ile widzę UIButton tylko pozwala mi zdefiniować dla każdego stanu UIImage , więc nie mogę modyfikować warstw bezpośrednio według stanu (np. zapewnić warstwę z rogiem Radius). Czy istnieje inny sposób?

Answer 1

Istnieje wiele sposobów można to osiągnąć, na przykład:

• Korzystanie CAShapedLayer

• podklasy UIView i użyć drawRect: sposób narysować okrąg

• Wystarczy mieć kwadrat UIView i użyj właściwości layer.cornerRadius .

W zależności od potrzeb, coś tak proste jak tworzenie normalne UIButton i nazywając

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

mógł pracować (będziesz musiał zawierać Quartz ramowa)

Answer 2

tworzenia niestandardowego Przycisk może być pomocny.

w pliku .h;

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

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

@end 

w pliku .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 

A w kontrolerze widoku, zadzwoń [self.myCircleButton drawCircleButton:[UIColor myColor]]

Answer 3

Wzór Użyłem do osiągnięcia tego rodzaju rzeczy jest:

Podklasa UIButton i wdrożenie drawRect wyciągnąć przycisk, jak chcesz, dostosowywanie kolorów zgodnie z właściwościami przycisku selected i highlighted.

następnie zastąpić setSelected i setHighlighted wymusić odświeżanie tak:

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

Answer 4

Dodaj ten kod

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

gdzie imagePreview jest UIView/UIImageView/UIButton

nie zapomnij dodać

#import <QuartzCore/QuartzCore.h> 

Answer 5

Możesz użyć tej kontroli, jej podklasy od UIButton. https://github.com/alvaromb/AMBCircularButton

Answer 6

Myślę, że działa dobrze.

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. W serii ujęć, Pozwól kwadratowy UIButton (np 100 * 100.)

2. wylot Link (np @property (silny, nonatomic) UIButton IBOutlet * myButton;).

3. W kodzie wpisz: self.myButton.layer.cornerRadius = 50; // 50 to połowa długości kwadratu z jednej strony.

Answer 8

Rozwiązanie z szybkiego rozszerzenia:

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

Wystarczy zadzwonić

myView.asCircle() 

Może pracować z dowolnym rodzajem widzenia, nie tylko jednego przycisku