Swift UITableView之字形边框

Question

我正在尝试为UITableView实现这方面：https://www.dropbox.com/s/bcp86myyjgek1kt/Screenshot%202016-11-04%2014.04.14.png?dl=0我被卡住了。 我跟着Atul Manwar的回答：

    func applyZigZagEffect(givenView: UIView) {
    let width = givenView.frame.size.width
    let height = givenView.frame.size.height

    let givenFrame = givenView.frame
    let zigZagWidth = CGFloat(7)
    let zigZagHeight = CGFloat(5)
    let yInitial = height-zigZagHeight

    var zigZagPath = UIBezierPath()
    zigZagPath.moveToPoint(CGPointMake(0, 0))
    zigZagPath.addLineToPoint(CGPointMake(0, yInitial))

    var slope = -1
    var x = CGFloat(0)
    var i = 0
    while x < width {
        x = zigZagWidth * CGFloat(i)
        let p = zigZagHeight * CGFloat(slope)
        let y = yInitial + p
        let point = CGPointMake(x, y)
        zigZagPath.addLineToPoint(point)
        slope = slope*(-1)
        i++
    }
    zigZagPath.addLineToPoint(CGPointMake(width, 0))

    var shapeLayer = CAShapeLayer()
    shapeLayer.path = zigZagPath.CGPath
    givenView.layer.mask = shapeLayer
}  

结果不是我要找的那个，因为我只获得了底部边框：Achieved using Atul's answer，我不知道如何为两个边框（底部和顶部）更改它。

试图用图像，但没有正确缩放，我发现这个解决方案更好，但我无法产生顶部边框的效果。 谢谢！

Answer 1

我一直在处理你的问题，这是我的结果，使用此代码，

func applyZigZagEffect(givenView: UIView) {
    let width = givenView.frame.size.width
    let height = givenView.frame.size.height

    let givenFrame = givenView.frame
    let zigZagWidth = CGFloat(7)
    let zigZagHeight = CGFloat(5)
    var yInitial = height-zigZagHeight

    var zigZagPath = UIBezierPath(rect: givenFrame)
    zigZagPath.move(to: CGPoint(x:0, y:0))
    zigZagPath.addLine(to: CGPoint(x:0, y:yInitial))

    var slope = -1
    var x = CGFloat(0)
    var i = 0
    while x < width {
        x = zigZagWidth * CGFloat(i)
        let p = zigZagHeight * CGFloat(slope)
        let y = yInitial + p
        let point = CGPoint(x: x, y: y)
        zigZagPath.addLine(to: point)
        slope = slope*(-1)
        i += 1
    }

    zigZagPath.addLine(to: CGPoint(x:width,y: 0))

    yInitial = 0 + zigZagHeight
    x = CGFloat(width)
    i = 0
    while x > 0 {
        x = width - (zigZagWidth * CGFloat(i))
        let p = zigZagHeight * CGFloat(slope)
        let y = yInitial + p
        let point = CGPoint(x: x, y: y)
        zigZagPath.addLine(to: point)
        slope = slope*(-1)
        i += 1
    }

    var shapeLayer = CAShapeLayer()
    shapeLayer.path = zigZagPath.cgPath
    givenView.layer.mask = shapeLayer
}

我希望这对你有所帮助，这段代码可以运行并经过测试

Edited

使用此方法，您可以获得弯曲的锯齿形而不是线条

class func pathSemiCirclesPathForView(givenView: UIView, ciclesRadius:CGFloat = 4, circlesDistance : CGFloat = 3, top:Bool = true, bottom:Bool = true ) ->UIBezierPath
    {
        let width = givenView.frame.size.width
        let height = givenView.frame.size.height

        let semiCircleWidth = CGFloat(ciclesRadius*2)

        let semiCirclesPath = UIBezierPath()
        semiCirclesPath.move(to: CGPoint(x:0, y:0))

        if(bottom) {
            var x = CGFloat(0)
            var i = 0
            while x < width {
                x = (semiCircleWidth) * CGFloat(i) + (circlesDistance * CGFloat(i))
                let pivotPoint = CGPoint(x: x + semiCircleWidth/2, y: height)
                semiCirclesPath.addArc(withCenter: pivotPoint, radius: ciclesRadius, startAngle: -180 * .pi / 180.0, endAngle: 0 * .pi / 180.0, clockwise: true)
                semiCirclesPath.addLine(to: CGPoint(x: semiCirclesPath.currentPoint.x + circlesDistance, y: height))
                i += 1
            }
        }
        else {
            semiCirclesPath.addLine(to: CGPoint(x: 0, y: height))
            semiCirclesPath.addLine(to: CGPoint(x: width, y: height))
        }

        semiCirclesPath.addLine(to: CGPoint(x:width,y: 0))

        if(top) {
            var x = CGFloat(width)
            var i = 0
            while x > 0 {
                x = width - (semiCircleWidth) * CGFloat(i) - (circlesDistance * CGFloat(i))
                let pivotPoint = CGPoint(x: x - semiCircleWidth/2, y: 0)
                semiCirclesPath.addArc(withCenter: pivotPoint, radius: ciclesRadius, startAngle: 0 * .pi / 180.0, endAngle: -180 * .pi / 180.0, clockwise: true)
                semiCirclesPath.addLine(to: CGPoint(x: semiCirclesPath.currentPoint.x - circlesDistance, y: 0))
                i += 1
            }
        }

        semiCirclesPath.close()

        return semiCirclesPath
    }

结果

Answer 2

如果其他人需要它，我会在这里发布我正在寻找的结果@Reinier Melian的帮助。我将很快发布另一个版本，只定制UITableView的第一个和最后一个单元格。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var customView: UIView!

    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.applyZigZagEffect(givenView: customView)
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func pathZigZagForView(givenView: UIView) ->UIBezierPath
    {
        let width = givenView.frame.size.width
        let height = givenView.frame.size.height

        let givenFrame = givenView.frame
        let zigZagWidth = CGFloat(7)
        let zigZagHeight = CGFloat(5)
        var yInitial = height-zigZagHeight

        let zigZagPath = UIBezierPath(rect: givenFrame.insetBy(dx: 5, dy: 5))
        zigZagPath.move(to: CGPoint(x:0, y:0))
        zigZagPath.addLine(to: CGPoint(x:0, y:yInitial))

        var slope = -1
        var x = CGFloat(0)
        var i = 0
        while x < width
        {
            x = zigZagWidth * CGFloat(i)
            let p = zigZagHeight * CGFloat(slope) - 5
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }

        zigZagPath.addLine(to: CGPoint(x:width,y: 0))

        yInitial = 0 + zigZagHeight
        x = CGFloat(width)
        i = 0
        while x > 0
        {
            x = width - (zigZagWidth * CGFloat(i))
            let p = zigZagHeight * CGFloat(slope) + 5
            let y = yInitial + p
            let point = CGPoint(x: x, y: y)
            zigZagPath.addLine(to: point)
            slope = slope*(-1)
            i += 1
        }
        zigZagPath.close()
        return zigZagPath
    }

    func applyZigZagEffect(givenView: UIView)
    {
        let shapeLayer = CAShapeLayer(layer: givenView.layer)
        givenView.backgroundColor = UIColor.clear
        shapeLayer.path = self.pathZigZagForView(givenView: givenView).cgPath
        shapeLayer.frame = givenView.bounds
        shapeLayer.fillColor = UIColor.red.cgColor
        shapeLayer.masksToBounds = true
        shapeLayer.shadowOpacity = 1
        shapeLayer.shadowColor = UIColor.black.cgColor
        shapeLayer.shadowOffset = CGSize(width: 0, height: 0)
        shapeLayer.shadowRadius = 3

        givenView.layer.addSublayer(shapeLayer)
    }

}

Result

Answer 3

以下是Swift 3游乐场中的代码，如果有人想查看实际的解决方案：

https://gist.github.com/thexande/9f93b3c899af63108415936bf13a43da