Отделка UIView с 2 кругами - PullRequest
Новая
       83

Отделка UIView с 2 кругами

2 голосов
/ 23 октября 2019

У меня есть UIView, и я хочу обрезать его двумя кругами, как я нарисовал (извините за качество).

Мой код: 

final class TrimmedView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)

        let size = CGSize(width: 70, height: 70)
        let innerRadius: CGFloat = 366.53658283002471
        let innerBottomRadius: CGFloat = 297.88543112651564

        let path = UIBezierPath()
        path.move(to: CGPoint(x: -innerRadius + (size.width / 2), y: innerRadius))
        path.addArc(withCenter: CGPoint(x: size.width / 2, y: innerRadius), radius: innerRadius, startAngle: CGFloat.pi, endAngle: 0, clockwise: true)
        path.move(to: CGPoint(x: -innerBottomRadius + (size.width / 2), y: innerBottomRadius))
        path.addArc(withCenter: CGPoint(x: size.width / 2, y: innerBottomRadius), radius: innerBottomRadius, startAngle: 0, endAngle: CGFloat.pi, clockwise: true)

        path.close()
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.shadowPath = path.cgPath
        layer.mask = shapeLayer
    }

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

ViewController: 

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    let view = UIView(frame: CGRect(origin: CGPoint(x: (self.view.bounds.width - 70) / 2, y: (self.view.bounds.height - 70) / 2), size: CGSize(width: 70, height: 70)))
    view.backgroundColor = .red
    self.view.addSubview(view)
    let view1 = TrimmedView(frame: view.frame)
    view1.backgroundColor = .yellow
    self.view.addSubview(view1)
}

Я получил результат . Мне кажется, что верхняя обрезка работает, а нижняя - нет, и я не знаю почему. Любая помощь будет оценена. Благодаря.

1 Ответ

2 голосов
/ 23 октября 2019

Вот пользовательский вид, который должен дать вам то, что вы хотите.

UIBezierPath использует QuadCurves для верхней "выпуклой" дуги и нижней "вогнутой" дуги.

Этопомечен @IBDesignable, так что вы можете увидеть его во время разработки в IB / Раскадровка. «Высота» дуги и цвет заливки устанавливаются как @IBInspectable, поэтому вы также можете настроить эти значения во время разработки.

Для использования в раскадровке:

  • Добавьте обычный UIView
  • , измените класс на BohdanShapeView
  • на панели инспектора атрибутов, установите смещение дуги и цвет заливки
  • , установите фонцвет как при обычном просмотре (вы, вероятно, будете использовать прозрачный)

Результат:

enter image description here

enter image description here

Чтобы использовать его с помощью кода: 

let view1 = BohdanShapeView(frame: view.frame)
view1.fillColor = .systemTeal
view1.arcOffset = 10
self.view.addSubview(view1)

Вот класс: 

@IBDesignable
class BohdanShapeView: UIView {

    @IBInspectable var arcOffset: CGFloat = 0.0
    @IBInspectable var fillColor: UIColor = UIColor.white

    let shapeLayer = CAShapeLayer()

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

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

    func commonInit() -> Void {
        // add the shape layer
        layer.addSublayer(shapeLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // fill color for the shape
        shapeLayer.fillColor = self.fillColor.cgColor

        let width = bounds.size.width
        let height = bounds.size.height

        let bezierPath = UIBezierPath()

        // start at arcOffset below top-left
        bezierPath.move(to: CGPoint(x: 0.0, y: 0.0 + arcOffset))

        // add curve to arcOffset below top-right
        bezierPath.addQuadCurve(to: CGPoint(x: width, y: 0.0 + arcOffset), controlPoint: CGPoint(x: width * 0.5, y: 0.0 - arcOffset))

        // add line to bottom-right
        bezierPath.addLine(to: CGPoint(x: width, y: height))

        // add curve to bottom-left
        bezierPath.addQuadCurve(to: CGPoint(x: 0.0, y: height), controlPoint: CGPoint(x: width * 0.5, y: height - arcOffset * 2.0))

        // close the path
        bezierPath.close()

        shapeLayer.path = bezierPath.cgPath

    }

}
...