In my app I have a UITableView with a custom cell which contains a dynamic title label and a button next to it like in the following screenshot:
My problem is when the Title label gets too long, the button is truncated.
Instead i want the label to be truncated and the button should always be fully displayed. How can i achieve this?
(I do not want to set a fixed width for the button, since internationalization has to be supported too)
Set the priority of the constraint between label and button as 250 (low) . And set one more constraint which is trailing space from your title label to superview which should be little bit greater than button's width . Hope it helps you.
1) set a fixed width to button
Note: The button would be truncated in this case
2) Set Fixed Width to label
if you will set a fixed width to label, it would be same for iPad so it looks very ugly
you need to manage width based on UIScreen, If you set a fixed width to label
3) Using Content hugging priority and Content compression resistance priority
Set Following Constrain For label
set horizontal 250 in Content hugging priority and 749 in
Content compression resistance priority
Related
The Question I have asked is purely using auto-layout, I don't want to setup the frames manually according to text width.
I am aware of the changes Content hugging priority and I have used the same for one label and one button it works fine for the label but not for the button, can anyone help
The button already sets its “intrinsic content width” to fit its title.
If no other constraints override that intrinsic content width, the button will be that intrinsic width, which is what you want. Demo:
Here's my storyboard outline:
I set the Alignment of the horizontal stack view to “Left” (instead of “Fill”) so it wouldn't stretch the top row to fill the screen width.
If your button is not at its intrinsic width, you have higher-priority (probably priority 1000) constraints forcing it to some other width.
You can try to force it to always stay at its intrinsic content width by setting both its Content Hugging Priority and its Content Compression Resistance Priority to 1000.
If you set both priorities to 1000, and you have any other required constraints that prevent the button from being its intrinsic size, you will get error messages in the debug log at runtime telling you that you have conflicting (unsatisfiable) constraints. These messages will include the full set of constraints, so you can try to track down what constraints you have that you don't want.
If you want to do this, you can create the custom View: Take - UIView and change it's class to UIButton and Add the UILabel and apply all required constraints.
With this all setup you can achieve the desire UI.
Please try this If you want to implement like this.
UILabel object's width constraint should be a Less Than
or Equal relation
UIButton object's width constraint should be a Greater
Than or Equal relation
UILabel object's horizontal Content Hugging Priority
should be 249 (as per my constraint settings shown above)
And set UILabel width constant value as maximum possible value as your requirement.
And related code as:
[buttonObject setTitle:#"Button title is ..." forState:UIControlStateNormal];
[buttonObject sizeToFit];
How can I layout a label and a button inside a UIStackView in such a way that the button only takes as much space as it needs and the rest is left for the label? Button text could be various length due to localizations.
The UIStackView here is alignment: center with distribution: fill.The only missing thing here is not stretching the button beyond the width needed for text and insets.
It doesn't seem possible with just the distribution settings. If Fill Proportionally is set the button must have a width constrain . Tried playing with the compression and hugging to no success, maybe I am doing something wrong.
EDIT: Found out why content hugging wasn't working. It needed a value >= 761 and not higher than 250 as I thought. Because 250 is the label content hugging value. Why 761? Can't really say.
You need to set the Content Hugging priority of your button to something higher than 250. That way the button does not want to grow bigger than it needs to.
I'm trying to get my subtitle label to wrap, but it always remains one line with truncated text. I have it so the subtitle has a top constraint of 5px to the title/SignIn label, and 20px to the separator.
I've been working with Content Hugging and Compression Resistance but I haven't been able to figure it out.
If I remove the bottom constraint, the label becomes 3 lines as desired, but overlaps the separator (i.e. the content doesn't get pushed down).
Any help would be greatly appreciated.
Set lines to 0. Then enlarge the label to fit in the required lines of code i.e, increase the height of the label on storyboard. Then set the height constraint of the label from the pin menu to that height.
So, auto updating my project's settings and restarting Xcode/Simulator had something to do with it!
Everything seems to be working now (with the following settings for the subtitle):
Content hugging has been set to: h=251 & v=251
Content compression resistance has been set to: h=750 & v=750
Number of Lines has been set to: 0
Line Break Mode has been set to: Truncate Tail
"Bottom space to separator" constraint has been set to: Equals 20
"Top space to sign in label" constraint has been set to: Equals 5
I came across a problem when configuing the cell of UITableView. I add two labels vertically in the content view of the UITableViewCell, and I also add constraints for the top, leading and bottom layout attributes:
I think that the height of the cell can be caculated dynamically as I have set all the vertical layout and with the instrinct size of the label, the height can be inferred.
so, I can not understand the error message that IB told me.
The second problem is that the height of cell appear on the IB is not changed with the constraint I`ve make. If I decrease the bottom constraint for example, and it is the label to change its size to fit the constraint, but not the cell change its height.
If you need to add top , leading and trailing(or width) to the 1st label. Then add bottom ,leading and trailing(or width)for the bottom label. Then add bottom constraint for 1st label to 2nd label.Then by selecting both labels, add equal height constraint.It will solve your problem.
The meaning of this conflict is that when your label content is increasing dynamically, which label's content is needed to give more priority before whom.
More precisely it can be said that if you increase one of the label's content hugging priority i.e. 252 then that label's content increment and size will be given more priority for incrementing it foremost. As autolayout executes according to the priority of constraints, it faces ambiguity in terms of increasing the views of labels if you do not set the content hugging priority.
I'm trying to use autolayout constraints to automatically resize a few similarly-sized buttons in a view to give the following effect:
Before resizing
Desired effect after resizing
As you can tell, I want the buttons to be of the same size and I also want the spacing between each button to be a constant 20 points. It seems pretty simple at first, so I set the following constraints:
Buttons: space from left neighbour = 20 (inclusive of left-most and right-most buttons)
Buttons: space from right neighbour = 20 (inclusive of left-most and right-most buttons)
Buttons: same width
What actually happens after resizing
When in preview or when I test run the app in my iPhone/simulator, the button resizes and doesn't even follow the same width constraint I set for it. In fact, the view containing the views also resizes to fit the new button sizes. Anyone knows how to fix this problem purely in the interface builder?
Setting:
- equal widths of all buttons
- horizontal spacing between all buttons
- leading to superview for the first button and trailing to superview for the last button
should do the job. Unless you're having problems with the superview (e.g. ScrollView missing constraints)
In the interface builder you set the spacing constraints between buttons like you described above. Then you can command-select all of them and specify the "Equal Width" constraint to apply to the selected objects.
Finally I have oblivion how to solve this problem. I've test it works like charm.
add constraints to space items with 20 units margin
add constraint to ages
now tricky part
for each item add constraint equal widths to a parent
select all this new constraints and change its properties
set multiplier to value 1:5
set constant to -24 (6 separation between items and parent edge gives 120, this multiplied by multiplier value 1:5 gives 24)
update items frames
That's it! Picture below show how it works in interface builder:
Set simulated size to "freeform" and test different widths (I sett this to 330).
This problem is seems to be because of wrong content hugging priority and content compression Resistance priority. So you should set them as low content hugging and high compression resistance (all should have same value).
Because content hugging is the property that resist a view to grow and content compression Resistance priority is to resist a view to shrink. For more information regarding these you can found this Question.