How to draw a custom UIView that is just a circle - iPhone app

Question

How would I go about drawing a custom UIView that is literally just a ball  a 2D circle   Would I just override the drawRect method  And can someone show me the code for drawing a blue circle    Also  would it be okay to change the frame of that view within the class itself  Or do I need to change the frame from a different class    just trying to set up a ball bouncing around

User · Answer

Swift 3 class  import UIKit  class CircleView  UIView        override func draw   rect  CGRect            guard let context   UIGraphicsGetCurrentContext   else  return                   context addEllipse in  rect          context setFillColor UIColor blue cgColor          context fillPath

User · Answer

Another way of approaching circle  and other shapes  drawing is by using masks  You draw circles or other shapes by  first  making masks of the shapes you need  second  provide squares of your color and  third  apply masks to those squares of color  You can change either mask or color to get a new custom circle or other shape    import  lt QuartzCore QuartzCore h gt    interface ViewController     property  weak  nonatomic  IBOutlet UIView  area1   property  weak  nonatomic  IBOutlet UIView  area2   property  weak  nonatomic  IBOutlet UIView  area3   property  weak  nonatomic  IBOutlet UIView  area4    end   implementation ViewController  -  void viewDidLoad        super viewDidLoad        self area1 backgroundColor    UIColor blueColor        self useMaskFor  self area1        self area2 backgroundColor    UIColor orangeColor        self useMaskFor  self area2        self area3 backgroundColor    UIColor colorWithRed  1 0 green  0 0 blue  0 5 alpha 1 0        self useMaskFor  self area3        self area4 backgroundColor    UIColor colorWithRed  1 0 green  0 0 blue  0 5 alpha 0 5        self useMaskFor  self area4              -  void useMaskFor   UIView   colorArea               CALayer  maskLayer    CALayer layer       maskLayer frame   colorArea bounds      UIImage  maskImage    UIImage imageNamed   cirMask png        maskLayer contents      bridge id maskImage CGImage      colorArea layer mask   maskLayer      end   Here is the output of the code above

User · Answer

Would I just override the drawRect   method    Yes   -  void drawRect  CGRect rect       CGContextRef ctx   UIGraphicsGetCurrentContext        CGContextAddEllipseInRect ctx  rect       CGContextSetFillColor ctx  CGColorGetComponents   UIColor blueColor  CGColor         CGContextFillPath ctx          Also  would it be okay to change the frame of that view within the class itself    Ideally not  but you could       Or do I need to change the frame from a different class    I d let the parent control that

User · Answer

Swift 3 -  custom class  easy to reuse  It uses backgroundColor set in UI builder   import UIKit   IBDesignable class CircleBackgroundView  UIView        override func layoutSubviews             super layoutSubviews           layer cornerRadius   bounds size width   2         layer masksToBounds   true

User · Answer

You could use QuartzCore and do something this --  self circleView     UIView alloc  initWithFrame CGRectMake 10 20 100 100    self circleView alpha   0 5  self circleView layer cornerRadius   50      half the width height self circleView backgroundColor    UIColor blueColor

User · Answer

Swift 3 - Xcode 8 1   IBOutlet weak var myView  UIView   override func viewDidLoad         super viewDidLoad         let size CGFloat   35 0     myView bounds   CGRect x  0  y  0  width  size  height  size      myView layer cornerRadius   size   2     myView layer borderWidth   1     myView layer borderColor   UIColor Gray cgColor

User · Answer

Here is another way by using UIBezierPath  maybe it s too late     Create a circle and mask UIView with it  as follows   UIView  view     UIView alloc  initWithFrame CGRectMake 0  0  200  200    view backgroundColor    UIColor blueColor    CAShapeLayer  shape    CAShapeLayer layer   UIBezierPath  path    UIBezierPath bezierPathWithArcCenter view center radius  view bounds size width   2  startAngle 0 endAngle  2   M PI  clockwise YES   shape path   path CGPath  view layer mask   shape

User · Answer

My contribution with a Swift extension   extension UIView       func asCircle             self layer cornerRadius   self frame width   2          self layer masksToBounds   true           Just call myView asCircle

User · Answer

There s another alternative for lazy people  You can set the layer cornerRadius key path for your view in the Interface Builder  For example  if your view has a width   height of 48  set layer cornerRadius   24     However  this only works if you have a static size of the view  width height is fixed  and it s not showing the circle in the interface builder

[iphone] How to draw a custom UIView that is just a circle - iPhone app

Examples related to iphone

Examples related to ios

Examples related to ipad

Examples related to uiview