Skip to content
Wes Byrne edited this page Oct 23, 2015 · 3 revisions

CBView

Forget about writing the tedious layer.[attribute] code when you want to give your buttons a little style. Round those corners, add a border, event drop some shadow all from the storyboard/IB inspector.

  • cornerRadius : Round the corners of the view to whatever radius you wish
  • circleCrop: Let autolayout do the work, CornerRadius will be set to 50% anytime your view changes size
  • borderWidth: Well, set the width of the border
  • borderColor: And the color of the border
  • shadowColor: Set the color of the layer shadow
  • shadowRadius: Set the shadow radius
  • shadowOpacity: Set the opacity of the shadow
  • shadowOffset: Translate the shadow relative to the view
  • shouldRasterize: Rasterize the layer for better performance, screen scale is handled as well
  • useShadowPath: For square views, useShadowPath greatly improves performace. corner radius is also taken into account.

For More information on any of these attributes, checkout the CALayer documentation

Because layer shadows require that the view NOT clip it's bounds, it can cause problems when you want say, rounded corners, or an image to be clipped. To do so, embed your view into another CBView and turn on the shadow for the parent. With the parent background set to clear, the shadow will only be applied to the child.

CBBorderView

Add borders to each side of a view as needed.

  • leftBorder, rightBorder, topBorder, bottomBorder: Turn each side on and off individually
  • borderColor: The color of each side's border.
  • borderWidth: The width for each side's border

CBGradientView

Draw a gradient as a background or an overlay with zero code.

  • topColor: The first color in the gradient

  • middleColor: The second color in the gradient

  • bottomColor: The third color in the gradient

  • topLocation: The percentage point of the top color from top to bottom

  • middleLocation: The percentage point of the middle color from top to bottom

  • bottomLocation: The percentage point of the bottom color from top to bottom

Note: when using a clear color with CBGradientView the color before the opacity is set will make a difference. So if your top color with white(alpha 1) and bottom is black(alpha 0), the middle will appear greyish.

CBImageView

Just a UIImage with some practical updates. You'll never use a UIImage again.

  • cornerRadius: Round your images right from the storyboard.

  • circleCrop: Let autolayout do the work, CornerRadius will be set to 50% anytime your view changes size

  • borderColor: The color of the border

  • borderWidth: The width of the border

  • tinted: Render the image as a template image to use the built in tint color

  • placeholderImage: Set an image to be used anytime the image property is set to nil.

  • loadImageAtURL:completion:: Load a remote image into the image view in one line. A nil callback will automatically set the image to the imageView.

TODO:

  • Better placeholder support for scaling
  • Automatic loading animaitions
Clone this wiki locally