skip to Main Content

I have a UILabel that is placed on my Storyboard with AutoLayout. (Constraints include height, width and center horizontally, and vertical spacing from the top).

I have UIView that makes a circle with the drawRect method using a UIBeizerPath.

Nothing fancy so far.

For simplicity sake I am using hard coded numbers to help illustrate my problem.

Now I want the CircleView to be placed over the UILabel, centering the label in the circle.

However, I can not get anything to line up correctly. Its like the anchor points or something is messing up.

I tried setting the CircleView’s centerpoint to the labels center point. No luck.

I tried setting the CircleViews X to the location of the label minus the width divided by two. No luck.

The closest I can get is with the Y coordinate. I use the label.center.y – 52.5 (half of the radius).

cv = [[CircleView alloc] initWithFrame:CGRectMake(WHATHERE.x, WHATHERE.y,
                                                      155, 155)];
cv.radius           = 75;
cv.strokeWidth      = 5;

The radius of the circle is 75. The width/height of the CircleView is 155 because the stroke of the circle is 5. (radius x 2) + 5, which give me the view you see with the circle.

enter image description here

The dark background is the view of the iOS simulator. I have added background colors to each of the elements to distinguish their size.

Through the magic of Photoshop here is what I am trying to accomplish:
enter image description here

3

Answers


  1. Here’s what I would do:

    1. Make sure there are no constraints that are potentially pushing the circle
    2. Make the circle view a subview of NOT the UILabel, but of the superview (you’re probably already doing this)
    3. set the circle view’s frame to

      CGRectMake(self.myLabel.frame.origin.x - (155 / 2.0), self.myLabel.frame.origin.y - (155 / 2.0), 155, 155);
      
    Login or Signup to reply.
  2. Do The init of circle in viewDidAppear instead of viewDidLoad

    Login or Signup to reply.
  3. Then you’re doing something wrong… Use constraints !

    Here is my Storyboard label constraints enter image description here

    Here my ViewController

        @interface ViewController ()
    
        @property (nonatomic, weak) IBOutlet UILabel *centeredLabel;
    
        @end
    
        @implementation ViewController
    
        - (void)viewDidLoad {
            [super viewDidLoad];
            // Do any additional setup after loading the view, typically from a nib.
    
            CircleView *circleView = [CircleView new];
            [self.view addSubview:circleView];
    
            circleView.translatesAutoresizingMaskIntoConstraints = NO;
    
            NSLayoutConstraint *circleCenterX = [NSLayoutConstraint constraintWithItem:circleView
                                                                             attribute:NSLayoutAttributeCenterX
                                                                             relatedBy:NSLayoutRelationEqual
                                                                                toItem:self.centeredLabel
                                                                             attribute:NSLayoutAttributeCenterX
                                                                            multiplier:1 constant:0];
    
    
            NSLayoutConstraint *circleCenterY = [NSLayoutConstraint constraintWithItem:circleView
                                                                             attribute:NSLayoutAttributeCenterY
                                                                             relatedBy:NSLayoutRelationEqual
                                                                                toItem:self.centeredLabel
                                                                             attribute:NSLayoutAttributeCenterY
                                                                            multiplier:1 constant:0];
            CGFloat circleDiameter = 155;
    
            NSLayoutConstraint *circleWidth = [NSLayoutConstraint constraintWithItem:circleView
                                                                             attribute:NSLayoutAttributeWidth
                                                                             relatedBy:NSLayoutRelationEqual
                                                                                toItem:nil
                                                                             attribute:NSLayoutAttributeNotAnAttribute
                                                                            multiplier:1 constant:circleDiameter];
            NSLayoutConstraint *circleHeight = [NSLayoutConstraint constraintWithItem:circleView
                                                                             attribute:NSLayoutAttributeHeight
                                                                             relatedBy:NSLayoutRelationEqual
                                                                                toItem:circleView
                                                                             attribute:NSLayoutAttributeWidth
                                                                            multiplier:1 constant:0];
    
            [self.view addConstraints:@[circleCenterX, circleCenterY, circleWidth, circleHeight]];
        }
    
        - (void)didReceiveMemoryWarning {
            [super didReceiveMemoryWarning];
            // Dispose of any resources that can be recreated.
        }
    
        @end
    

    Here’s CircleView

        @implementation CircleView
    
    - (instancetype)init{
        self = [super init];
        if (self) {
            self.backgroundColor = [UIColor clearColor];
        }
        return self;
    }
    
    - (void)drawRect:(CGRect)rect
    {
        CGContextRef ctx = UIGraphicsGetCurrentContext();
    
        UIColor *blueTransparent = [[UIColor blueColor] colorWithAlphaComponent:0.4];
        [blueTransparent setFill];
        CGContextFillRect(ctx, self.bounds);
        UIColor *circleColor = [UIColor greenColor];
        [circleColor setStroke];
    
        CGContextSetLineWidth(ctx, 6);
        CGContextStrokeEllipseInRect(ctx, self.bounds);
    
    }
    
    @end
    

    And here’s the result

    enter image description here

    Piece of cake ! 😉

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search