CODEWITHSUNDEEP
iosiphoneswiftswift4
amit gupta
amit gupta

Reputation: 1167

Drawing diagonal lines on an UIView from both side

Window grill

create diagonal line from both side like window grill in swift.

How to design window grill for view programmatically(swift4)?

my wrong logic is given below which draw one side diagnal lines which crosses views. 

        let height = view.frame.size.height
    let width  = view.frame.size.width
   let  space = 10
    for i in stride(from: 0, through: 2*Int(width), by: space) {
        view.layer.addSublayer(DesignShape.addLine(fromPoint: CGPoint(x:
            i, y: 0), toPoint: CGPoint(x:CGFloat(i-Int(width)), y: height), color: UIColor.black,lineWidth :2))
    }

DesignShape.addLine is method to draw line between two points using UIBezierPaths.

Upvotes: 1

Views: 1146

Answers (1)

McDonal_11
McDonal_11

Reputation: 4075

I have tried that design with UIBezierPath. This may give some idea to your question.

Coding

@IBOutlet weak var shapeView: UIView!
// CONSTRAINTS top 20, left and right 16, height as 320

override func viewDidAppear(_ animated: Bool) {
   howManyGrillWeNeed(grillCount : 17, grillWidth: 40, grillHeight : 60)
}

func howManyGrillWeNeed(grillCount: Int, grillWidth: CGFloat, grillHeight: CGFloat)
{
    let xPositionDiff = Int((shapeView.frame.width / grillWidth))
    var xPosiitonCount : Int = 0
    var yPosiitonCount : Int = -1

    for i in 0..<grillCount
    {
        if i % xPositionDiff == 0
        {
            xPosiitonCount = 0
            yPosiitonCount = yPosiitonCount + 1
            print("newxLine")
        }
        else
        {
            xPosiitonCount = xPosiitonCount + 1
        }
        let grillVw = UIView(frame: CGRect(x: 0, y: 0, width: grillWidth, height: grillHeight))
        grillVw.backgroundColor = UIColor.white


        grillVw.frame.origin.x = CGFloat(xPosiitonCount) * grillWidth
        grillVw.frame.origin.y = CGFloat(yPosiitonCount) * grillHeight

        let layerWidth = grillWidth
        let layerHeight = grillHeight
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 0, y: layerHeight / 2))

        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: 0))
        bezierPath.addLine(to: CGPoint(x: layerWidth, y: layerHeight / 2))
        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: 0, y: layerHeight / 2))


        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.orange.cgColor
        shapeLayer.lineWidth = 1.0

        grillVw.layer.addSublayer(shapeLayer)
        //grillVw.layer.mask = shapeLayer

        shapeView.addSubview(grillVw)
    }
}

Output

enter image description here

Upvotes: 1

Related Questions