Center a dynamically created UIView over a UILabel in the storyboard not working

Question

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.

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:

Answer 1

Then you're doing something wrong... Use constraints !

Here is my Storyboard label constraints

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

Piece of cake ! ;)

Answer 2

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); 

Answer 3

在viewDidAppear而不是viewDidLoad执行圆形的初始化