Autolayout UITextfield - ios

I have been trying to achieve following layout in autolayout
I want to acheive this
may be i am doing something wrong due to which i am getting following result.I get this
can anyone correct me ?

This kind of layout is easily accomplished by using UIStackView, Please use UIStackView either in storyboard or in code.
Please check Apple documentation on it
https://developer.apple.com/documentation/uikit/uistackview?changes=_6

If you are using storyboard for Textfield then simply give leading and trailing to Textfield. Dont give the fixed width to textfield, it will work for all devices.
Same logic if you are setting textfield programatically. Dont give fixed width

As said above, use your element inside a horizontal stackview. Unfortunately, if you’ve a iOS target iOS 9.0, you will have to use another trick. Your stackview will become a normal view which will contain your elements to align. After that, you can the element width to be equal to their superview with the multiplier use.
Per example if you have 3 elements inside your view but you want that the first one being larger than the two others by setting the multiplier with a certain ratio like 2:4 for the first one and 1:4 for the last ones :-)

Related

Xcode 9 - "Fixed Width Constraints May Cause Clipping" and Other Localization Warnings

I downloaded the new Xcode and in Interface Builder I'm having a ton of problems with warnings that say things like:
Fixed Width Constraints May Cause Clipping
It looks like this:
I do have localization for several languages and I understand the warning that in another language a label's size may change, but my app doesn't have this problem. I ran and tested it in Xcode 8 yesterday, it was fine. I don't want to spend hours and hours adding pointless new constraints.
Any suggested solutions?
I was getting the same warnings even without multiple languages in my app, which led me to find out what was really going on. . .
There are a few different things going on here. I was able to silence the fixed-width warnings in my own app by changing the width of the object spacings from fixed width to greater than or equal or less than or equal.
This can be done by selecting the object in interface builder, going to the size inspector and changing it there:
Or, select the constraint from the document outline, go to size inspector, and change it there:
As far as the warning at the top of your screenshot:
Fixed leading and trailing constraints with a center constraint may
cause clipping
Here is a screenshot from my own app in which I was getting the exact same warning:
I had the label with the # sign set to leading and trailing to the buttons but also to align the center with the rating label. Once I removed the center alignment constraint, the warning disappeared, but I was left with an improperly laid out set of objects.
It is then that I resigned myself to embrace the Stack View. As annoying as it is to use, when you get all of the constraints and settings right, it lays out beautifully and with no warnings.
Edit
As Repose writes in the comments, sometimes simply adding >= 0 will be what you need, as you are making sure two elements do not overlap.
You can try Disabling "Respect Language Direction" on per Constraint basis to silence the warning and see if it helps. Select your constraint and open Attributes/Size Inspector. Please see image attached.
If you are not planning on localizing your app to other languages, then this solution should not have any drawbacks. For localized apps you have to be more conscious of your label and font sizes.
p.s. This solution works for iOS. For macOS try >= or <= to silence the warning.
p.p.s. Labels in the picture below are much easier to create using AutoLayout and attributedString property on a single UILabel or UITextView using NSMutableAttributedString. The image is for demonstration purposes only.
For labels and buttons which are localized this warning makes sense and you should provide the necessary constraints so your labels don't overlap. If they don't overlap now they might in the future, so it won't hurt to provide the constraints.
Xcode helps you add these constraints automatically:
In the document outline of your storyboard click on the yellow arrow and either choose "fixed leading" or "fixed trailing", depending on where the text is on your screen (left or right). This will fix it for most issues.
If you have this issue with a Button without any text (only image), try to remove the "default title" which might still be set for the button:
With Labels, you can set Lines is 0 and Autoshrink properties is Minimum Font Size to remove Fixed Width Constraints May Cause Clipping warnings, like this:
Another quick solution !
For a UIButton by changing the title from plain to Attributed text also resolved my issue:-
I know this question has already been answered but what I did to fix this error in my case was to add the "Aspect ratio" property and then eliminate the width or height constraint this worked pretty well and was less effort, and I managed to keep the same output and adapt my view for the different devices.
Swift 4 , Xcode 9.1 :
About this issue, I think your object don't know what it's the correct center position in the context of it's superview, and using remove, greater than or other leading/trealing settings most of times don't work correctly. First, you must check the correct constraints of your superview.
If your superview/s are correctly setted, you can try to "explain" to your object what is the correct position in the view by setting the "horizontally in Container" constraint:
If you need fixed width constraint for button just set width constraint priority to 700.
I had the same problem, but when I changing to >= it automatically set the constant to 0, if I choose 60 for instance, the warning appears again. So I was in a loop with the problem.
I could fix embedding my Label in a View
Editor > Embed In > View
In Label I set Top, Bottom, Leading and Trailing with constant = 0
In View I set the constraints that I was expecting before.
I had the same problem when moving to Xcode 9 and found an approach that's useful for certain kinds of layouts. In my case, I wanted a table header in which two columns (UILabels) were of fixed width and another was of variable width. Regardless of how I specified column widths (including using constraints greater than or equal instead of equal, etc.), I kept getting the warning about possible clipping. In my case, I wanted the variable width column (UILabel) to clip if necessary. I could have just ignored the warning, but don't like doing that.
The approach that worked here was to create a UIView with appropriate size constraints and embed the UILabel as a subview in the UIView. Then truncation happens if necessary and I get no warning. This works whether the UIView/embedded UILabel is in a StackView or not.
This is essentially the same approach as that of Haroldo Gondim but here you can see it also works with or without StackView.
The following image shows the approach, with and without StackView. "SpacerName" is a variable width UIView containing a label and "SpacerPD" is one with a fixed width of 80. [Colors are not significant; just there to show where the views are.]
As you can see in the image below, I was having the error "Fixed Width Constraints May Cause Clipping" because although I had set my textbox to be vertically centered and my label to have a left margin constraint, I hadn't defined a constraint for the text box in relation to the label, so XCode was alerting me that the textbox could clip (be rendered above) the label.
After adding the left constraint to the text box to always stay some distance apart from the label the error was considered solved by XCode and it didn't bothered me with the constraint warning anymore.
I had a similar issue when trying have the button with the same paddings from the edges of the super view.
I've ended up using horizontal center constraint and equal widths constraint to the super view.
To Fix The Error: Fixed Width Constraints May Cause Clipping” and Other Localization
You need to select the view/object, go to the "Show Size Inspector", find the Width Constraint and set the Constant to Greater or Equal to:
To Fix The Error: Leading/Trailing constraint is missing which may cause overlapping with other views
This means that the view/object Xcode is complaining about, is missing a Leading or Trailing Constraint to a neighboring view.
While holding control, drag to a near by view/object
Add a Leading or Trailing Constraint

Auto height setting for labels in iOS

I have previously worked in Windows phone and see that every control in windows phone has an Auto property, meaning occupy the size of the content.
I see that in iOS such a property does not exist. When there are dynamic data to be bound to a UILabel, I always need to calculate the height of the data and then assign to the UILabel. This takes a good amount of time and bit painful. Is not there an Auto property or am I missing anything here?
iOS has AutoLayout which is really helpful, get familiar with it.
Click on the Label
Click on the pin constraints button (little square button)
Add your custom LEFT, RIGHT, TOP margins or LEFT, RIGHT, BOTTOM margins
Click on "Add 3 Constraints"
Set number of Lines to 0 which means as much lines as view needs
Then you probably got warning lines, but you can solve them
Just click on fix constraints button (little triangle button)
Click update frames
UPDATE
Important: the answer to your question is to PUT NUMBER OF LINES TO 0 you can use that UILabel with 0 lines(which is autosizing) with frames and AutoLayout. AutoLayout is just a friendly suggestion that can be helful to setup views. Also put Line Breaking Word Wrap
Here you go also with some useful links for working with AutoLayout. AutoLayout is great because you don't care anymore what size is the screen, what orientation has the device at that moment. You just need to setup everything correctly and everything works amazingly but if your setup is wrong then AutoLayout might become your enemy. So start learning and experiencing right now.
Very good point to Begin learning AutoLayout
If Your are being lazy, start from video tutorial series
Great iOS7+ table view tutorial with autoresizing cells
Also check out this Stack Overflow discussion
You need to familiarize yourself with Auto Layout:
Auto Layout dynamically calculates the size and position of all the
views in your view hierarchy, based on constraints placed on those
views.
Just give top, left and right constraints and make label's numberOfLines to 0. That's it. Label's height will resize automatically.

Align labels in swift

I have a question! I need to create "labels" aligned to the longest label on the left. How can I do it? Thank you!
You should be using AutoLayout for this.
I would recommend that you first try to use Resolve Auto Layout > Reset to Suggested Constraints at your storyboard and see if Xcode automatically positions the label the way you want.
If it isn't positioned the way you wanted, you would have to manually set the constraints by using control click on other objects to set your appropriate constraints.
Here are two great tutorials about the usage of Autolayout which is updated for iOS9. Adaptive AutoLayout and Autolayout.

3.5inch screen cannot accommodate all subviews

I have 3 labels .First one at the top of the screen, second in the middle and third below. I used both( size class(cW rH)+ autolayout)to layout the labels.The third label appears in all sizes expect the 3.5inch screen. Can autolayout and/or size class help me accommodate my third label in some way?.I know putting a scroll view or doing programatically will help me achieve what i want but just want to know whether the current iOS SDK is intelligent enough to cut this.
You have to use different constraint for each label.
Please check below screenshot to understand how to set constraint to each label.
May be it will help you to set labels.
I have Submit label as third label and I did following for it . Try using it and dont forget to click add constraint after doing it

Resizing a UITextView in UIScrollView using Auto Layout issue

I really hate to ask here because I usually try to figure things out on my own. But on this one I've stuck for days and can't find a solution anywhere online.
I have a ScrollView containing multiple subviews. I've got an image view and two labels at the top with fixed heights. Then there is a UITextView and another ImageView (see pictures).
I add the text to the text view programmatically so it should have a dynamic height and the ImageView should move to the bottom so you can scroll. I don't want the TextView to be scrollable in itself but I want all the subviews to move as well.
I know I should be able to solve this issue using constraints. But I feel like I've tried everything and nothing worked yet. It worked when I disabled auto layout and moved the views manually. I'm wondering if there is a better way though.
As you can see I pinned the TextView to the ImageView above with a 1,000 priority and to the ImageView below with a 1,000 priority. The height constraint can not be deleted so I set it to the lowest possible priority. The ImageView on the bottom is pinned to the bottom of the superview with an absolute height. Its height constraint also has low priority. (I can post an image of the ImageView's constraints, if it helps)
I also tried adapting the frame programmatically but this is not working well in combination with auto layout. (If it helps I can of course post the code)
What am I doing wrong? Shall I just disable auto layout and do it manually? This seems unclean to me. Is it even possible to do?
I really appreciate your help :)
Greets,
Jan
Make sure the Scrolling Enabled attribute on the UITextView is unchecked in Interface Builder. I believe that the Auto Layout system takes that into account when it calculates the intrinsic content size.
If somebody is struggling with a similar problem: This is what I ended up doing:
Remove all subviews from the ScrollView in IB
Programmatically add a single UIView to the ScrollView.
Add all the views to the UIView as subviews (move them using setFrame)
Set the Frame of the UIView appropriately to the subviews
Set the ScrollView's contentSize to the size of the UIView.
A little more work but it finally works. This follows Apple's mixed approach guidelines that can be seen here (look for UIScrollView): http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/index.html
The problem is the height setting. You somehow have to try to delete it. If you have added other constraints that are "sufficient", it should become deletable.
At the moment you have one user constraint for the height that is "Greater or equal" and an "Equals" constraint as well. Clearly, those are not working well together.
Maybe there is a conceptual error as well. The lower image view should not be fixed in position, so the distance to the lower image view will not be a "sufficient" constraint to let you delete the fixed height.
I think it should work if
the lower image view has a fixed height and
a fixed distance to the text view above, and
the text view has a minimum height as well as
a fixed distance to the image view above
(which should be fixed in relation to the superview).

Resources