更改 UIView 边框的形状

Posted 2023-03-13

【中文标题】更改 UIView 边框的形状

【英文标题】：Changing the shape of a UIView border

【发布时间】：2017-04-26 01:42:27

【问题描述】：

我想知道如何实现 UIView 的波浪状边框。这可能仅通过 UIView 实现吗？或者通过 UIImageView 创建这种外观是要走的路吗？

一个例子可能类似于：

感谢您的帮助！

【问题讨论】：

虽然使用 imageView 是一种选择，但也有一些缺点。 a）添加大量图像会增加您的应用程序大小 b）您需要根据设备大小维护多个版本的图像（例如：运行时您需要为 ipad 和 iphone 提供单独的图像。）我会考虑使用 UIView 和绘制形状。

【参考方案1】：

这是一个基于代码的解决方案，不需要任何图像。这将创建一个自定义视图，使用 UIBezierPath 创建正弦波。

import UIKit

class WavyView: UIView 
    override init(frame: CGRect) 
        super.init(frame: frame)
    

    required init?(coder aDecoder: NSCoder) 
        return nil // TODO
    

    override func draw(_ rect: CGRect) 
        // Fill the whole background with the darkest blue color
        UIColor(red: 0.329, green: 0.718, blue: 0.875, alpha: 1).set()
        let bg = UIBezierPath(rect: rect)
        bg.fill()

        // Add the first sine wave filled with a very transparent white
        let top1: CGFloat = 17.0
        let wave1 = wavyPath(rect: CGRect(x: 0, y: top1, width: frame.width, height: frame.height - top1), periods: 1.5, amplitude: 21, start: 0.55)
        UIColor(white: 1.0, alpha: 0.1).set()
        wave1.fill()

        // Add the second sine wave over the first
        let top2: CGFloat = 34.0
        let wave2 = wavyPath(rect: CGRect(x: 0, y: top2, width: frame.width, height: frame.height - top2), periods: 1.5, amplitude: 21, start: 0.9)
        UIColor(white: 1.0, alpha: 0.15).set()
        wave2.fill()

        // Add the text
        let paraAttrs = NSMutableParagraphStyle()
        paraAttrs.alignment = .center
        let textRect = CGRect(x: 0, y: frame.maxY - 64, width: frame.width, height: 24)
        let textAttrs = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: 20), NSForegroundColorAttributeName: UIColor(white: 1.0, alpha: 0.9), NSParagraphStyleAttributeName: paraAttrs]
        ("New user? Register here." as NSString).draw(in: textRect, withAttributes: textAttrs)
    

    // This creates the desired sine wave bezier path
    // rect is the area to fill with the sine wave
    // periods is how may sine waves fit across the width of the frame
    // amplitude is the height in points of the sine wave
    // start is an offset in wavelengths for the left side of the sine wave
    func wavyPath(rect: CGRect, periods: Double, amplitude: Double, start: Double) -> UIBezierPath 
        let path = UIBezierPath()

        // start in the bottom left corner
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))

        let radsPerPoint = Double(rect.width) / periods / 2.0 / Double.pi
        let radOffset = start * 2 * Double.pi
        let xOffset = Double(rect.minX)
        let yOffset = Double(rect.minY) + amplitude
        // This loops through the width of the frame and calculates and draws each point along the size wave
        // Adjust the "by" value as needed. A smaller value gives smoother curve but takes longer to draw. A larger value is quicker but gives a rougher curve.
        for x in stride(from: 0, to: Double(rect.width), by: 6) 
            let rad = Double(x) / radsPerPoint + radOffset
            let y = sin(rad) * amplitude

            path.addLine(to: CGPoint(x: x + xOffset, y: y + yOffset))
        

        // Add the last point on the sine wave at the right edge
        let rad = Double(rect.width) / radsPerPoint + radOffset
        let y = sin(rad) * amplitude

        path.addLine(to: CGPoint(x: Double(rect.maxX), y: y + yOffset))

        // Add line from the end of the sine wave to the bottom right corner
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // Close the path
        path.close()

        return path
    


// This creates the view with the same size as the image posted in the question
let wavy = WavyView(frame: CGRect(x: 0, y: 0, width: 502, height: 172))

在 Swift Playground 中运行此代码的结果如下：

显然，您可以调整上面代码中的任何值来调整结果。

【讨论】：

好方法！

这也可以用来制作动画.. :-) +1。如果解释如何为这些波浪设置动画，我会对某人有所帮助。

【参考方案2】：

最简单的方法是使用UIImageView。但是，也可以为UIView 创建自定义边框，但这需要大量代码来绘制形状。

【讨论】：

很高兴为您提供帮助