76

iOS App Store 有一个蓝色圆形框架按钮​​，用于购买/下载应用程序。

在我的应用程序中，您可以下载其他内容，我希望有一个类似的按钮，只是因为它对用户来说看起来很熟悉。

如果你不知道，我的意思是：这些按钮，比如“$3.99”

在此处输入图像描述

这怎么可能？

4

8 回答 8

199

You can manipulate the CALayer of your button to do this pretty easily.

// 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)

you can tweak each of those to get the color and border effect you want.

You will also have to add an import in any file you want to use CALayers

#import <QuartzCore/QuartzCore.h>
于 2013-10-02T17:26:01.107 回答
90

如果您是使用 iOS 进行 UI 设计的故事板的忠实粉丝。您可以设置圆角半径（以及 dima 的答案中提到的任何其他参数- 尽管不幸不是颜色，因为它是 CGColor 而 Apple 目前没有在情节提要的identity inspector->中的弹出窗口中有该选项），user defined runtime attributes如下所示：

在此处输入图像描述

奖励： 您使用运行时属性来获取UIButton占位符文本颜色（请参阅此处）并更改字体UILabel，UITextField以及UIButton（请参阅此处）

于 2014-01-27T07:36:51.190 回答
17

对于 , 等标准 iOS 控件元素UIButton，UILabel您应该使用以下UIView tintColor属性：

buyButton.layer.borderColor = buyButton.tintColor.CGColor;
于 2013-12-20T23:45:56.973 回答
8

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

如果您想要更多，例如带有渐变的圆角矩形，则使用此方法作为基础：

创建一个自定义视图，它绘制一个圆角矩形并将其放在按钮上。使用此处的搜索功能搜索绘制圆角矩形。该绘图通过绘制 4 条具有定义半径（角）和 4 条直线的弧来工作。

FTR，按照 Alex 和 Brian 的说法，这是您如何使用正确的 iOS7 圆角制作 UIView。

我很确定 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

在此处输入图像描述

在此处输入图像描述

希望它可以帮助某人

于 2013-10-02T17:15:32.157 回答
2

我在这里实现了 AppStore 风格的按钮供您参考：ASButton.m

项目就在这里

希望有所帮助：]

于 2014-03-10T12:59:18.157 回答
2

为了扩展@abbood 的出色答案，实际上可以从 IB 设置视图层的边框颜色和背景颜色，但这需要一些准备工作。

我在 NSView 上创建了一个自定义类别，CALayer+setUIColor.h。

设置边框颜色的只有一种方法，setBorderUIColor。它将 UIColor 作为输入，获取 UIColor 的底层 NSColor，并将该颜色应用于视图的图层。

然后，在 IB 中，您只需添加一个用户定义的运行时属性，如下所示：

KeyPath layer.borderUIColor Type color Value 想要的颜色。

在运行时，系统调用您的方法，传入 IB 中定义的 UIColor。类别从 UIColor 获取 CGColor 并将其应用于图层。

您可以在我的一个名为 github 的项目中的一个工作项目中看到这一点

随机斑点

我也为设置图层的背景颜色属性做了同样的事情，但在上面的项目中没有。

于 2014-10-21T00:48:10.283 回答
0

而对于 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
        }
    }
}
于 2016-01-24T21:53:58.647 回答
0

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

下面的代码展示了如何正确管理 tint 颜色（当按钮出现在 a 的灰色视图后面时UIAlertController）、标题的颜色、突出显示的背景颜色、边框的样式、边框的颜色和内容插图。

自定义按钮.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更改时（在 a 的暗视图后面UIAlertController）和highlighted状态。

在此处输入图像描述

于 2017-05-27T09:49:49.387 回答