1. UIVisualEffectView
  2. Custom UIButton for gradient background color
  3. Gradient Border in UIButton

UIVisualEffectView

Always with visual effect

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
    addSubview(visualEffectView)

visual view + visual effect

Custom UIButton for gradient background color

Make a custom UIButton swift file for it. Don’t forget to override draw() function

It’s almost same as make a gradient view.

[step]

  1. Set color array
  2. Set each Color’s Points (location)
  3. insertSublayer
class SendMessageButton: UIButton {
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let gradientLayer = CAGradientLayer()
        let leftColor = #colorLiteral(red: 0.8980392157, green: 0, blue: 0.4470588235, alpha: 1)
        let rightColor = #colorLiteral(red: 0.9921568627, green: 0.3568627451, blue: 0.3725490196, alpha: 1)
        gradientLayer.colors = [leftColor.cgColor, rightColor.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        
        layer.insertSublayer(gradientLayer, at: 0)
        gradientLayer.frame = rect
        
        layer.cornerRadius = rect.height / 2
        clipsToBounds = true
    }
}

When you want to make a corner round, a half of height of the rect as a cornerRadius value would be nice!

insertSublayer()

Inserts the specified layer into the receiver’s list of sublayers at the specified index.

        layer.insertSublayer(gradientLayer, at: 0)

Gradient Border in UIButton

reference site in Stackoverflow

There are additional code from Custom UIButton for gradient background color

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let gradientLayer = CAGradientLayer()
        let leftColor = #colorLiteral(red: 0.8980392157, green: 0, blue: 0.4470588235, alpha: 1)
        let rightColor = #colorLiteral(red: 0.9921568627, green: 0.3568627451, blue: 0.3725490196, alpha: 1)
        gradientLayer.colors = [leftColor.cgColor, rightColor.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        
        let cornerRadius = rect.height / 2
        let maskLayer = CAShapeLayer()
        
        let maskPath = CGMutablePath()
        maskPath.addPath(UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).cgPath)
        
        maskPath.addPath(UIBezierPath(roundedRect: rect.insetBy(dx: 2, dy: 2), cornerRadius: cornerRadius).cgPath)
        
        maskLayer.path = maskPath
        maskLayer.fillRule = .evenOdd
        
        gradientLayer.mask = maskLayer
        
        layer.insertSublayer(gradientLayer, at: 0)
        gradientLayer.frame = rect
        
        layer.cornerRadius = cornerRadius
        clipsToBounds = true
    }

What’s the difference?

We want to add mask on gradientLayer finally. there are maskLayer and maskPath. maskPaths are drawn on the maskLayer

        let maskLayer = CAShapeLayer()
        
        let maskPath = CGMutablePath()
        maskPath.addPath(UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).cgPath)
        
        maskPath.addPath(UIBezierPath(roundedRect: rect.insetBy(dx: 2, dy: 2), cornerRadius: cornerRadius).cgPath)
        
        maskLayer.path = maskPath
        maskLayer.fillRule = .evenOdd
        
        gradientLayer.mask = maskLayer

.evenOdd

Specifies the even-odd winding rule. Count the total number of path crossings. If the number of crossings is even, the point is outside the path. If the number of crossings is odd, the point is inside the path and the region containing it should be filled.

        maskLayer.fillRule = .evenOdd

When you’re done with drawing maskPath, all we need to do is fill it :)

태그: ,

카테고리:

업데이트:

댓글남기기