Accessing properties of class defined as IBDesignable in drawRect: method - ios

Question

I am having class called Circle (a subclass of UIView) and it is defined as IBDesignable, and some of its properties are defined as IBInspectable. Also there are some standard properties on a Circle class that I am trying to set and to see the changes at design time same as I do for inspectable properties. In the case of inspectable properties defined on Circle class, say strokeThickness, if they are changed through IB, everything works and I see the changes immediately on my view / xib.
When I say xib, I mean that I've created MyXib.xib file and dragged UIView on it, and set a custom class to XibOwnerClass. Also, when I load that xib I see changes at design time if change some of inspectable properties of Circle class.
How do I use this:
I have a view controller on a storyboard, and then I drag an UIView and change its class to XibOwnerClass. Imagine XibOwnerClass as a class that has one Circle. Now here, if I have set in my xib file that circle have red stroke, all circles that I add further in a XibOWnerClass will have red stroke, and that's fine. But the thing is, I want to set startAngle and endAngle per circle.
Now even this works, if I override prepareForInterfaceBuilder method and do something like this:
_circle.startAngle = 0.0f;
_circle.endAngle = 360.0f;
_anotherCircle.startAngle = 0.0f;
_circle.endAngle = 270.0f;
But still, if I click on my xib file, I can't see the changes at design time, but rather on runtime. So how to see these changes at design time with this setup?
Here is drawRect: method of a Circle class, but I guess that is not even needed, except it shows the usage of those non-inspectable properties:
In Circle.m file:
#import "Circle.h"
#define getRadians(angle) ((angle) / 180.0 * M_PI)
#define getDegrees(radians) ((radians) * (180.0 / M_PI))
#implementation Circle
- (void)drawRect:(CGRect)rect {
// Drawing code
CGPoint centerPoint = CGPointMake(rect.size.width/2.0f, rect.size.height / 2.0f);
UIBezierPath *path = [UIBezierPath
bezierPathWithArcCenter: centerPoint
radius:(rect.size.height / 2.0f)
startAngle: getRadians(self.startAngle)
endAngle: getRadians(self.endAngle)
clockwise:YES];
CAShapeLayer *shape = [CAShapeLayer new];
shape.path = path.CGPath;
shape.fillColor = self.mainColor.CGColor;
shape.strokeColor = self.strokeColor.CGColor;
shape.lineWidth = self.ringThicknes;
[self.layer addSublayer:shape];
}
And properties are defined in .h as:
#property(nonatomic) CGFloat startAngle;
#property(nonatomic) CGFloat endAngle;
//Some more IBInspectable properties go here, and those are properties that I set when i want to affect all circles.

Answer 1

I have implemented the same and the below solution is working, please make changes in your .h file:
#ifndef IB_DESIGNABLE
#define IB_DESIGNABLE
#endif
#import <UIKit/UIKit.h>
IB_DESIGNABLE #interface Circle : UIView
#property(nonatomic)IBInspectable CGFloat startAngle;
#property(nonatomic)IBInspectable CGFloat endAngle;
#property(nonatomic)IBInspectable CGFloat ringThicknes;
#property(nonatomic)IBInspectable UIColor* mainColor;
#property(nonatomic)IBInspectable UIColor *strokeColor;
#end
And in .m file
#import "Circle.h"
#define getRadians(angle) ((angle) / 180.0 * M_PI)
#define getDegrees(radians) ((radians) * (180.0 / M_PI))
#implementation Circle
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
[self drawCircle];
}
return self;
}
-(void)drawCircle {
CGPoint centerPoint = CGPointMake(self.frame.size.width/2.0f, self.frame.size.height / 2.0f);
UIBezierPath *path = [UIBezierPath
bezierPathWithArcCenter: centerPoint
radius:(self.frame.size.height / 2.0f)
startAngle: getRadians(self.startAngle)
endAngle: getRadians(self.endAngle)
clockwise:YES];
CAShapeLayer *shape = [CAShapeLayer new];
shape.path = path.CGPath;
shape.fillColor = self.mainColor.CGColor;
shape.strokeColor = self.strokeColor.CGColor;
shape.lineWidth = self.ringThicknes;
[self.layer addSublayer:shape];
}
- (void)drawRect:(CGRect)rect {
// Drawing code
[self drawCircle];
}
If you still face the same issue then make sure to turn on "Automatically Refresh Views" (in: Editor > Automatically Refresh Views) or manually update view by "Refresh All Views" (in: Editor > Refresh All Views) (when you need to update in IB).