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

Question

我对Swift中的绘图并不是很了解,但我希望创建一个与广场略有不同的应用背景的一部分.请参阅下面的图片,了解我正在尝试制作的内容:

这个想法是,它将位于屏幕的顶部,只不过是背景.它会拉伸到屏幕的一半.然后我会在顶部等处添加图像.我需要在广场底部的点始终位于屏幕中间.

我可以通过代码在Swift中创建这个形状/ UIView吗？如果是这样,怎么样？

或者,将它创建为图像并以此方式执行是否更好？

Answer 1

我可以通过代码在Swift中创建这个形状/ UIView吗？如果是这样,怎么样？

视图总是矩形的,但视图的内容可以是任何形状,它的背景可以是透明的,因此视图的可见部分可以是您可以绘制的任何内容.

有很多方法可以在iOS中绘制内容.通常最好从最适合您的工具开始,并在需要更多控制时向下移动到较低级别.考虑到这一点,我建议首先创建一个使用a绘制五边形的视图UIBezierPath.这个代码非常简单:

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

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

    override func drawRect(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.moveToPoint(p1)
        path.addLineToPoint(p2)
        path.addLineToPoint(p3)
        path.addLineToPoint(p4)
        path.addLineToPoint(p5)
        path.closePath()

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

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

如果要PentagonView在坐标(100,200)处向视图控制器的主视图添加150x150px ,可以将以下内容添加到viewDidLoad():

let pg = PentagonView(frame:CGRect(100, 200, 150, 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()
    }
}