how to set dots using uiimage or uibutton - ios

Question

Here i have some json data like bone = 24. based on this json value i have to change some small dots to big dots as i show in my below image.
Like my above image . (please consider image 1). it have 10 big dots. And based on that bone.label value i have to change some big dots to small dots.
My doubt is:
How to set that dot image using (uiimage or uibutton). my idea is to set 10 uiimage and then using if statement condition i will change big dots to small dots. but if i do in this way i am not able to set constraints. is they any other idea to dots in above my cirecle??

Answer 1

Do it in code, not in Interface builder, and without constraints. I doubt that working with circular relations is working well with autolayout constraints.
If you position the dot images with their center instead of the frame, their location is also not changing with their size.

Answer 2

Use the same size for all of your UIImageViews and then just change the image to a small or large dot. Set the content mode of the UIImageViews to center, so that the images won't be scaled to fit the size of the UIImageView.
UPDATE
You could solve the positioning of the dots by drawing them in a UIView instead of using constraints. Here's a function that returns an array with CGPoints evenly distributed around a circle, which you could use when drawing the dots:
func generatePoints(totalPoints: Int, center: CGPoint, radius: Double) -> [CGPoint] {
let arc: Double = 360
let startAngle: Double = 180
let mpi: Double = M_PI/180
var startRadians: Double = startAngle * mpi
let incrementAngle: Double = arc/Double(totalPoints)
let incrementRadians = incrementAngle * mpi
var points = [CGPoint]()
var currentPoint = totalPoints
while currentPoint > 0 {
currentPoint--
let xp = CGFloat(ceil(Double(center.x) + sin(startRadians) * radius))
let yp = CGFloat(ceil(Double(center.y) + cos(startRadians) * radius))
points.append(CGPointMake(xp, yp))
startRadians -= incrementRadians
}
return points;
}
Objective-C version (somewhat ugly, because it's from an ooooooold project of mine):
+ (NSArray*)generatePoints:(NSInteger)totalPoints center:(CGPoint)center radius:(NSInteger)radius {
float circleradius = (float)radius;
const float arc = 360.f;
float startAngle = 180.f;
float mpi = M_PI/180.f;
float startRadians = startAngle * mpi;
float incrementAngle = arc/(float)totalPoints;
float incrementRadians = incrementAngle * mpi;
NSMutableArray *pts = [[NSMutableArray alloc] initWithCapacity:totalPoints];
while (totalPoints--) {
float xp = ceilf(center.x + sinf(startRadians) * circleradius);
float yp = ceilf(center.y + cosf(startRadians) * circleradius);
[pts addObject:[NSValue valueWithCGPoint:CGPointMake(xp, yp)]];
startRadians -= incrementRadians;
}
return pts;
}