set images in circle view with rotation in ios

Question

I am trying to achieve a view in which Images will placed on edge of circle.I tried to make it with CAShapeLayer and added UIImageViews but I want to create it dynamically. Any help will be appreciated.I am adding one image for example.

Answer 1

I would suggest you to refer this answer given by @rob_mayoff

You should create a circular bezier path with the image you want to display.Please not that this method only works if you want to have same image distributed evenly on the circle.If you want to have different image distributed evenly on circle, then you should do put more effort .

You can try in two ways:

1. Draw every circular bezier path by calculating their centers . And arrange them in a circular manner. You should do a little math. Please note that you have the center point (x,y) for the main circle, and place the sub circles around the center point (x,y) in such a way that distance from each sub circle center to main circle center should be same. To get the exact coordinates of lines which divide the circle , please refer to the answer. Once you get the exact coordinate, you can place the subcircle at these positions.

I will try to give a rough idea about doing this:

Consider you have a main circle whose center is at (x0,y0). And you wish to place images on this circle by dividing the circle into 'n' parts. so that you can place 'n' number of imageViews on this main circle. The 'n' parts are denoted by green lines in the below picture.

The angle between each of the green lines is 360deg/n

No we need the end point of the each green line. Which can be obtained from:

 sub.x = x0 + r * cos(angle);
 sub.y = y0 + r * sin(angle);

where r is the radius of main circle.

This is for one sub circle. In yoour case you have 'n' number of sub circles, so let's do a loop to get all sub circle centerpoints:

      for(i = 1 to n)
        {
            angle = i * (360/n);
            sub.x = x0 + r * cos(angle);
            sub.y = y0 + r * sin(angle);
       }

Now you can draw a circular bezier path at each of the 'n' sub (x,y) points

using the addArcWithCenter:center where center would be the calculated sub (x,y)

2. I think 1 is again the best way if you want to do everything dynamically.