I want to draw a UIView layer but when I do it the layer frame is not equal(In Preview) to UIView frame.
class ViewController: UIViewController {
var graphHeight:CGFloat = 100
var graphSize:CGFloat!
override func viewDidLoad() {
super.viewDidLoad()
graphSize = self.view.frame.height/CGFloat(M_PI)
let graphRect:CGRect = CGRectMake(0, graphHeight, self.view.frame.width, graphSize)
let background = blueGardient()
var theView:UIView = UIView(frame: graphRect)
background.frame = theView.frame
theView.backgroundColor = UIColor.yellowColor()
theView.layer.cornerRadius = 8
theView.layer.borderWidth = 1
theView.layer.borderColor = UIColor.redColor().CGColor
theView.layer.insertSublayer(background, atIndex: 0)
self.view.addSubview(theView)
}
func blueGardient()->CAGradientLayer{
let topColor = UIColor(red: 0, green: 0, blue: 255, alpha: 0.7)
let bottomColor = UIColor(red: 0, green: 0, blue: 255, alpha: 0.9)
let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
let gradientLocations: [Float] = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
return gradientLayer
}
}
The frame is equal
(0.0,100.0,320.0,180.800015352393)
(0.0,100.0,320.0,180.800015352393)
but not shown eauql. I try with theView.layer.frame but unsuccessfully...
The problem is because the context of each frame is different. Your view frame (theView.frame) is in the context of its superview, so the (0,100) origin means it is offset by 100 points downward from the top left of the screen. The layer's frame (background.frame) is in the context of the view it belongs to (theView), so the same (0,100) origin means the blue layer is offset by 100 points from the top left of the view.
Instead of using the view's frame, create a new rect using the size of the view's bounds and a (0,0) origin:
background.frame = CGRect(origin: CGPointZero, size: theView.bounds.size)
Related
I can remove the gradient from the subview fine, But If a button is added to the subview I can not remove the gradient layer. How can I Remove gradient from subview on rotation.
Here is the code for the View Controller.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var buttonOutlet: UIButton!
#IBOutlet weak var labelOutlet: UILabel!
#IBOutlet weak var mySubView: UIView!
#IBOutlet weak var mySubView2: UIView!
#IBOutlet weak var mySubView3: UIView!
override func viewDidLayoutSubviews() {
addGradient()
}
fileprivate func addGradient() {
mySubView.mainGradientBackground()
mySubView2.subGradientBackground()
mySubView3.subGradientBackground()
labelOutlet.labelTextfieldShadow()
buttonOutlet.buttonGradientBackground(cornerRadius: 10, shadowRadius: 3)
}
/// This will let you know when the device rotates.
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
if UIDevice.current.orientation.isValidInterfaceOrientation {
removeSublayer(mySubView, layerIndex: 0)
removeSublayer(mySubView, layerIndex: 0)
removeSublayer(mySubView2, layerIndex: 0)
removeSublayer(mySubView2, layerIndex: 0)
removeSublayer(mySubView3, layerIndex: 0)
removeSublayer(mySubView3, layerIndex: 0)
removeSublayer(buttonOutlet, layerIndex: 0)
removeSublayer(buttonOutlet, layerIndex: 0)
removeSublayer(labelOutlet, layerIndex: 0)
}
}
func removeSublayer(_ view: UIView, layerIndex index: Int) {
guard let sublayers = view.layer.sublayers else {
print("The view does not have any sublayers.")
return
}
if sublayers.count > index {
view.layer.sublayers!.remove(at: index)
} else {
print("There are not enough sublayers to remove that index.")
}
}
}
This is the Gradient Extension used to color any views I need.
import Foundation
import UIKit
extension UIView {
/// Use this to set a gradient for the background.
/// = This is a gradient with no shadow.
func mainGradientBackground() {
let color = Color()
let leading = color.backgroundLeading
let trailing = color.backgroundTrailing
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [leading, trailing]
gradientLayer.locations = [0,0.3]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
layer.insertSublayer(gradientLayer, at: 0)
}
/// Use this to set a gradient for the background.
/// = This is a gradient with a shadow.
func subGradientBackground() {
let corner: CGFloat = 15
let color = Color()
let leading = color.subBackgroundLeading
let trailing = color.subBackgroundTrailing
let borderColor = color.subBorderColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [leading, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 4
gradientLayer.cornerRadius = corner
layer.insertSublayer(gradientLayer, at: 0)
let subLayer = CALayer()
subLayer.frame = bounds
subLayer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: corner - 2).cgPath
subLayer.shadowColor = UIColor.red.cgColor
subLayer.shadowOpacity = 1
subLayer.shadowRadius = 2
subLayer.shadowOffset = CGSize(width: 3, height: 4)
layer.insertSublayer(subLayer, at: 0)
}
/// Use this to set a gradient for the background.
/// = This is a gradient with a shadow.
func subGradientBackgroundShadow() {
let corner: CGFloat = 15
let subLayer = CALayer()
subLayer.frame = bounds
subLayer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: corner - 2).cgPath
subLayer.shadowColor = UIColor.red.cgColor
subLayer.shadowOpacity = 1
subLayer.shadowRadius = 2
subLayer.shadowOffset = CGSize(width: 3, height: 4)
layer.insertSublayer(subLayer, at: 0)
}
/// LabelShadow
/// - Parameter masksToBounds: Keep the layer in its bound
/// - Exp.. Set to true to keep text in textview in its frame.
/// - Exp.. Set to false to let shadow out side the frame.
/// - Defalr corner radius is 7
func labelTextfieldShadow() {
let color = Color()
let dark = color.labelBackgroundDark
let borderColor = color.labelBorderColor
layer.masksToBounds = false
layer.borderWidth = 0.5
layer.borderColor = borderColor
layer.cornerRadius = 7
self.backgroundColor = dark
layer.shadowRadius = 7
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 3, height: 3)
layer.shadowOpacity = 0.6
}
/// Button gradient
/// - Parameter cornerRadius: Set the radius of the button. Use outlet height / 2
/// - Parameter shadowRadius: Set the shadow radius. 2
func buttonGradientBackground(cornerRadius: CGFloat, shadowRadius: CGFloat) {
let color = Color()
let leading = color.buttonLeading
let middle = color.buttonMiddle
let trailing = color.buttonTrailing
let borderColor = color.buttonBorderColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [leading, middle, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 1
gradientLayer.cornerRadius = cornerRadius
layer.insertSublayer(gradientLayer, at: 0)
let subLayer = CALayer()
subLayer.frame = bounds
subLayer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius - 2).cgPath
subLayer.shadowColor = UIColor.black.cgColor
subLayer.shadowOpacity = 1
subLayer.shadowRadius = shadowRadius
subLayer.shadowOffset = CGSize(width: 2, height: 3)
layer.insertSublayer(subLayer, at: 0)
}
}
Here is four screen shots of the screen.
This is a color struct to color all of the views.. Main view, Sub view, Labels and Buttons.
struct Color {
// Use these colors to style the main background.
/// This color is used for the main view's background leading greadient color.
let backgroundLeading = #colorLiteral(red: 0.2745098039, green: 0.231372549, blue: 0.231372549, alpha: 1).cgColor
/// TThis color is used for the main view's background trailing greadient color.
let backgroundTrailing = #colorLiteral(red: 0.2784313725, green: 0.2352941176, blue: 0.2352941176, alpha: 1).cgColor
// Use these colors to style the sub view.
/// This color is used for the sub view's leading greadient color.
let subBackgroundLeading = #colorLiteral(red: 0.1960784314, green: 0.2549019608, blue: 0.2549019608, alpha: 1).cgColor
/// This color is used for the sub view's trailing greadient color.
let subBackgroundTrailing = #colorLiteral(red: 0.1012082246, green: 0.2111029723, blue: 0.1947238818, alpha: 1).cgColor
/// This color is used for the sub view's border.
let subBorderColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1).cgColor
// Use these colors to style the labels.
/// This color is used for editing text background.
let labelBackgroundLight = #colorLiteral(red: 0.921431005, green: 0.9214526415, blue: 0.9214410186, alpha: 1) as UIColor
/// This color is used for disabled text background.
let labelBackgroundDark = #colorLiteral(red: 0.1843137255, green: 0.137254902, blue: 0.1384684741, alpha: 1) as UIColor
/// This color is used for the label's border.
let labelBorderColor = #colorLiteral(red: 0.6, green: 0.6, blue: 0.6, alpha: 1).cgColor
// Use these colors to style the buttons.
/// This color is used for the button's leading greadient color.
let buttonLeading = #colorLiteral(red: 0.1960784314, green: 0.2549019608, blue: 0.2549019608, alpha: 1).cgColor
/// This color is used for the button's middle greadient color.
let buttonMiddle = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1).cgColor
/// This color is used for the button's trailing greadient color.
let buttonTrailing = #colorLiteral(red: 0.1012082246, green: 0.2111029723, blue: 0.1947238818, alpha: 1).cgColor
/// This color is used for the button's border color.
let buttonBorderColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1).cgColor
// Use these colors for the text
/// This color is used for the deiabled label and text field.
let labelDisableColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
/// This color is used for the enabled label and text field.
let labelEnableColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
/// The text color white.
let labelWhiteTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
/// The text color Black
let labelBlackTextColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
}
Instead of assuming that a layer is at a given index, just retain the laters you want to remove as an instance variable (or in an array of CALayers) and then tell the layer(s) to remove themselves from their super layer.
For example:
var layersToRemoveLater = [CALayer]()
...
layersToRemoveLater.append(someLayer)
layersToRemoveLater.append(someOtherLayer)
...
layersToRemoveLater.forEach { $0.removeFromSuperLayer() }
The way to do this was to change each one of the extension to a class. With extension you have to take care of all of the layout your self. By using these as a class you can set each Button, Sub view Ect... in the storyboard, this way the view itself will redrawing the layout.
/// Use this to set a greadient for the background.
/// = This is a greadient with no shadow.
class MainGradientView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let gradientLayer = self.layer as? CAGradientLayer else {
return;
}
let color = Color()
let leading = color.backgroundLeading
let trailing = color.backgroundTrailing
gradientLayer.frame = bounds
gradientLayer.colors = [leading, trailing]
gradientLayer.locations = [0,0.3]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
}
/// Use this to set a greadient for the background.
/// = This is a greadient with a shadow.
class SubGradientView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let gradientLayer = self.layer as? CAGradientLayer else {
return;
}
let corner: CGFloat = 15
let color = Color()
let leading = color.subBackgroundLeading
let trailing = color.subBackgroundTrailing
let borderColor = color.subBorderColor
gradientLayer.frame = self.bounds
gradientLayer.colors = [leading, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 0.4
gradientLayer.cornerRadius = corner
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowRadius = 2
self.layer.shadowOffset = CGSize(width: 3, height: 4)
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
}
/// Use this to set a greadient for the background.
/// = This is a greadient with no shadow.
class TabBarGradientView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let gradientLayer = self.layer as? CAGradientLayer else {
return;
}
let color = Color()
let leading = color.buttonLeading
let middle = color.buttonMiddle
let trailing = color.buttonTrailing
let borderColor = color.buttonBorderColor
gradientLayer.frame = bounds
gradientLayer.colors = [leading, middle, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 1
gradientLayer.cornerRadius = self.frame.width / 50
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
}
/// Use this to set a greadient for the background.
/// = This is a greadient with a shadow.
class ButtonGradientView: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let gradientLayer = self.layer as? CAGradientLayer else {
return;
}
let color = Color()
let leading = color.buttonLeading
let middle = color.buttonMiddle
let trailing = color.buttonTrailing
let borderColor = color.buttonBorderColor
gradientLayer.frame = bounds
gradientLayer.colors = [leading, middle, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 1
gradientLayer.cornerRadius = self.frame.height / 2
self.layer.frame = bounds
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowRadius = 2
self.layer.shadowOffset = CGSize(width: 2, height: 3)
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
}
/// Use this to set a greadient for the keypad switch.
/// = This is a greadient with a shadow.
class SwitchGradientView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let gradientLayer = self.layer as? CAGradientLayer else {
return;
}
let color = Color()
let leading = color.buttonLeading
let middle = color.buttonMiddle
let trailing = color.buttonTrailing
let borderColor = color.buttonBorderColor
gradientLayer.frame = bounds
gradientLayer.colors = [leading, middle, trailing]
gradientLayer.locations = [0,0.3,1]
gradientLayer.startPoint = CGPoint(x: 0.05, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.5)
gradientLayer.borderColor = borderColor
gradientLayer.borderWidth = 1
gradientLayer.cornerRadius = 9
self.layer.frame = bounds
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowRadius = 2
self.layer.shadowOffset = CGSize(width: 2, height: 3)
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
}
My goal is to make radial gradient extension for UIView. Here is my code:
extension UIView {
func drawRadialGradient() {
let colors = Colors.gradientColors as CFArray
let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil)
guard let gradientValue = gradient else{ return }
let endRadius: CGFloat? = max(frame.width, frame.height) / 2
guard let endRadiusValue = endRadius else{ return }
let bottomcenterCoordinates = CGPoint(x: frame.width / 2, y: frame.height)
let getCurrentContext = UIGraphicsGetCurrentContext()
guard let currentContext = getCurrentContext else{ return }
currentContext.drawRadialGradient(gradientValue, startCenter: bottomcenterCoordinates, startRadius: 0.0, endCenter: bottomcenterCoordinates, endRadius: endRadiusValue, options: CGGradientDrawingOptions.drawsAfterEndLocation)
let radialGradientLayer = CALayer(layer: currentContext)
radialGradientLayer.frame = bounds
radialGradientLayer.masksToBounds = true
self.layer.insertSublayer(radialGradientLayer, at: 1)
}
}
When I call this function in viewDidLoad() or viewWillAppear() the compiler contains no mistakes and no warnings, the function just does not work out. i call it as following:
override func viewDidLoad() {
super.viewDidLoad()
view.drawRadialGradient()
}
For example, I have created an extension function for drawing a Linear Gradient on the UIView and it works, I call it the same way as radial gradient function:
func drawLinearGradient() {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.frame
gradientLayer.colors = Colors.gradientColors
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.95)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.05)
self.layer.insertSublayer(gradientLayer, at: 0)
}
For colors I have created a structure:
struct Colors {
static let firstColor = colorPicker(red: 70, green: 183, blue: 0)
static let secondColor = colorPicker(red: 0, green: 170, blue: 116)
static let thirdColor = colorPicker(red: 20, green: 0, blue: 204)
static let gradientColors = [firstColor.cgColor, secondColor.cgColor, thirdColor.cgColor]
static func colorPicker(red: CGFloat, green: CGFloat, blue: CGFloat) -> UIColor {
let color = UIColor(red: red / 255, green: green / 255, blue: blue / 255, alpha: 1.0)
return color
}
}
Please, give me a piece of advice on how to realize it as an extension.
One main thing I can see in your code, is that you try to do the drawing in viewDidLoad. Don't do that, on top of other problems, the frame size is not properly set yet at that moment. If you want the UIView to do the drawing, then derive a class from UIView, and do the drawing in the draw method of that class.
If you want the radialGradientLayer CALayer that you created to do the drawing (it currently is just empty), then derive a subclass from CALayer, and implement its drawInContext method.
I am new to programming and I have no idea how I can fill a undefined geometrical form with a gradient color...
I managed to do with a simple color like that:
func fillRegion(pixelX: Int, pixelY: Int, withColor color: UIColor) {
var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
var newColor = (UInt32)(alpha*255)<<24 | (UInt32)(red*255)<<16 | (UInt32)(green*255)<<8 | (UInt32)(blue*255)<<0
let pixelColor = regionsData.advanced(by: (pixelY * imageHeight) + pixelX).pointee
if pixelColor == blackColor { return }
var pointerRegionsData: UnsafeMutablePointer<UInt32> = regionsData
var pointerImageData: UnsafeMutablePointer<UInt32> = imageData
var pixelsChanged = false
for i in 0...(imageHeight * imageHeight - 1) {
if pointerRegionsData.pointee == pixelColor {
pointerImageData = imageData.advanced(by: i)
if pointerImageData.pointee != newColor {
// newColor = newColor + 1
pointerImageData.pointee = newColor
pixelsChanged = true
}
}
pointerRegionsData = pointerRegionsData.successor()
}
if pixelsChanged {
self.image = UIImage(cgImage: imageContext.makeImage()!)
DispatchQueue.main.async {
CATransaction.setDisableActions(true)
self.layer.contents = self.image.cgImage
self.onImageDraw?(self.image)
}
self.playTapSound()
}
}
Pixel by pixel it fill the color (ignoring the black color) any ideas how to do that with Gradient color? thanks!
You can make a gradient layer and apply an image or a shape layer as its mask. Here is a playground.
import PlaygroundSupport
import UIKit
class V: UIView {
private lazy var gradientLayer: CAGradientLayer = {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor,
UIColor.purple.cgColor,
UIColor.blue.cgColor,
UIColor.white.cgColor]
gradientLayer.locations = [0, 0.3, 0.9, 1]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
gradientLayer.mask = self.strokeLayer
self.layer.addSublayer(gradientLayer)
return gradientLayer
}()
private lazy var strokeLayer: CAShapeLayer = {
let strokeLayer = CAShapeLayer()
strokeLayer.path = UIBezierPath(ovalIn: CGRect(x:0, y: 0, width: 100, height: 100)).cgPath
return strokeLayer
}()
override func layoutSubviews() {
super.layoutSubviews()
strokeLayer.path = UIBezierPath(ovalIn: bounds).cgPath
gradientLayer.frame = bounds
layer.addSublayer(gradientLayer)
}
}
let v = V(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
PlaygroundPage.current.liveView = v
I'm not 100% sure I understand the question, but it seems like you want to fill any-old shape with a gradient, right? If so, there are a couple of ways to do that, but the easiest is to make a gradient that's the same size as the boundary of the shape and then apply that as its color. I'm typing this on my PC so I'm sure there's syntax errors, but here goes...
let size = CGSize(width, height)
UIGraphicsRenderer(size, false, 0) // I KNOW I have this one wrong
let colors = [tColour.cgColor, bColour.cgColor] as CFArray
let colorSpace = CGColorSpaceCreateDeviceRGB()
let gradient = CGGradient(colorsSpace: colorSpace, colors: colors , locations: nil)
Set the colors array as needed and then send that into the UIImage. You can use locations: to change the orientation.
The following code creates a square UIView frame with a gradient layer inside a detail view controller. However, the square.layer.cornerRadius doesn't show. It remains square.
class Colors {
let colorTop = UIColor(red: 68.0/255.0, green: 107.0/255.0, blue: 207.0/255, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 68.0/255.0, green: 108.0/255.0, blue: 179.0/255, alpha: 1.0).cgColor
let gl: CAGradientLayer
init() {
gl = CAGradientLayer()
gl.colors = [ colorTop, colorBottom]
gl.locations = [ 0.0, 1.0]
}
}
class DetailViewController: UIViewController {
func viewWillAppear {
let colors = Colors() // is a class that creates the gradient
let square = UIView(frame: CGRect(x: 18, y: 109, width: 60, height: 60))
square.layer.cornerRadius = 10
let backgroundLayer = colors.gl
backgroundLayer.frame = square.frame
backgroundLayer.maskToBounds = true
view.layer.insertSublayer(backgroundLayer, at: 1)
}
}
You are giving cornerRadius to your square view but not adding it your main view instead you are creating backgroundLayer and adding it your main view.
BackgroundLayer is not rounded as the when your are assigning the square view's frame a rectangular(square in your case) is assigned to the backgroundLayer without any cornerRadius.
You should add your backgroundLayer to your square view and then add the square view to your main view. Like,
square.layer.insertSublayer(backgroundLayer, at: 1)
view.addSubview(square)
Also do,
square.clipsToBounds = true
This should resolve your issue.
I have added some additional properties to the original GradientView to add the desired functionality to it:
#IBDesignable
class GradientView: UIView {
#IBInspectable var startColor: UIColor = .black
#IBInspectable var endColor: UIColor = .white
#IBInspectable var startLocation: Double = 0.05
#IBInspectable var endLocation: Double = 0.95
#IBInspectable var horizontalMode: Bool = false
#IBInspectable var diagonalMode: Bool = false
// add border color, width and corner radius properties to your GradientView
#IBInspectable var cornerRadius: CGFloat = 0
#IBInspectable var borderColor: UIColor = .clear
#IBInspectable var borderWidth: CGFloat = 0
override class var layerClass: AnyClass { return CAGradientLayer.self }
var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
override func layoutSubviews() {
super.layoutSubviews()
if horizontalMode {
gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
} else {
gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
}
gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
// add border and corner radius also to your layer
gradientLayer.cornerRadius = cornerRadius
gradientLayer.borderColor = borderColor.cgColor
gradientLayer.borderWidth = borderWidth
}
}
I know you did it programmatically but here's another tip, all you have to do if it's a storyboard UIView is just enable "Clip to Bounds" on the UIView. This always works for me when I add a gradient and set the cornerRadius programmatically.
Set your gradient's corner radius equal to the view's corner radius. (the view that you want to apply the gradient on)
gradient.cornerRadius = view.layer.cornerRadius
gradient.masksToBounds = true
Is there a preferred method to add an auto-resizing gradient layer to a UIView or UILabel that will conform to the autolayout constraints set in IB (Xcode 6) and a wAny hAny canvass, using Swift?
For example, I can start with two labels that span universal widths using constraints using an wAny and hAny canvass, but when running the app on an iPad2 simulator, the labels size correctly but not the gradient layer.
I've looked into willAnimateRotationToInterfaceOrientation and adding a notification based on UIDeviceOrientationDidChangeNotification, but this is not helpful when the app is loaded in landscape (although once rotated the layers are redrawn and do match).
The only solution I have found is to manally adjust the width of each button to conform to the maximum view width of each (iPad2 in landscape) in the Utilities side panel in Xcode, but that creates "misplaced view" warnings and a messy canvass.
Any other ideas?
Here is what I have:
In viewDidLoad, I send each button through this:
Example:
//viewDidLoad --
self.configButton(self.button1!)
self.configButton(self.button2!)
self.configButton(self.button3!)
//
func configButton(theButton: UIButton){
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame.size = theButton.frame.size
theButton.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(13.0)
let topG = CGFloat(55.0)
let topB = CGFloat(112.0)
let bottomR = CGFloat(90.0)
let bottomG = CGFloat(126.0)
let bottomB = CGFloat(167.0)
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
theButton.layer.cornerRadius = theCornerRadius
theButton.layer.masksToBounds = true
theButton.layer.borderWidth = 0.1
theButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
I would do this by subclassing UIButton, and putting the configureButton method, minus the layer sizing line, in that class. You can then set the frame of the gradient layer equal to the bounds of its super layer (the button's default layer) in layoutSublayersOfLayer because that layer automatically resizes to keep it the same size as the button. You don't need any code in the controller with this approach.
class RDButton: UIButton {
let gradient = CAGradientLayer()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
configureButton()
}
func configureButton() {
self.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(13.0)
let topG = CGFloat(55.0)
let topB = CGFloat(112.0)
let bottomR = CGFloat(90.0)
let bottomG = CGFloat(126.0)
let bottomB = CGFloat(167.0)
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
self.layer.cornerRadius = theCornerRadius
self.layer.masksToBounds = true
self.layer.borderWidth = 0.1
self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
override func layoutSublayersOfLayer(layer: CALayer!) {
super.layoutSublayersOfLayer(layer)
gradient.frame = layer.bounds
}
}
Here is what I came up with to pass gradient colors to this new button class:
import Foundation
import UIKit
import QuartzCore
class RDButton: UIButton{
let gradient = CAGradientLayer()
var gradientColors: [Int] = []
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func configureButton(thecolors: [Int]) {
println("thecolors: \(thecolors)")
self.layer.insertSublayer(gradient, atIndex: 0)
let topR = CGFloat(thecolors[0])
let topG = CGFloat(thecolors[1])
let topB = CGFloat(thecolors[2])
let bottomR = CGFloat(thecolors[3])
let bottomG = CGFloat(thecolors[4])
let bottomB = CGFloat(thecolors[5])
let colorTop = UIColor(red: CGFloat(topR/255.0), green: CGFloat(topG/255.0), blue: CGFloat(topB/255.0), alpha: 1.0).CGColor
let colorBottom = UIColor(red: CGFloat(bottomR/255.0), green: CGFloat(bottomR/255.0), blue: CGFloat(bottomR/255.0), alpha: 1.0).CGColor
let gradientColors: [AnyObject] = [colorTop, colorBottom]
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let theCornerRadius: CGFloat = 5.0
self.layer.cornerRadius = theCornerRadius
self.layer.masksToBounds = true
self.layer.borderWidth = 0.1
self.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
}
override func layoutSublayersOfLayer(layer: CALayer!) {
super.layoutSublayersOfLayer(layer)
gradient.frame = layer.bounds
}
}
In the View Controller, I did this:
#IBOutlet weak var mySweetButton: RDButton?
// etc for each button
let buttonsgradient = [13,55,112,90,126,167]
override func viewDidLoad(){
super.viewDidLoad()
//...
mySweetButton?.configureButton(buttonsgradient)
/// etc for each button
// ...
}
Probably not the optimal way of doing this ...