我在一个应用程序上工作了几年,收到了一个简单的设计请求:在UIView上圆角并添加投影。做以下所给的事
我想要一个自定义的UIView…:我只是想要一个空白的白色视图与圆角和光滴阴影(没有照明效果)。我可以逐个执行这些操作,但通常会发生clipToBounds/maskToBounds冲突。
我在一个应用程序上工作了几年,收到了一个简单的设计请求:在UIView上圆角并添加投影。做以下所给的事
我想要一个自定义的UIView…:我只是想要一个空白的白色视图与圆角和光滴阴影(没有照明效果)。我可以逐个执行这些操作,但通常会发生clipToBounds/maskToBounds冲突。
当前回答
当为容器视图分配阴影路径时,我使用以下技巧解决了这个问题:
[UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12]
请注意,阴影的路径是一个圆角矩形,与单元格包含的背景具有相同的角半径:
//this is the border for the UIView that is added to a cell
cell.backgroundView.layer.cornerRadius = 12;
cell.backgroundView.layer.masksToBounds = YES;
cell.backgroundView.layer.borderColor = [UIColor darkGrayColor].CGColor;
cell.backgroundView.layer.borderWidth = 1;
//this is the shadow around the cell itself (cannot have round corners with borders and shadow, need to use two views
cell.layer.shadowRadius = 2;
cell.layer.cornerRadius = 12;
cell.layer.masksToBounds = NO;
[[cell layer] setShadowColor:[[UIColor darkGrayColor] CGColor]];
[[cell layer] setShadowOffset:CGSizeMake(0.0,0.0)];
[[cell layer] setShadowOpacity:1.0];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12];
[[cell layer] setShadowPath:[path CGPath]];
其他回答
下面的代码片段为UIView v添加了边框、边框半径和投影:
// border radius
[v.layer setCornerRadius:30.0f];
// border
[v.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[v.layer setBorderWidth:1.5f];
// drop shadow
[v.layer setShadowColor:[UIColor blackColor].CGColor];
[v.layer setShadowOpacity:0.8];
[v.layer setShadowRadius:3.0];
[v.layer setShadowOffset:CGSizeMake(2.0, 2.0)];
Swift 5版本:
// border radius
v.layer.cornerRadius = 30.0
// border
v.layer.borderColor = UIColor.lightGray.cgColor
v.layer.borderWidth = 1.5
// drop shadow
v.layer.shadowColor = UIColor.black.cgColor
v.layer.shadowOpacity = 0.8
v.layer.shadowRadius = 3.0
v.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
您可以根据需要调整设置。
此外,将QuartzCore框架添加到您的项目中,并:
#import <QuartzCore/QuartzCore.h>
请看我关于masksToBounds的其他答案。
Note
这可能并不适用于所有情况。如果您发现此方法干扰您正在执行的其他绘图操作,请参阅此答案。
一种方法是将带有圆角的视图放到带有投影的视图中。
UIView* roundedView = [[UIView alloc] initWithFrame: frame];
roundedView.layer.cornerRadius = 5.0;
roundedView.layer.masksToBounds = YES;
UIView* shadowView = [[UIView alloc] initWithFrame: frame];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 5.0;
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 1.0;
[shadowView addSubview: roundedView];
然后你可以在任何你想要的地方添加shadowView。
创建UIView的子类
class ShadowView: UIView {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
// corner radius
self.layer.cornerRadius = 10
// border
self.layer.borderWidth = 1.0
self.layer.borderColor = UIColor.black.cgColor
// shadow
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 3, height: 3)
self.layer.shadowOpacity = 0.7
self.layer.shadowRadius = 4.0
}
}
使用. .
如果你特别想为uibutton定制圆角,有很多不同的方法来实现。
下面的代码示例(感谢Erica)很好地概述了所有可能性。
iOS 15之前的圆角按钮
在iOS 15之前,你可以通过设置图层来制作圆角按钮。cornerRadius, backgroundColor和setTitleColor。
let button = UIButton(type: .system)
button.setTitle("Button", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .systemPink
button.layer.cornerRadius = 8
button.contentEdgeInsets = UIEdgeInsets(
top: 10,
left: 20,
bottom: 10,
right: 20
)
胶囊按钮
如果我们增加足够大的角半径值,您可以创建一个胶囊风格的按钮。为了创建一个胶囊风格的按钮,我们设置角半径等于按钮高度的一半。由于按钮的高度可能会根据标题大小或布局而变化,我通常为胶囊样式创建一个UIButton子类。
class CapsuleButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
let height = bounds.height
layer.cornerRadius = height/2
}
}
let capsule = CapsuleButton(type: .system)
capsule.setTitle("Button", for: .normal)
capsule.setTitleColor(.white, for: .normal)
capsule.backgroundColor = .systemPink
capsule.contentEdgeInsets = UIEdgeInsets(
top: 10,
left: 20,
bottom: 10,
right: 20
)
光滑的角落
如果你想复制苹果平滑角,你也可以用拐角曲线属性来做。要创建连续的平滑角,请设置图层。按钮连续的曲线。
let button = UIButton(type: .system)
button.setTitle("Button", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .systemPink
button.layer.cornerRadius = 8
button.layer.cornerCurve = .continuous
button.contentEdgeInsets = UIEdgeInsets(
top: 10,
left: 20,
bottom: 10,
right: 20
)
圆角按钮在iOS 15使用UIButton。配置
在iOS 15中,苹果引入了一种通过UIButton.Configuration自定义按钮的新方法。
var configuration = UIButton.Configuration.filled()
configuration.title = "Button"
configuration.baseBackgroundColor = UIColor.systemPink
configuration.contentInsets = NSDirectionalEdgeInsets(
top: 10,
leading: 20,
bottom: 10,
trailing: 20
)
let button = UIButton(configuration: configuration, primaryAction: nil)
使用cornerStyle控制角的半径
UIButton。配置有许多内置的角样式供您选择。你可以用cornerStyle属性来设置。
configuration.cornerStyle = .small
configuration.cornerStyle = .medium
configuration.cornerStyle = .large
configuration.cornerStyle = .capsule
自定义角半径
如果你想要一些更独特的东西,你可以通过UIBackgroundConfiguration的cornerRadius指定角的半径。
var configuration = UIButton.Configuration.filled()
configuration.title = "Button"
configuration.baseBackgroundColor = UIColor.systemPink
configuration.contentInsets = NSDirectionalEdgeInsets(
top: 10,
leading: 20,
bottom: 10,
trailing: 20
)
configuration.background.cornerRadius = 20
configuration.cornerStyle = .fixed
let button = UIButton(configuration: configuration, primaryAction: nil)
斯威夫特
// corner radius
blueView.layer.cornerRadius = 10
// border
blueView.layer.borderWidth = 1.0
blueView.layer.borderColor = UIColor.black.cgColor
// shadow
blueView.layer.shadowColor = UIColor.black.cgColor
blueView.layer.shadowOffset = CGSize(width: 3, height: 3)
blueView.layer.shadowOpacity = 0.7
blueView.layer.shadowRadius = 4.0
探索选择
问题1:阴影被剪掉了
如果我们希望将子层或子视图(如图像)的内容剪辑到视图的边界,该怎么办?
我们可以用
blueView.layer.masksToBounds = true
(另外,blueView。clipsToBounds = true给出相同的结果。)
但是,哦不!影子也被剪掉了,因为它在边界之外!怎么办呢?怎么办呢?
解决方案
阴影和边界使用单独的视图。基本视图是透明的,并且有阴影。边界视图将它拥有的任何其他子内容剪辑到它的边界。
// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0
// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)
// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)
结果如下:
问题2:表现不佳
添加圆角和阴影可以提高性能。您可以通过为阴影使用预定义的路径并指定它是栅格化来提高性能。下面的代码可以添加到上面的示例中。
baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale
更多细节请看这篇文章。看这里和这里。
我们用Swift 4和Xcode 9测试了这个答案。