Tạo nút tròn trong iOS7 mà không cần hình ảnh

Question

Tôi muốn tạo lại các nút tròn được tìm thấy trong ứng dụng Đồng hồ trong iOS7. Các nút cơ bản là hình tròn với sự xuất hiện khác nhau tùy thuộc vào trạng thái nút (đường viền màu xanh lá cây, đường viền màu đỏ, màu xám).

Tôi có thể đạt được điều này bằng cách sử dụng UIButton đơn giản với hình ảnh cho các trạng thái khác nhau.

Tuy nhiên tôi đang tìm kiếm một giải pháp mà vẽ vòng tròn lập trình, vì vậy tôi có thể dễ dàng thay đổi bán kính, bề dày nét vv

Theo như tôi có thể nhìn thấy UIButton chỉ cho phép tôi để xác định một UIImage cho mỗi tiểu bang , vì vậy tôi không thể sửa đổi các lớp trên mỗi trạng thái trực tiếp (ví dụ: cung cấp một lớp với angleRadius). Có cách nào khác không?

Answer 1

Có rất nhiều cách bạn có thể thực hiện điều này, ví dụ:

• Sử dụng CAShapedLayer

• Subclass UIView và sử dụng drawRect: phương pháp để vẽ một vòng tròn

• Chỉ cần có một hình vuông UIView và sử dụng thuộc tính layer.cornerRadius .

Tùy thuộc vào nhu cầu của bạn, một cái gì đó đơn giản như tạo bình thường UIButton và gọi

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

có thể làm việc (bạn sẽ cần phải bao gồm các Quartz Framework)

Answer 2

Tạo một tùy chỉnh nút có thể hữu ích.

trong tệp .h;

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

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

@end 

trong tệp .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 

Và trong bộ điều khiển xem, gọi [self.myCircleButton drawCircleButton:[UIColor myColor]]

Answer 3

Các mô hình tôi đã sử dụng để đạt được loại điều là:

Subclass UIButton và thực hiện drawRect để vẽ các nút như bạn muốn, tùy chỉnh màu dựa trên các thuộc tính selected và highlighted của nút.

Sau đó ghi đè setSelected và setHighlighted để buộc redraws như vậy:

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

Answer 4

Thêm mã này

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

nơi imagePreview là UIView/UIImageView/UIButton

đừng quên thêm

#import <QuartzCore/QuartzCore.h> 

Answer 5

Bạn có thể sử dụng điều khiển này, đó là phân lớp từ UIButton. https://github.com/alvaromb/AMBCircularButton

Answer 6

Tôi nghĩ nó hoạt động tốt.

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. Trong kịch bản, Make vuông UIButton (ví dụ 100 * 100.)

2. liên kết ổ cắm (@property ví dụ (Strong, nonatomic) UIButton IBOutlet * myButton;.)

3. Trong mã của bạn, hãy viết: self.myButton.layer.cornerRadius = 50; // 50 là một nửa chiều dài của một cạnh.

Answer 8

Giải pháp với một mở rộng nhanh chóng:

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

Chỉ cần gọi

myView.asCircle() 

thể làm việc với bất kỳ loại xem, không chỉ là một nút