I have 3 UILabels drawn in storyboard positioned on top of each other.
Static UI Label 1
Dynamic UI Label 2
Static UI Label 3
Labels 1 and 3 are static and never change. Label 2 is dynamic and is always one sentence long, but could be a short or long sentence that wraps. I want Label 2 to be perfectly vertically centered between label 1 and label 3 based on how much text is there. Any ideas how to do this? Greatly appreciated!
If you're using auto layout (which is on by default), then you can just stretch the middle label until it's top and bottom are the standard distance away from the other two labels (you will see a dotted blue line when you reach that distance). This assumes that your label has a clear background, or that you don't mind seeing a tall label if it doesn't. The text will be centered vertically in this tall label regardless of the number of lines. It will also stay centered on rotation.
Add the center values of Label1 and Label3 , Divide it by 2 and make it center of label2
CGPoint point = CGPointMake(Label2.Center.x,(Label1.center.y+Label3.center.y)/2);
Label2.center = point;
That's all....
Related
I'm trying to make constraints via Snapkit in a table view cell but my problem is I need to find out which element has max y position (The lowest one).
I have an UIImageView and next to image view UILabel elements. The label text is dynamic and could be very long or very short. Below these 2 elements, I have another one that should be aligned based on the label height, either taking image view or label.
My question is how to find which element (UIIMageView, UILabel) has a bigger Y position.
To be more clear I attached a draw with simple two cases.
Set a greaterThanOrEqualTo constraint on both elements.
In "plain language":
AnotherElement.top >= ImageView.Bottom (with constant of 12, or however much space you want)
AnotherElement.top >= Label.Bottom (with constant of 12, or however much space you want)
I would like to center a UILabel based on its glyph dimensions. When I use sizeToFit() on a label its vertical positioning in a layout is not glyph aligned -- the label appears to be lower than it should. For example, when I have label with text "]" and plug that into a horizontal UIStackView the actual glyph of ] is not vertically (y) centered with other elements in the stack. I am looking for a Swift 3 iOS 10 solution.
In my app for iOS 8, I have a UISegmentedControl that stretches to fit the width of the device's screen. So on an iPad it's more pixels wide than it is on an iPhone 6+, which is more pixels wide than the iPhone 6, etc.
Centered just beneath each segment of the UISegmentedControl, I have a UILabel. So there are 5 segments and 5 UILabels. Each UILabel has a fixed width (fixed by constraint). However if the display size increases they become uncentered.
How in Interface Builder can I specify a constraint that will force each UILabel to become centered beneath each segment? I would be happy if I could just get the elements to remain proportionally spaced with each other as the display size scales, but I can't figure out how to do that, either.
All I can seemingly do is to center the middle UILabel directly under the middle segment by specifying a Center X Alignment between that and the UISegmentedControl.
I specified a Horizontal Space constraint between all the UILabels, and between the outer UILabels and the edges of the view, and set all these to "greater than or equals". They all have the same priority, but strangely, they don't all scale proportionally to each other.
The resulting problem is that the amount of Horizontal Space between each of the UILabels does not scale smoothly as the width of the device's screen increases. If I align everything to be in the proper positions on the iPhone 5S width of screen, then on the iPad their alignment is all wonky, and only the middle one lines up with its segment. The rest of them are all off center.
It appears that there is no way to specify a percentage of the over-all display width as a constraint -- you can only specify things in terms of pixels. Really?!?!
Clearly I could make the width of the objects to be flexible, but because they are text labels with right-aligned text, that screws everything up.
Surely I'm missing something here... since the point of Auto Layout is to make your interface scale according to the screen size, surely there is a way to specify a constraint as a percentage of any given view or subview... surely!!! But how? I've read the documentation and I cannot, for the life of me, figure it out.
BTW I did see that in the past, people have used crude hacks like spacer views or multiple sets of constraints, but surely those are outdated answers, and I'm just overlooking something extraordinarily obvious... right?
You can do this by making the centerX constraint of your labels equal to the superview.trailing times 0.1, 0.3, 0.5, 0.7, and 0.9 with constants of 0. To make these constraints, add your 5 labels to the view. Give the left most one a vertical spacing constraint to the segmented control. Select all 5 labels and give give them a "vertical centers" alignment constraint. Now control-drag from each label to the right side of the screen, and select the "Trailing space to container margin" constraint. Edit each one of these trailing constraints to look like this (except for the multiplier that needs to be given the values I mentioned above):
You'll have to reverse the first and second item (which you do from the pull down on the first item), change the Label.trailing to Label.Center X, and uncheck the "relative to margin" box, then correct the constant and multiplier values.
This approach will only work if the segmented control stretches all the way across the screen with no padding to the edges. If you want padding to the edges, then you need to use a completely different approach. You would need to create 5 UIViews below your segmented control -- align the left edge of the left-most one to the left edge of the segmented control. Align the right edge of the right-most one to the right edge of the segmented control. Give the 5 views equal width, and 0 length horizontal spacing constraint from each to its neighbor. This will give you 5 views that mimic the segmented control in width, with each view being the same width as one of the segments (assuming all the segments are the same width -- if that's not the case, you're screwed). Then you only need to add your labels as subviews of these 5 views, and give them centerX and centerY constraints.
As seen on the screenshot above, each top cell has few labels. The frame of the label this question concerning is highlighted with green rectangle. It shows the title of some picture/sculpture or other exhibit, so there could be quite long strings.
I would like the text of this label to be just above author label (string with font of smaller size). So, normal text is aligned from top to bottom and if text is not enough to fill all the space, the gap is at the bottom part of the label.
For this label I would like to use the opposite approach: if text is not enough, all the text at the bottom. Is there any parameter of UILabel to implement above mentioned behaviour? Or I should manually count the amount of lines and adjust the size of the label?
This is fairly easy using constraints. To get the effect you desire:
Constrain your label's position above the author label
Constrain the label's width or horizontal position
Constrain the label to a reasonable height using a greater than or equal to
Either constrain the label's total height as less than or equal to, or constrain the vertical position to something greater than or equal to.
All these constraints can be added in IB very easily, or through code. These constraints will cause the label to grow vertically to accommodate more text, and then shrink back down with less text, which will achieve the effect of having the text grow up from the bottom.
Suppose I have a view that contains two columns of objects. The first column contains labels, and the second column contains, say, sliders. I want the sliders all to align left with each other. I want the labels all to align left with each other. The trick is, how can I set the spacing between the labels and sliders so that the default spacing is used between the left sliders and the longest label, thus:
label 1 slider 1
label 2 slider 2
longer label 3 slider 3
very long label 4[]slider 4
label 5 slider 5
I've placed square brackets, [], where the default spacing should be. Is it possible to add this sort of constraint in the storyboard (iOS 7)? If so, how? The trick is that I don't know which label is the longest, especially with localization.
Ideally, I could specify a bounding box around the labels and align the sliders with the right side of the bounding box.
Yes, you can do this in IB. All the labels should have their left edges aligned, and one of them should have a fixed space to the left edge of their superview (all the elements should be enclosed in a UIView). Similarly, the sliders would have their right edges aligned and one of them would have a fixed space to the right edge of the box. Give one of the labels a horizontal spacing constraint to a slider -- make that a short one, say ==8 with a priority of 900 (that's the important thing). Now, give all the labels a >= constraint with whatever value you want for the minimum spacing (and leave the priority at 1000).