当我们向左或向右移动 slider 时，是否有任何方法可以在 swift ios 中实现前后视图功能以进行并排图像比较？

Question

附上视频在这里

我想在此处创建并排图像比较图像的前后视图

Answer 1

您可以使用图层蒙版执行此操作。

本质上：

private let maskLayer = CALayer()
maskLayer.backgroundColor = UIColor.black.cgColor
leftImage.layer.mask = maskLayer
var r = bounds
r.size.width = bounds.width * pct
maskLayer.frame = r

这将“剪辑”图像视图并仅显示蒙版层覆盖的部分。

这是一个完整的例子......

使用这些“之前”（左侧）和“之后”（右侧）图像：

使用此示例自定义视图：

class RevealImageView: UIImageView {
    
    public var leftImage: UIImage? {
        didSet {
            if let img = leftImage {
                leftImageLayer.contents = img.cgImage
            }
        }
    }
    public var rightImage: UIImage? {
        didSet {
            if let img = rightImage {
                self.image = img
            }
        }
    }
    
    // private properties
    private let leftImageLayer = CALayer()
    private let maskLayer = CALayer()
    private let lineView = UIView()
    private var pct: CGFloat = 0.5 {
        didSet {
            updateView()
        }
    }

    convenience init() {
        self.init(frame: .zero)
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        // any opaque color
        maskLayer.backgroundColor = UIColor.black.cgColor
        leftImageLayer.mask = maskLayer
        // the "reveal" image layer
        layer.addSublayer(leftImageLayer)
        
        // the vertical line
        lineView.backgroundColor = .lightGray
        addSubview(lineView)
        
        isUserInteractionEnabled = true
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let t = touches.first
        else { return }
        let loc = t.location(in: self)
        pct = loc.x / bounds.width
    }
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let t = touches.first
        else { return }
        let loc = t.location(in: self)
        pct = loc.x / bounds.width
    }
    
    private func updateView() {
        // move the vertical line to the touch point
        lineView.frame = CGRect(x: bounds.width * pct, y: bounds.minY, width: 1, height: bounds.height)
        
        // update the "left image" mask to the touch point
        var r = bounds
        r.size.width = bounds.width * pct
        
        // disable layer animation
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        maskLayer.frame = r
        CATransaction.commit()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        leftImageLayer.frame = bounds
        updateView()
    }
}

这个简单的例子 controller：

class RevealImageTestVC: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let leftIMG = UIImage(named: "before"),
              let rightIMG = UIImage(named: "after")
        else {
            return
        }

        let revealView = RevealImageView()
        revealView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(revealView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            revealView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            revealView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            revealView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            // give reveal view the same aspect ratio as the image
            revealView.heightAnchor.constraint(equalTo: revealView.widthAnchor, multiplier: leftIMG.size.height / leftIMG.size.width),
        ])
        
        revealView.leftImage = leftIMG
        revealView.rightImage = rightIMG
    }
    
}

我们得到了这个 - 垂直线和图像的“可见”部分将随着您的触摸和拖动而移动：