I'm working on a iPhone product page where some of the fields can be fairly long (product name etc.) I've created the page layout in IB, and use UILabels to show the text fields. For those long text labels I'd like the height of the label to scale and push the other labels further down. Is this possible using IB, or would I have to do everything in code? (Compute height and position of all the UILabels.)
I'm presently able to get the text in the labels to wrap and fill the available space, but I have to reserve space for this. When the label is only one line it leaves lots of unused space before the next label.
You will have to calculate the heights dynamically in code. I'm not sure what you're doing exactly, but you may want to start using a UITableView and return variable height cells. I wrote a blog post on how to do this at Cocoa Is My Girlfriend.
It did some searching for this same thing and as far as I can tell you have to manually resize and position the labels.
If you want to know how to dynamically resize a label, this is how I am doing it:
myLabel.frame = CGRectMake(227.0, 12.0, 22.0, 21.0);
I am happy to be wrong on this one, since I don't like having to do this either.
Related
I've tried to get this to work but interface builder is doing my head in and I was wondering if anyone has a proper solution for this.
So I want to have a stackview that contains a label with multiple lines inside. The first hit on google (read here) tells you to embed the label within a view (A), then drag that view into another view (B) (because the embedded view (A) has a 20pixel pad) and then unembed the first view (A).... voila. Except this only tricks the stackview for horizontal stacks and if you continue to stack the view you will still have a ton of problems (I will demonstrate with screenshots later in the question).
I found another guide on google that criticizes a potential fix for the problem, fixing the stackviews width. The author makes the point that Apple didn't intend for you to be doing that, after all it's supposed to be auto layout, not fixed layout. This guide theorises that the issue is just a bug and that you can create a stackview with a single line label, set it all up and THEN add the multiple lines. I tried this and it didn't work, it simply messed the entire stack view up! The stack view will warp and essentially break unless the label has number of lines set to 1 and only 1. (Image 1) Stackview with label set to have multiple lines.
So I talked earlier about embedding the paragraph label within a view. This doesn't cause any errors in the storyboard,(Image 2) you can't really align the text properly with the other UIStacks but that's not an immediate problem for me to solve. What IS a problem is what happens at runtime....
Simulator, Portrait (Image 3), Simulator, Landscape (Image 4).
I tried running this on an actual device to see if it was just a simulator bug but the same thing happened on my iphone 6. Safe to say this is probably not going to work!
Oh and just before we go any further, I am building the stack views in the following way:
[name - placeholder]
[phone - placeholder]
[address - placeholder]
, setting a spacing of 8 and equal fill
,vertically stacking all of these stacks (3 into 1) and setting a spacing of 8
, vertically stacking the details titles with the big stack and 8 spacing
,finally adding the title and button into the stack view with a spacing of 32.
I then apply some storyboard constraints: in this case just centre vertically & horizontally, so the view is always centred and displays properly in both screen orientations.
Even though this isn't aligned properly, this is the view before applying the stacks and constraints, this is what I want my endgame to look like: Looks kind of silly, but I want to figure this out so I can actually stack my paragraphs! (Image - 5).
So now hopefully I've established that you can't really embed the label within a view as it doesn't render correctly at runtime, and you can't trick the stack into adding new lines.
How do I put a label with multiple lines into a stack view safely?
This is almost an offshoot question but when you try applying a stack to a paragraphed label, it sets the width of the label to be absolutely massive (sometimes it throws an error that interface builder can't render it Demonstrated here (Image 6). I've seen this happen a few times and don't really understand how xcode thinks that is a sensible option.
I don't want to apply fixed widths to my labels or stacks because I'll only be left with another warning, and warnings are bad!
I'm pretty lost at what to do, if anyone knows of a way this can be achieved I would be eternally grateful!
Thanks
This really seems to be a bug.
A workaround that works for me is embedding the multiline label in a view and leaving it there.
That fixes the layout on the Storyboard editor and also works in the simulator.
A weird thing is that if I have several multiline labels on the same StackView I only have to embed one of them in a UIView, and then all the other multiline labels will behave properly.
While I do agree this is an issue in UIStackView as layouting should work according to the intrinsic size of the UILabel.
When using stackview with multiline label, it is not able to update its size according to the label.
For resolving this issue, use preferredMaxLayoutWidth property of the label and set it to any value.
label.preferredMaxLayoutWidth = 1
Note: This even worked for me when I set it to 1
The preferredMaxLayoutWidth property as defined in the Apple Docs:
This property affects the size of the label when layout constraints are applied to it. During layout, if the text extends beyond the width specified by this property, the additional text flows to one or more new lines, increasing the height of the label.
which we do want to increase for a vertical UIStackView.
the solution is about embedding the UILabel inside "view without inset".
and then update your constraints.
I have a basic UIViewController with a UILabel that I want to populate dynamically at runtime. I want the elements surrounding the UILabel to move as the UILabel expands. I have constraints added that should allow for this, but I haven't been able to test it because my lines don't wrap on the Label like they should. I have set the Number of Lines in the Attributes Inspector to 0 and changed the Line Break mode to Word Wrap. However, the UILabel box won't expand in height to account for the amount of text. How can I go about setting this up? Thank you!!
Your Constraints are not created right.
I would suggest you create a new project and start with two labels to get a better understanding of how autolayout works.
Try deleting your Height-Constraint.
Autolayout will think that it needs to maintain the Height of 21 in your case.
If you delete it or set it with a low priority it should work.
I recreated your sample and got it working:
I am currently designing a report using iReport 4.7.0. At the moment I am trying to figure out how to dynamically adjust the height of a textField, if its contents is too big for the initial height. It seems, that the option Stretch on overflow achieves this. But I am having problems with that.
If a textField is not stretched, the spacing before and after the text is good, because its achieved by setting the textField height higher than the font size. But if the textField gets dynamically bigger because the containing text is to long to display with the initial height, the lines seem awfully packed, there is no spacing whatsoever.
I tried so resolve this by setting Spacing before and Spacing after for the specific textField but this seems to end in JasperReports thinking, that the textField doesn't need to re-size at all, even if the text is not fitting.
Is it possible, that the size created by the Spacing before and Spacing after option is taken into account on calculating, if a textField needs to be resized on overflow? Or am I doing something wrong here?
Use padding:
Right-click an element
Select Padding and Borders
-or-
Right-click an element
Select Show Properties
Click the Borders tab
Set padding values as required
This should provide a constant spacing even if box resizes. For complex layouts, experiment with float position of elements, as described here.
I am trying to implement a form much like the iPad's Data Plan Registration form. I am having a problem creating the vertical separator between my form's Labels and Fields. In the example below I'm trying to implement the vertical field/label separator in each section. Thanks for any help. I've searched the forums and looked at lots of tutorials, but have found none that address this specific question.
My Example will be weak since I'm not allowed to post an image...
Using UITableView...
---------------------------------------------
First Name | UITextField
---------------------------------------------
Last Name | UITextField
---------------------------------------------
Thanks again for reading this post.
GuyT
Per the recommendation from M42 I wanted to provide the answer that I used for my question.
My solution comes by using UITableViewCellStyle set to Custom. To implement a custom layout, first you will need to create a PNG image 5px x 200px to create a vertical separator line. When creating the image, be sure to choose a line color that will match the UITableView Cell Lines. Once created, add the PNG file to your project and then customize the cell layout by adding a UILabel, a UIImageView and a UITextField. Set the UIImageView's image property to the image you created. Be sure the image view reaches the top and bottom edge of your cell lines.
In some of the applications, I have seen that we have an option to increase or decrease the fontSize of the text inside the label. But when we adjust it, the label automatically increases its height to contain it. How do we get the height of the label everytime we increase or decrease the fontsize?
And in some cases like news applications when it loads, there will be text only. But suddenly the image comes and the text readjusts itself to contain it. How does it do it by itself?
Someone plz help me...
CGSize textSize = [#"foobar" sizeWithFont:[UIFont boldSystemFontOfSize:18]];
Checkout NSString UIKit Additions. It has got a couple of these methods that let you ask a string how big it would be when rendered with a given font. With that information, you should be able to adjust things however you need with a little math.
Also, in some cases, it may be a web view. If this is the case, HTML/CSS sort of flows stuff around automatically in order to keep things tidy.