自定义UIView作为背景

Question

我想用UIView创建深灰色曲线作为设计。

然而，当我尝试设置cornerRadius并且我知道cornerRadius仅用于角落时，我认为我做错了。也许我不知道实际上还有另一种方法，想知道是否有一种简单的方法可以绕过。我这样做的方式是，我在StoryBoard上创建了一个UIView，并创建了一个可可触摸类，它是UIView的子类，并配置了自定义类来继承这些特征。

这里真的很感激任何建议。

Answer 1

这条曲线不是您使用cornerRadius可以实现的。您可以通过两种简单的方式获得所需内容：预渲染UIImage或自定义CAShapeLayer。

选项1：UIImage背景

您可以在自己喜欢的图像编辑器中创建背景图像，然后将其设置为居中背景：

// create the UIImageView to display the image
let backgroundImageView = UIImageView()
backgroundImageView.image = UIImage(named: "background")
backgroundImageView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(backgroundImageView)

// create constraints to position the UIImageView and apply them
let horizontalConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let verticalConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0)
view.addConstraints([horizontalConstraint, verticalConstraint])

将其添加到viewDidLoad()您希望拥有背景的UIViewController。

您需要创建适合您所定位的最大屏幕的背景图片，并将其添加到您应用的资源中。您可以尝试设置大小的约束，以便在每个屏幕上以您希望的方式获得它。

此方法的优点是，如果您希望背景更精细，可以只编辑图像。

选项2：CAShapeLayer背景

对于您的特定情况（灰色曲线），您可以使用矢量轻松完成：

// decide on size of ellipse and how to center it
let ellipseWidth:CGFloat = view.frame.width * 7
let ellipseHeight:CGFloat = view.frame.height * 3
let ellipseTop:CGFloat = 100
let ellipseLeft:CGFloat = -ellipseWidth / 2 + view.frame.width / 2

// create the ellipse path
let ellipseOrigin = CGPoint(x:ellipseLeft,y:ellipseTop)
let ellipseSize = CGSize(width: ellipseWidth, height: ellipseHeight)
let ellipsePath = CGPath(ellipseIn: CGRect(origin: ellipseOrigin, size: ellipseSize), transform: nil)

// create the shape layer
let shapeLayer = CAShapeLayer()
shapeLayer.frame = view.frame
shapeLayer.fillColor = UIColor.darkGray.cgColor
shapeLayer.path = ellipsePath
view.layer.addSublayer(shapeLayer)

您可能需要尝试椭圆的比例才能使其看起来恰到好处。 7x3看起来非常接近你的例子。

如果你想变得更加漂亮，你可以添加其他形状，笔画，渐变等，或者你可以使用UIBezierPath来获得完全正确的曲线。

还要注意这项工作，你需要

import CoreGraphics

位于文件顶部。