[UIKit]양쪽 cornerRadius가 다른 cell 구현

그림과 같이 분리선을 기준으로 왼쪽 사각형의 좌측 모서리는 cornerRadius 16, 오른쪽 모서리는 cornerRadius 8을 줘야 되는 디자인이 있었다. 특정 모서리에만 cornerRadius를 주는 것은 그리 어렵지 않아서 이것도 그냥 내장함수같은 게 있겠지? 했으나(내가 못 찾았을지도..) 그런 함수는 존재하지 않았다..

 

그래서 일단 구글링을 통해 필요한 함수들을 UIBezierPath + Extension,  UIView+Extension에 각각 추가해줬다.

extension UIView {

   func roundCorners(leftTop: CGFloat = 0, rightTop: CGFloat = 0, leftBottom: CGFloat = 0, rightBottom: CGFloat = 0) {
        let leftTopSize = CGSize(width: leftTop, height: leftTop)
        let rightTopSize = CGSize(width: rightTop, height: rightTop)
        let leftBottomSize = CGSize(width: leftBottom, height: leftBottom)
        let rightBottomSize = CGSize(width: rightBottom, height: rightBottom)
        let maskedPath = UIBezierPath(for: self.bounds, leftTopSize: leftTopSize, rightTopSize: rightTopSize, leftBottomSize: leftBottomSize, rightBottomSize: rightBottomSize)
        
        let shape = CAShapeLayer()
        shape.path = maskedPath.cgPath
        self.layer.mask = shape
    }
}

 

extension UIBezierPath {
    convenience init(for bounds: CGRect, leftTopSize: CGSize = .zero, rightTopSize: CGSize = .zero, leftBottomSize: CGSize = .zero, rightBottomSize: CGSize = .zero) {
        self.init()
        
        let path = CGMutablePath()
        
        let leftTop: CGPoint = bounds.origin
        let rightTop: CGPoint = CGPoint(x: bounds.maxX, y: bounds.minY)
        let leftBottom: CGPoint = CGPoint(x: bounds.minX, y: bounds.maxY)
        let rightBottom: CGPoint = CGPoint(x: bounds.maxX, y: bounds.maxY)
        
        if leftTopSize != .zero {
            path.move(to: CGPoint(x: leftTop.x + leftTopSize.width, y: leftTop.y))
        } else {
            path.move(to: leftTop)
        }
        
        if rightTopSize != .zero {
            path.addLine(to: CGPoint(x: rightTop.x - rightTopSize.width, y: rightTop.y))
            path.addCurve(to: CGPoint(x: rightTop.x, y: rightTop.y + rightTopSize.height), control1: CGPoint(x: rightTop.x, y: rightTop.y), control2: CGPoint(x: rightTop.x, y: rightTop.y + rightTopSize.height))
        } else {
            path.addLine(to: rightTop)
        }
        
        if rightBottomSize != .zero {
            path.addLine(to: CGPoint(x: rightBottom.x, y: rightBottom.y - rightBottomSize.height))
            path.addCurve(to: CGPoint(x: rightBottom.x - rightBottomSize.width, y: rightBottom.y), control1: CGPoint(x: rightBottom.x, y: rightBottom.y), control2: CGPoint(x: rightBottom.x - rightBottomSize.width, y: rightBottom.y))
        } else {
            path.addLine(to: rightBottom)
        }
        
        if leftBottomSize != .zero {
            path.addLine(to: CGPoint(x: leftBottom.x + leftBottomSize.width, y: leftBottom.y))
            path.addCurve(to: CGPoint(x: leftBottom.x, y: leftBottom.y - leftBottomSize.height), control1: CGPoint(x: leftBottom.x, y: leftBottom.y), control2: CGPoint(x: leftBottom.x, y: leftBottom.y - leftBottomSize.height))
        } else {
            path.addLine(to: leftBottom)
        }
        
        if leftTopSize != .zero {
            path.addLine(to: CGPoint(x: leftTop.x, y: leftTop.y + leftTopSize.height))
            path.addCurve(to: CGPoint(x: leftTop.x + leftTopSize.width, y: leftTop.y), control1: CGPoint(x: leftTop.x, y: leftTop.y), control2: CGPoint(x: leftTop.x + leftTopSize.width, y: leftTop.y))
        } else {
            path.addLine(to: leftTop)
        }
        
        path.closeSubpath()
        cgPath = path
    }
}

 

 

여기까지는 수월했으나 해당 함수를 셀 안에 넣게 되면 스크롤할 때 셀이 재사용되면서 화면에 이상하게 보여지는 현상이 있었다.

대략 이런식으로 view가 구성되어 있는데, 오른쪽 view가 contentContainerView, 왼쪽 view가 StateContainerView이다.

final class CouponCell: UICollecionViewCell {
     private func addViews() {
            addSubview(containerView)
            containerView.addSubviews([contentContainerView,
                                       stateContainerView])
        }
}

 

 

그래서 해당 함수를 layoutSubviews()에 넣었고, layoutSubviews()안에서 각 view들에 대해

layoutIfNeeded() 함수를 호출했더니 cornerRadius가 각각 다른 정상적인 셀들이 출력될 수 있었다.

그리고 가끔 선이 중복되어 보이는 현상이 있어서 removeFromSuperlayer()를 통해 이전 layer를 지우고 다시 그리는 로직을 추가해뒀다. (좋은 방법인지는 모르겠음...)

override func layoutSubviews() {
        super.layoutSubviews()
        contentContainerView.layoutIfNeeded()
        stateContainerView.layoutIfNeeded()
        contentContainerView.layer.sublayers?.forEach { layer in
            if layer is CAShapeLayer {
                layer.removeFromSuperlayer()
            }
        }
        contentContainerView.roundCorners(leftTop: 16, rightTop: 8, leftBottom: 16, rightBottom: 8)
        
        if let shapeLayer = contentContainerView.layer.mask as? CAShapeLayer,
           let path = shapeLayer.path {
            let borderLayer: CAShapeLayer = CAShapeLayer()
            borderLayer.path = path // Reuse the Bezier path
            borderLayer.strokeColor = isSelect ? ColorManager.primary5.color?.cgColor : ColorManager.gray3_5.color?.cgColor
            borderLayer.fillColor = UIColor.clear.cgColor
            borderLayer.lineWidth = moderateScale(number: 2)
            borderLayer.frame = contentContainerView.bounds
            contentContainerView.layer.addSublayer(borderLayer)
        } else {
            print("Error: Could not cast layer.mask to CAShapeLayer or retrieve the path.")
        }
        
        stateContainerView.layer.sublayers?.forEach { layer in
            if layer is CAShapeLayer {
                layer.removeFromSuperlayer()
            }
        }
        
        stateContainerView.roundCorners(leftTop: 8, rightTop: 16, leftBottom: 8, rightBottom: 16)
        
        if let shapeLayer = stateContainerView.layer.mask as? CAShapeLayer,
           let path = shapeLayer.path {
            let borderLayer: CAShapeLayer = CAShapeLayer()
            borderLayer.path = path
            borderLayer.strokeColor = isSelect ? ColorManager.primary5.color?.cgColor : ColorManager.gray3_5.color?.cgColor
            borderLayer.fillColor = UIColor.clear.cgColor
            borderLayer.lineWidth = moderateScale(number: 2)
            borderLayer.frame = stateContainerView.bounds
            stateContainerView.layer.addSublayer(borderLayer)
        } else {
            print("Error: Could not cast layer.mask to CAShapeLayer or retrieve the path.")
        }
    }