Search This Blog

Saturday, September 23, 2017

iOS CALayer and how to use it


Description

Every UIView has CALayer. Visual representation of UIView is defined by attributes of CALayer property. You can setup many visual attributes of the view through the CALayer property: 
  • rounded corners
  • borders
  • opacity
  • background color
  • image content
  • shadows
  • and others
So, UIView wraps CALayer and all visual changes that you send to UIView get forward to CALayer object. UIView has one root CALayer and this root layer can contain sublayers. 

Code 

Rounded Corners
// make rounded corners
self.customView.layer.cornerRadius = 16

Borders
// add borders
self.customView.layer.borderColor = UIColor.black.cgColor
self.customView.layer.borderWidth = 3

Shadows
// add shadows
self.customView.layer.shadowOffset = CGSize(width: 6, height: 6)
self.customView.layer.shadowOpacity = 0.8
self.customView.layer.shadowRadius = 6
self.customView.layer.shadowColor = UIColor.black.cgColor

Image content
// add image content
self.customView.layer.contents = UIImage(named: "cats-eyes")?.cgImage
self.customView.layer.contentsGravity = kCAGravityResizeAspectFill
self.customView.layer.masksToBounds = true

Opacity
// opacity background
self.customView.layer.backgroundColor = UIColor.red.cgColor
self.customView.layer.opacity = 0.5

Screens



CALayer Demo project on GitHub


3 comments:

  1. A big shout out to you, such a useful and thought provoking article on Web Design USA straight from an intellectual mind

    ReplyDelete
  2. Thank you very much for drawing my notice to this. Your blog is jam-packed with helpful information. Unless I read it, I'd have no idea. I'll be back for more great content. Wishing you the best of luck and prosperity. Best Custom Websites

    ReplyDelete
  3. Thank you very much for sharing this informational blog.I could not find such kind of information in any other site.I'll come back for more fantastic material.
    Best wishes, and good luck.
    Custom Website

    ReplyDelete