Reputation: 27224
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.
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]];
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
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