如何在 Swift 中创建独特的形状或 UIViews

Question

我真的不知道在 Swift 中绘图，但我希望创建与正方形略有不同的应用程序背景的一部分。 请参阅下图了解我正在尝试制作的内容：

这个想法是，这将位于屏幕的顶部，只不过是一个背景。 它会延伸到屏幕的一半。 然后我将在顶部添加一个图像等。我需要正方形底部的点始终位于屏幕中间。

我可以通过代码在 Swift 中制作这个形状/UIView 吗？ 如果是这样，如何？

或者，将其创建为图像并以这种方式进行是否更好？

Answer 1

我可以通过代码在 Swift 中制作这个形状/UIView 吗？ 如果是这样，如何？

视图始终是矩形的，但是视图的内容可以是任何形状，并且它的背景可以是透明的，因此视图的可见部分可以是您可以绘制的任何内容。

在 iOS 中有很多方法可以绘制一些东西。 通常最好从对您有用的最高级别工具开始，并在您需要更多控制时向下移动到较低级别。 考虑到这一点，我建议首先创建一个使用UIBezierPath绘制五边形的UIBezierPath 。 这个（Swift 5）代码非常简单：

class PentagonView : UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size
        let h = size.height * 0.85      // adjust the multiplier to taste

        // calculate the 5 points of the pentagon
        let p1 = self.bounds.origin
        let p2 = CGPoint(x:p1.x + size.width, y:p1.y)
        let p3 = CGPoint(x:p2.x, y:p2.y + h)
        let p4 = CGPoint(x:size.width/2, y:size.height)
        let p5 = CGPoint(x:p1.x, y:h)

        // create the path
        let path = UIBezierPath()
        path.move(to: p1)
        path.addLine(to: p2)
        path.addLine(to: p3)
        path.addLine(to: p4)
        path.addLine(to: p5)
        path.close()

        // fill the path
        UIColor.red.set()
        path.fill()
    }
}

现在您可以在 UI 的任何位置使用该视图：

如果您想在坐标 (100, 200) 处将 150x150px PentagonView添加到视图控制器的主视图中，您可以将以下内容放入viewDidLoad() ：

let pg = PentagonView(frame:CGRect(x:100, y:200, width:150, height:150))
self.view.addSubview(pg)

或者，您也可以将PentagonView添加到故事板中的某个视图中，方法是放入一个大小合适的UIView ，然后将它的类更改为PentagonView 。

或者，将其创建为图像并以这种方式进行是否更好？

如果您已经完全描述了您的要求，那么不，我不这么认为：图像本身可能比绘制它的代码大得多，而且我上面给出的代码适用于您的任何尺寸选择。 另一方面，如果您要添加大量复杂的细节，并且图像只需要以一种尺寸显示，那么在绘图程序中创建一次并将其存储为图像可能会更容易. 就像我上面说的，在 iOS 中有很多绘图选项； 您选择哪个应根据您的需要确定。

Answer 2

Caleb 的回答更新为Swift 5 ：

class PentagonView : UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = .clear
    }

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size
        let h = size.height * 0.85      // adjust the multiplier to taste

        // calculate the 5 points of the pentagon
        let p1 = self.bounds.origin
        let p2 = CGPoint(x:p1.x + size.width, y:p1.y)
        let p3 = CGPoint(x:p2.x, y:p2.y + h)
        let p4 = CGPoint(x:size.width/2, y:size.height)
        let p5 = CGPoint(x:p1.x, y:h)

        // create the path
        let path = UIBezierPath()
        path.move(to: p1)
        path.addLine(to: p2)
        path.addLine(to: p3)
        path.addLine(to: p4)
        path.addLine(to: p5)
        path.close()

        // fill the path
        UIColor.red.set()
        path.fill()
    }
}

Answer 3

解决这个问题的最好方法不是创建一个视图（ UIView ）而是一个层（ CAShapeLayer ）。 您可以从路径创建 CAShapeLayer，从而使用矢量（而不是位图）描述您的形状。

有许多关于 CAShapeLayer 的教程将向您展示实现这一目标的代码。

Answer 4

如果您将形状文件中的图像加载到 UIImageView 上，这可能是最好的，特别是如果它只是一个背景。 然后，您可以将视图的底部限制在应用程序的中间。 但是，您也可以对视图的 CALayer 属性进行一些调整以实现您的效果。