Swift UITableView鋸齒邊框

Question

我想實現UITableView的這個方面：https://www.dropbox.com/s/bcp86myyjgek1kt/Screenshot%202016-11-04%2014.04.14.png?dl=0，我被卡住了。
我跟着阿圖爾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 
} 

我希望這可以幫助你，這個代碼的工作，並進行了測試

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

下面是代碼的斯威夫特3操場，如果有人想在行動檢查出該解決方案：

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