Photoshop Question posted in
The official user guide can be found here.

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

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

Tags:

3

Answers


  1. 0

    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. 0

    Do The init of circle in viewDidAppear instead of viewDidLoad

    Login or Signup to reply.
  3. 0

    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