Question

我很难创建UI。我试图创建自定义视图，但是我什至看不到该视图的背景。这是我的示例代码，我从另一篇文章中摘下来，但是我不知道如何将其更改为我的情况。

我确实将 SnapKit 用于我的UI元素。

我的视图：

lazy var greenView: CurvedView = {
    let view = CurvedView()
    view.backgroundColor = #colorLiteral(red: 0.08778516203, green: 0.7643524408, blue: 0.1997725368, alpha: 1)
    DispatchQueue.main.async {
        view.snp.makeConstraints{ (make) -> Void in
            make.top.equalTo(self.shipView.snp.bottom).offset(100)
            make.left.right.equalTo(self.scrollContentView)
            make.height.equalTo(200)
        }
    }
    return view
}()

试图创建自定义视图：

class CurvedView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)

        StyleKitName.drawCanvas1(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400), resizing: .aspectFit)
        backgroundColor = .red
    }

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

    }
}

更新带有PaintCode的绿色customView

    public class StyleKitName : UIView {

    //// Drawing Methods

    @objc dynamic public class func drawCanvas1(frame targetFrame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120), resizing: ResizingBehavior = .aspectFit) {
        //// General Declarations
        let context = UIGraphicsGetCurrentContext()!

        //// Resize to Target Frame
        context.saveGState()
        let resizedFrame: CGRect = resizing.apply(rect: CGRect(x: 0, y: 0, width: 240, height: 120), target: targetFrame)
        context.translateBy(x: resizedFrame.minX, y: resizedFrame.minY)
        context.scaleBy(x: resizedFrame.width / 240, y: resizedFrame.height / 120)


        //// Color Declarations
        let color = #colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
        let color2 = #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)

        //// Rectangle Drawing
        let rectanglePath = UIBezierPath()
        rectanglePath.move(to: CGPoint(x: 48, y: 103))
        rectanglePath.addLine(to: CGPoint(x: 191, y: 103))
        rectanglePath.addLine(to: CGPoint(x: 191, y: 9))
        rectanglePath.addLine(to: CGPoint(x: 48, y: 9))
        rectanglePath.addLine(to: CGPoint(x: 48, y: 103))
        rectanglePath.close()
        color.setFill()
        rectanglePath.fill()


        //// Bezier Drawing
        let bezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 96, y: 9))
        bezierPath.addCurve(to: CGPoint(x: 110, y: 15), controlPoint1: CGPoint(x: 104.11, y: 9.42), controlPoint2: CGPoint(x: 107, y: 12))
        bezierPath.addCurve(to: CGPoint(x: 123, y: 23), controlPoint1: CGPoint(x: 114.16, y: 19.16), controlPoint2: CGPoint(x: 115.63, y: 23))
        bezierPath.addCurve(to: CGPoint(x: 136, y: 15), controlPoint1: CGPoint(x: 129.95, y: 23), controlPoint2: CGPoint(x: 132, y: 19))
        bezierPath.addCurve(to: CGPoint(x: 152, y: 9), controlPoint1: CGPoint(x: 139.3, y: 11.7), controlPoint2: CGPoint(x: 145.35, y: 9))
        bezierPath.addCurve(to: CGPoint(x: 96, y: 9), controlPoint1: CGPoint(x: 166.7, y: 9), controlPoint2: CGPoint(x: 96, y: 9))
        bezierPath.addLine(to: CGPoint(x: 148.61, y: 9))
        color2.setFill()
        bezierPath.fill()

        context.restoreGState()

    }




    @objc(StyleKitNameResizingBehavior)
    public enum ResizingBehavior: Int {
        case aspectFit /// The content is proportionally resized to fit into the target rectangle.
        case aspectFill /// The content is proportionally resized to completely fill the target rectangle.
        case stretch /// The content is stretched to match the entire target rectangle.
        case center /// The content is centered in the target rectangle, but it is NOT resized.

        public func apply(rect: CGRect, target: CGRect) -> CGRect {
            if rect == target || target == CGRect.zero {
                return rect
            }

            var scales = CGSize.zero
            scales.width = abs(target.width / rect.width)
            scales.height = abs(target.height / rect.height)

            switch self {
            case .aspectFit:
                scales.width = min(scales.width, scales.height)
                scales.height = scales.width
            case .aspectFill:
                scales.width = max(scales.width, scales.height)
                scales.height = scales.width
            case .stretch:
                break
            case .center:
                scales.width = 1
                scales.height = 1
            }

            var result = rect.standardized
            result.size.width *= scales.width
            result.size.height *= scales.height
            result.origin.x = target.minX + (target.width - result.width) / 2
            result.origin.y = target.minY + (target.height - result.height) / 2
            return result
        }
    }
}

https://d.radikal.ru/d30/1902/c5/c07cac5532d0.png

Answer 1

这是使用PaintCode生成的代码的基本方法。

class StyleView: UIView {
    override func draw(_ rect: CGRect) {
        StyleKitName.drawCanvas1()
    }
}
class StyleTestViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        let v = StyleView()
        v.frame = CGRect(x: 0, y: 0, width: 240, height: 120)
        v.center = view.center
        v.backgroundColor = .blue
        view.addSubview(v)

    }

}

结果：

带有弧形中心的Swift 4视图

1 个答案: