14

我想重新创建 iOS7 时钟应用程序中的圆形按钮。按钮基本上是具有不同外观的圆形，具体取决于按钮状态（绿色边框、红色边框、灰色填充）。

我当然可以使用带有不同状态图像的简单 UIButton 来实现这一点。

但是我正在寻找一种以编程方式绘制圆的解决方案，因此我可以轻松更改半径、笔划宽度等。

据我所知，UIButton 只允许我为每个状态定义一个 UIImage，所以我不能直接修改每个状态的图层（例如，提供一个带有cornerRadius 的图层）。还有其他方法吗？

4

8 回答 8

30

创建自定义按钮可能会有所帮助。

在 .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]]

于 2013-09-25T18:16:37.037 回答
11

有很多方法可以实现这一点，例如：

  • 使用CAShapedLayer

  • 继承UIView并使用drawRect:方法画一个圆

  • 只需有一个方形UIView并使用layer.cornerRadius 属性。

根据您的需要，创建普通 UIButton 并调用

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

可以工作（你需要包括Quartz框架）

于 2013-09-25T15:02:26.407 回答
4

添加此代码

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

其中 imagePreview 是 UIview/UIimageview/UIButton

不要忘记添加

#import <QuartzCore/QuartzCore.h>
于 2014-06-05T12:58:07.607 回答
4

我用来实现这种事情的模式是：

子类化UIButton并实现drawRect以根据需要绘制按钮，根据按钮的selected和highlighted属性自定义颜色。

然后覆盖setSelected并setHighlighted强制重绘，如下所示：

-(void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self setNeedsDisplay];
}
于 2013-09-26T09:07:53.720 回答
4

快速扩展的解决方案：

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

打电话

myView.asCircle()

可以使用任何类型的视图，而不仅仅是按钮

于 2016-11-29T14:45:58.730 回答
0

你可以使用这个控件，它是 UIButton 的子类。 https://github.com/alvaromb/AMBCircularButton

于 2015-04-19T16:02:22.190 回答
0

我认为它运作良好。

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")
}
于 2015-09-10T10:45:35.973 回答
-1

  1. 在情节提要中，制作方形 UIButton（例如 100 * 100 ）

  2. 链接出口（例如。@property (Strong, nonatomic) UIButton IBOutlet * myButton; ）

  3. 在你的代码中写下： self.myButton.layer.cornerRadius = 50; // 50 是正方形一侧长度的一半。

于 2016-05-26T05:24:18.580 回答