iOS App Store带有一个蓝色圆形框的按钮,用于购买/下载应用程序。
在我的应用程序中,您可以下载其他内容,并且我想拥有一个类似的按钮,只是因为它看起来对用户来说很熟悉。
如果您不知道,我的意思是:这些按钮,例如“ $ 3.99”
这怎么可能?
Answers:
您可以操纵按钮的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>
对于您所描述的简单边框,请使用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
希望对别人有帮助
+[UIBezierPath bezierPathWithRoundedRect:cornerRadius:]
使用新的角半径样式。另外,您可以生成单个图像以用于所有按钮,从而提高GPU渲染性能。
为了扩展@abbood的出色答案,实际上可以从IB设置视图图层的边框颜色和背景颜色,但这需要做一些准备工作。
我已经在NSView CALayer + setUIColor.h上创建了一个自定义类别。
设置边框颜色的仅有一种方法setBorderUIColor。它以UIColor作为输入,获取UIColor的基础NSColor并将该颜色应用于视图的图层。
然后,在IB中,您只需添加一个用户定义的运行时属性,如下所示:
KeyPath layer.borderUIColor类型color值所需的颜色。
在运行时,系统调用您的方法,并传入IB中定义的UIColor。类别从UIColor获取CGColor并将其应用于图层。
您可以在名为github的我的github项目中的一个工作项目中看到这一点
对于设置图层的背景颜色属性,我也做过同样的事情,但是在上述项目中却没有。
使用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
状态时,自定义按钮在正常状态下的显示方式。