iOS 7 圆角边框按钮

Question

iOS应用商店有一个蓝色圆框框的按钮，用于购买/下载应用程序。

在我的应用中，您可以下载额外的内容，我想要一个类似的按钮，因为它看起来很熟悉。

如果您不知道我的意思：这些按钮就像“$3.99”

这怎么可能？

- h345k34cr

Answer 1

你可以相对容易地操作按钮的 CALayer 来实现这个效果。

// assuming you have a UIButton or more generally a UIView called buyButton

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;
// (note - may prefer to use the tintColor of the control)

你可以微调它们中的每一个，以获得你想要的颜色和边框效果。

您还需要在任何要使用CALayers的文件中添加导入。

#import <QuartzCore/QuartzCore.h>

- Dima

---

需要注意的是，即使在 iOS 7 之前，这也是创建圆角矩形/带边框视图的首选方法。 - Nicolas Miari

我制作了一个库，当按钮被按下时，它看起来和动画效果都一样。希望这会有所帮助：https://github.com/yhpark/YHRoundBorderedButton - yhpark

你好，我遇到了问题，我只需要将我的按钮的右上角和右下角进行圆角处理，应该怎么做呢？请给予建议，谢谢。 - Harshit Goel

Answer 2

如果您是iOS UI设计中使用Storyboard的狂热粉丝，那么可以像这个答案中提到的其他参数一样，在Storyboard的“identity inspector”->“user defined runtime attributes”中设置圆角半径（和任何其他参数），但不幸的是，由于它是CGColor并且Apple目前没有在弹出窗口中提供此选项，因此无法设置颜色。

额外奖励： 您可以使用运行时属性为UIButton占位符文本颜色（参见此处）以及更改UILabel、UITextField 和UIButton的字体（参见此处）。

- abbood

---

注意！在界面构建器中，您无法设置borderColor的颜色。只有"颜色"类型可用，没有CGColor类型 - 因此很遗憾您不能这样做！（如果您想要"黑色"作为CGColor，那是可以的！） - Fattie

它适用于圆角半径，但不适用于边框宽度和边框颜色。 - vijayst

Answer 3

对于标准的iOS控件元素，例如UIButton，UILabel， 您应该使用UIView的 tintColor 属性：

buyButton.layer.borderColor = buyButton.tintColor.CGColor;

- Gideon King

Answer 4

对于像您描述的简单边框，请使用Dima使用CALAyer的答案。

如果你想要更多，比如有渐变效果的圆角矩形，则可以使用以下方法：

创建一个自定义视图，用于绘制圆角矩形，并将其放置在按钮上。可以使用此处的搜索功能来搜索绘制圆角矩形的方法。绘制方法是通过绘制4个具有定义半径（角）的弧和4条直线来完成的。

---

顺便说一句，这里是如何制作具有正确iOS7圆角的UIView，Alex和Brian提供了解决方法。

我非常确定CGPathCreateWithRoundedRect不能给你“新”的圆角。你必须使用bezierPathWithRoundedRect来获得“新”的圆角。

#import "UIViewWithIOS7RoundedCorners.h"
@implementation UIViewWithIOS7RoundedCorners
-(void)drawRect:(CGRect)rect
    {
    // for a filled shape...

    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4];
    [[UIColor blueColor] setFill];
    [path fill];

    // for just a border...

    int thickness=2;
    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:
            CGRectInset(self.bounds, thickness/2, thickness/2)
            cornerRadius: 4];
    path.lineWidth = thickness;
    [[UIColor blueColor] setStroke];
    [path stroke];
    }

@end
// ps don't forget to set .backgroundColor=[UIColor clearColor]
// perhaps in initWithCoder/initWithFrame

希望这能帮到某些人。

- AlexWien

---

这真的不必要。您可以使用UIButton的基础CALayer轻松添加边框/框架，请参考我的答案中的说明。 - Dima

啊，我记得了，我用自绘来实现渐变效果。 - AlexWien

更新，为了限制这个答案只针对高级绘图。 - AlexWien

这个解决方案有一些小优点。+[UIBezierPath bezierPathWithRoundedRect:cornerRadius:]使用了新的圆角半径样式。此外，您可以生成一个单独的图像用于所有按钮，提高GPU渲染性能。 - Brian Nickel

我的解决方案似乎有些过时了，现在你可以使用UIBezierPath来解决这个问题。(但是我从手动绘制4个弧线和线段的源代码中学到了很多) - AlexWien

Answer 5

为了扩展@abbood的优秀答案，实际上可以从IB中设置视图层的边框颜色和背景颜色，但需要做一些准备工作。我创建了一个自定义类别NSView，CALayer+setUIColor.h。该类别仅设置边框颜色，有一个方法setBorderUIColor。它以UIColor为输入，获取UIColor的底层NSColor，并将该颜色应用于视图的层。然后，在IB中，只需添加像这样的用户定义的运行时属性：

键路径 layer.borderUIColor 类型 颜色 值 所需颜色。

在运行时，系统调用您的方法，传递在IB中定义的UIColor。类别从UIColor获取CGColor并将其应用于层。您可以在我的github项目中看到这个工作项目RandomBlobs。我还针对设置层的背景颜色属性做了同样的事情，但不在上述项目中。

- Duncan C

Answer 6

我已经实现了AppStore风格的按钮，供您参考：ASButton.m，项目在这里。希望能够帮到您：]

- jianpx

Answer 7

对于 Duncan C 对 abbood 答案的扩展的 Swift 版本：

extension CALayer {
    var borderUIColor: UIColor? {
        get {
            if let borderColor = borderColor {
                return UIColor(CGColor: borderColor)
            }
            return nil
        }
        set {
            borderColor = newValue?.CGColor ?? nil
        }
    }
}

- Aneel

Answer 8

在 Swift 5.1 / iOS 13 中，您可以创建 UIButton 的子类，以便拥有一个自定义按钮，它的外观看起来像 iOS AppStore 应用程序中的蓝色圆角边框按钮。

以下代码展示了如何适当地管理按钮的调色板颜色（当按钮出现在 UIAlertController 的暗淡视图后面时），标题颜色，高亮背景颜色，边框样式，边框颜色和内容插图。

CustomButton.swift:

import UIKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setProperties()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setProperties()
    }

    func setProperties() {
        // Set the layer's properties
        layer.borderColor = tintColor?.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 4

        // Set colors for title's states
        setTitleColor(tintColor, for: .normal)
        setTitleColor(.white, for: .highlighted)

        // Add some margins between the title (content) and the border
        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    override var isHighlighted: Bool {
        didSet {
            // Toggle the background color according to button's highlighted state
            backgroundColor = super.isHighlighted ? tintColor : nil
        }
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        // When the tint color is changed by the system (e.g. when the button appears below the dimmed view of a UIAlertController), we have to manually update border color and title's text color
        layer.borderColor = tintColor?.cgColor
        setTitleColor(tintColor, for: .normal)
    }

}

ViewController.swift:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .secondarySystemBackground

        let button = CustomButton()
        button.setTitle("Normal", for: .normal)
        button.setTitle("Highlighted", for: .highlighted)
        button.addTarget(self, action: #selector(presentAlert(_:)), for: .touchUpInside)
        view.addSubview(button)

        // auto layout
        button.translatesAutoresizingMaskIntoConstraints = false
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    }

    /// Present alert when button is tapped
    @objc func presentAlert(_ sender: UIButton) {
        let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert)
        let alertAction = UIAlertAction(title: "OK", style: .default)
        alertController.addAction(alertAction)
        present(alertController, animated: true, completion: nil)
    }

}

下面的图片展示了自定义按钮在正常状态下的外观，当系统tinColor改变时（在UIAlertController的暗淡视图背后）以及高亮状态下的外观。这与UIAlertController有关。

- Imanou Petit