Question

我尝试翻转带圆角（边框）的视图。

视图的圆角用：

实现

$scope.remove_staged = function(){
    $scope.projects = $scope.projects.filter(proj=> !proj.will_delete);
}

翻转是用

实现的

  private extension UIView {

  func round(corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
    let mask = _round(corners: corners, radius: radius)
    addBorder(mask: mask, borderColor: borderColor, borderWidth: borderWidth)
}

        @discardableResult func _round(corners: UIRectCorner, radius: CGFloat) -> CAShapeLayer {
            let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            self.layer.mask = mask
            return mask
        }

        func addBorder(mask: CAShapeLayer, borderColor: UIColor, borderWidth: CGFloat) {
            let borderLayer = CAShapeLayer()
            borderLayer.path = mask.path
            borderLayer.fillColor = UIColor.clear.cgColor
            borderLayer.strokeColor = borderColor.cgColor
            borderLayer.lineWidth = borderWidth
            borderLayer.frame = bounds
            layer.addSublayer(borderLayer)
        }

    }

当翻转正在运行时，当转换正在运行时，寄宿生不再被舍入。

任何人都知道如何翻转，而不会丢失圆角？

更新

如果我采用this方法，我有几个问题。

翻页现在实现如下：

UIView.transition(with: self, duration: 0.5, options: [.transitionFlipFromRight], animations: {}, completion: {_ in })

问题

动画不像UIView.transition那样顺利
效果镜像视图上的内容 - ＆gt;我不需要（图片如下）
旋转不会完全结束，因此视图有时会放错位置（下图）

更新：解决方案 我在带有圆角的彩色视图周围添加了一个容器视图，并翻转了容器而不是彩色视图。一切正常！

Answer 1

我的建议是将想要翻转的视图添加到清晰视图并翻转持有它的父级。我认为这与被重新渲染的层有关但不完全确定。这是一个使用CATransition的工作示例，但我猜其他方法也可以。

import UIKit

class ViewController: UIViewController {

    var label = UILabel()
    var flipper = UIView()
    var flipperContainer = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        flipperContainer = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
        flipperContainer.backgroundColor = .clear
        flipperContainer.center = self.view.center
        self.view.addSubview(flipperContainer)

        flipper = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
        flipper.backgroundColor = UIColor.green
        flipper.round(corners: [UIRectCorner.topLeft,UIRectCorner.topRight], radius: 6, borderColor: .white, borderWidth: 1)
        self.flipperContainer.addSubview(flipper)



        //add a label
        label = UILabel(frame: CGRect(x: 0, y: 0, width: flipper.bounds.width, height: flipper.bounds.height))
        label.textAlignment = .center
        label.center = flipper.center
        label.textColor = UIColor.white
        label.text = "7"

        flipper.addSubview(label)

        self.view.backgroundColor = UIColor.black


        let flipButton = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width - 20, height: 50))
        flipButton.center = flipperContainer.center
        flipButton.center.y = flipperContainer.center.y + flipperContainer.bounds.height/2 + 20
        flipButton.addTarget(self, action: #selector(ViewController.pressed(sender:)), for: .touchUpInside)
        flipButton.setTitle("Flip", for: .normal)
        flipButton.setTitleColor(.white, for: .normal)

        self.view.addSubview(flipButton)
    }

    func pressed(sender:UIButton) {

        let trans = CATransition()
        trans.duration = 1.0
        trans.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        trans.type = "flip"
        trans.subtype = kCATransitionFromRight
        //perform flip but on container
        flipperContainer.layer.add(trans, forKey: nil)

        if flipper.backgroundColor == UIColor.green{
            flipper.backgroundColor = .blue
            label.text = "20"
        }else{
            flipper.backgroundColor = .green
            label.text = "7"
        }
    }

}

我正在使用你的扩展来绕过角落。我试图复制我认为你想要做的事情。

Answer 2

最简单的方法是将视图的背景设置为所需颜色的图像，图像中的边角为圆角，而不是将背景设置为颜色并使代码中的角变圆。 / p>

用圆角翻转UIView

2 个答案: