iOS 7圆形框按钮


76

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

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

如果您不知道,我的意思是:这些按钮,例如“ $ 3.99”

在此处输入图片说明

这怎么可能?

Answers:


199

您可以操纵按钮的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>

应当指出的是,这是创建轮RECT /接壤的意见,甚至是iOS的7不久的首选方式
萨科Miari

2
我制作了一个与按下时的动画外观相同的库。希望对您有所
yhpark 2014年

您好,我遇到了麻烦,我只需要在按钮的右上角和Botton的右角四舍五入,该怎么办?请提前提示感谢
Harshit戈埃尔

90

如果您非常喜欢在iOS的UI设计中使用情节提要。.您可以设置转角半径(以及dima答案中提到的其他任何参数-不幸的是,不是颜色,因为它是CGColor,而Apple目前不设置颜色)在情节提要的identity inspector->中的弹出菜单中有该选项,user defined runtime attributes如下所示:

在此处输入图片说明

奖金: 您使用运行时属性的UIButton占位符文本颜色(参见这里),并改变字体UILabelUITextField并且UIButton还有(见这里


3
啊!请注意,您不能在界面构建器中设置borderColor的颜色。只有“颜色”的类型。有没有一个类型CGColor -所以很遗憾你不能像这样做!(如果您想要“黑色”作为CGColor,则可以做到!)
Fattie

它适用于拐角半径,但不适用于borderWidth和borderColor
2014年

17

对于标准iOS控制元件喜欢UIButtonUILabel你应该使用UIView tintColor属性:

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

8

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

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

创建一个自定义视图,该视图绘制一个圆角矩形并将其放置在按钮上。在此处使用搜索功能搜索绘制圆角矩形。通过绘制具有定义的半径(角)和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

在此处输入图片说明

在此处输入图片说明

希望对别人有帮助


1
确实没有必要。您可以使用UIButton的底层CALayer轻松添加边框/框架,有关说明,请参见我的答案。
Dima

1
嗯,我记得,我使用了自画图来绘制渐变。
AlexWien

2
已更新,以限制高级图纸的答案
AlexWien 2013年

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

1
我的解决方案似乎有些过时,现在您有了UIBezierPath可以为您解决这个问题。(但我更倾向于手动绘制4条弧线和线的源代码)
AlexWien


2

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

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

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

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

KeyPath layer.borderUIColor类型color值所需的颜色。

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

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

随机斑点

对于设置图层的背景颜色属性,我也做过同样的事情,但是在上述项目中却没有。


0

对于Duncan C对abbood答案的扩展的快速版本:

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

0

使用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)且处于highlighted状态时,自定义按钮在正常状态下的显示方式。

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.