Question

我有一个屏幕，我需要在imageview后添加对角线切割视图。

以下是我需要制作的屏幕截图，

所以请帮助我创建这种观点。

我已提到this

和this问题。

但我想知道是否有更可靠的方法来实现这一目标。

提前致谢。

Answer 1

为了做到这一点，您可以在故事板中添加一个视图，并将视图的类设置为一个自定义类，它将视图的布局更改为对角线切割。

自定义类应如下所示：

//
//  CustomShapeView.swift
//
//
//  Created by Umar Farooque on 17/09/17.
//  Copyright © 2017 ufocorp. All rights reserved.
//

import UIKit
@IBDesignable
class CustomShapeView: UIView {

    @IBInspectable var color : UIColor? = UIColor.gray {
        didSet {
            //            self.layer.backgroundColor = self.color?.cgColor
        }

    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
    }

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

    }

    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
        //get the size of the view
        let size = self.bounds.size
        //get 4 points for the shape layer
        let p1 = self.bounds.origin
        let p2 = CGPoint(x: p1.x + size.width, y: p1.y)
        let p3 = CGPoint(x: p2.x, y: size.height)
        let p4 = CGPoint(x: p1.x, y: size.height - 30)

        //create the path
        let path = UIBezierPath()
        path.move(to: p1)
        path.addLine(to: p2)
        path.addLine(to: p3)
        path.addLine(to: p4)
        path.close()
        (color ?? UIColor.gray).set()
        path.fill()

    }

}

结果将是这样的：

Answer 2

使用一些响应，我用点击手势来完成此操作（在我的情况下为三角形）：

类三角形视图


protocol TriangleViewProtocol {
    func shapeTapped()
    func outShapeTapped(touch: UITouch)
}

class TriangleView : UIView {
    var color: CGColor = UIColor.red.cgColor

    var delegate: TriangleViewProtocol?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {
        // Draw a shape with 3 sides
        self.layer.sublayers?.forEach({ $0.removeFromSuperlayer() })
        do {
            let rectangleLayer = try getPathPayer(arrPathPoints: [
                CGPoint(x: rect.maxX, y: rect.minY),
                CGPoint(x: rect.maxX, y: rect.maxY),
                CGPoint(x: rect.minX, y: rect.maxY)
                ])
            self.layer.addSublayer(rectangleLayer)
        } catch {
            debugPrint(error)
        }
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // Get tap and calculate what side of view is touched
        guard let touch = touches.first,
            let sublayers = self.layer.sublayers as? [CAShapeLayer]else { return }
        let point = touch.location(in: self)
        for layer in sublayers{
            // On my case I need to get two actions
            // one if user tap on blue side
            // and other outside blue for send this actions to bellow views
            if let path = layer.path, path.contains(point) {
                self.delegate?.shapeTapped()
            }else {
                self.delegate?.outShapeTapped(touch: touch)
            }
        }
    }

    func getPathPayer(arrPathPoints:[CGPoint]) throws -> CAShapeLayer {
        enum PathError : Error{
            case moreThan2PointsNeeded
        }

        guard arrPathPoints.count > 2 else {
            throw PathError.moreThan2PointsNeeded
        }

        let lineColor = UIColor.black
        let lineWidth: CGFloat = 2
        let path = UIBezierPath()
        let pathLayer = CAShapeLayer()

        for (index,pathPoint) in arrPathPoints.enumerated() {
            switch index {
            case 0:
                path.move(to: pathPoint)

            case arrPathPoints.count - 1:
                path.addLine(to: pathPoint)
                path.close()

            default:
                path.addLine(to: pathPoint)
            }
        }

        pathLayer.path = path.cgPath
        pathLayer.strokeColor = lineColor.cgColor
        pathLayer.lineWidth = lineWidth
        pathLayer.fillColor = self.color

        return pathLayer
    }
}

为我的控制器分类

extension FirstView: TriangleViewProtocol {
    func shapeTapped() {
      // Action on blue side
    }
    func outShapeTapped(touch: UITouch) {
      //send outside actions to bellow view
        guard let filteredView = self.view.subviews.filter({ type(of: $0) != TriangleView.self && type(of: $0) == UIStackView.self }).first,
            let view = filteredView.hitTest(touch.location(in: filteredView), with: nil),
            let button = view as? UIButton else { return }
        button.sendActions(for: .touchUpInside)
    }
}

我的.xib： 现在，其他三角形的子视图（在我的情况下为stackView）在三角形的侧面轻敲时都会收到分接头。

如何创建对角剪切视图以在配置文件屏幕中使用？

2 个答案: