gotnull
gotnull

Reputation: 27224

Positioning UILabel inside UIView

Given the following image:

The three labels: "TODAY, AVERAGE, LAST WEEK" are positioned dynamically within my ViewController. This becomes a problem when the application is deployed to other devices (i.e. iPhone 6 Plus) where they aren't positioned properly.

I'm aware of being able to use AutoLayout however I would like to position them properly using the library that's used to generate the 3 activity bars.

The library I'm using is: CHCircleGauge.

I tried adding the following to this library but wasn't sure exactly what kind of constraints to use to position them where you see them in this image.

enter image description here

This is the code I'm using so far, which is the same code that's used to position the label "6hrs" centered horizontally and vertically.

NSDictionary *valueLabelDictionary = @{@"valueText" : self.valueTextLabel};
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[valueText]|" options:0 metrics:nil views:valueLabelDictionary]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[valueText]|" options:0 metrics:nil views:valueLabelDictionary]];

I simply just added the following to at least be able to play around with dynamic constraints and can successfully position the labels in the same place. But the problem is I'm not quite sure how to position them perfectly like the image above.

NSDictionary *titleLabelDictionary = @{@"titleText" : self.titleTextLabel};
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[titleText]|" options:0 metrics:nil views:titleLabelDictionary]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[titleText]|" options:0 metrics:nil views:titleLabelDictionary]];

enter image description here

Any help would be greatly appreciated. I'm still trying to get my head around how AutoLayout and constraints work.

UPDATE:

In order to display the three rings I use the following:

var barView1 = CHCircleGaugeView(frame: CGRectMake(0, 0, 245, 245))
barView1.center = CGPointMake(self.gaugeView.frame.size.width / 2, self.gaugeView.frame.size.height / 2)
barView1.gaugeWidth = 16
barView1.gaugeTintColor = UIColor(red: 255/255, green: 202/255, blue: 76/255, alpha: 1)
barView1.trackWidth = barView1.gaugeWidth
barView1.trackTintColor = UIColor(red: 255/255, green: 202/255, blue: 76/255, alpha: 0.1)
self.gaugeView.addSubview(barView1)
barView1.setValue(0.10, animated: true)

Then I simply add two more that are of smaller size (centered in gaugeView) to fit inside the larger ring.

UPDATE 2:

I ended up using the following with some constant padding:

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.titleTextLabel
                                                 attribute:NSLayoutAttributeTop
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:self
                                                 attribute:NSLayoutAttributeTop
                                                multiplier:1.0
                                                  constant:-9.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.titleTextLabel
                                                 attribute:NSLayoutAttributeRight
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:self
                                                 attribute:NSLayoutAttributeCenterX
                                                multiplier:1.0
                                                  constant:-14.0]];

Upvotes: 0

Views: 398

Answers (1)

Aaron Brager
Aaron Brager

Reputation: 66302

Looks like you're new to auto layout, so I'll try to point you in the right direction without giving it all away.

Vertical Constraints

Constrain each label's Y to the top of the ring instead of the center. Set each label's top constraint's constant slightly differently so they appear stacked on top of each other. The constant should be trackWidth * (labelIndexNumber). So they'll end up being 0, 16, and 32.

This way if you ever change trackWidth your labels will adjust automatically. You may need to play with my numbers slightly to get the padding right.

Horizontal Constraints

Constrain the right side of each label to the circle view's center. I don't think you can use VFL for this; you'll have to use the verbose [NSLayoutConstraint constraintWithItem:… syntax.

Label Settings

Your label's text should be right-aligned. You might need to increase the horizontal compression resistance, depending on your other views, but avoid that if you can.

Upvotes: 3

Related Questions