Dynamic TextView with storyboards and auto layout - ios

I have a view which has on top a UITextView then a series of other views. The idea is to resize the Text View on its content size and to move up all the other views.
I have set all the constraints in storyboard and if I change the height constraint value of my TextView from there, all the view updates fine.
On runtime I can resize the Text View frame to fit it's content size, but the rest of the view doesn't change. So I'm guessing I don't have to change the frame but only the height constraint.
Any suggestion on how is it possible to do this thing on runtime?
How can I change the Height constraint value in code?
Is there any way to "link" a constraint to the controller from storyboard?
Thanks for helping

Make an IBOutlet of height contraint from nib to your .h file.
Lets name it textViewHeightConstraint
self.textViewHeightConstraint.constant = textView.contentSize.height

U need to set a textviews property Scrollable to false

Related

Change value of UILabel inside UIStackView in .xib file

I am creating a vertical UIStackView inside a UIView and placing UILabel elements inside it.
Now, I want to change the height of Label inside the UIStackView. But the height property seems to be disabled.
Alternatively, I am able to set height constraint for the label and change it's value programatically. I want to know if there is a way to change the value in the XIB itself as my purpose is to set a static value and cut down on adding code for it.
First add UIView in UIStackView and Then Add UILabel under view. Set label's constraint. Now you can just change the UIView Frame from Size inspector, it will automatically change the label frame.

Autolayout - Make superview height equal to subview height + constant where subview is textView

I have a UIView and inside the UIView I have a UITextView. The UITextView does not scroll, instead I set it programmatically to its full height with the following line of code :
self.textView.sizeToFit()
Through the interface builder, I set the following constraints for the UITextView , including superView.bottom = textView.bottom + 25 :
But then this is the result that I get when I run the app :
If anybody has any idea how could I fix this to fit the whole 'extended' textView, that would be really appreciated if you could let me know.
Thanks in advance.
Use a label instead of a text view. The important difference is that a label has an intrinsic content size where as a text view doesn't (because it's intended to scroll its content). This allows the label to work with the constraint system to display all of the text (without you needing to calculate the size).
If you stay using the text view you should add a height constraint and calculate the required height and configure the constraint appropriately.

iOS Scroll View doesn't scroll with auto layout with views added in programmatically

I have a ViewController with a scrollView and a content View inside.
Some labels and stuff inside the Content View as well.
Now after that, when the view load i have to pass in data from other places to this view controller, and then load some other views by code.
The scrollview Content height and height did get updated, and i did place the loading and adding of the views at ViewWillAppear. But even if the content size is bigger than the height of the scrollview, i just can't scroll it.
Scroll View Height:667. Scroll View Content Height :1632
ContentView Height :1632
Your scrollview did not scrolled because you gave fixed size to content view.
Don't worry, just make the outlet of height constraint.
Check below image , how to crete outlet of constrain,
Note :- You need to create out let of Height Constrain.
From your image.
And now set in your viewDidLayoutSubviews
-(void)viewDidLayoutSubviews
{
NSInteger screenheight=[ [ UIScreen mainScreen ] bounds ].size.height;
if (screenheight > 504 + 64)
{
_contentviewHeight.constant = screenheight-64;
}
}
And last but not the least , Don't forget to remove Tick from Adjust Scrollview insects,
In case of Autolayout, whatever view you are adding to scrollview. You have to add constraint (basically top constraint) so that Scrollview would calculate contentsize automatically.
refer below to add constraints programatically.
iOS create NSLayoutConstraint programmatically for table view cell content
Edit :-
Like you said SView is in storyboard. So create the constraint from storyboard itself on SView.
And E,R and H View will be added constraint programatically
And the link is just an example
You will use [self addConstraint] instead of [self.ContentView addConstraint]
Moreover refer this one too :-
iOS Autolayout Vertically equal space to fill parent view
OKAY, Finally.
After trying and retrying and to no avail.
I just gave up on putting auto layout on the ViewController which have the scroll view itself.
So I untick the auto layout, and then VOILA.
Apparently, the view controller which have the scroll view don't need autolayout. Just the views that i put in via code need auto layout in their storyboard. After i adjust all the constraints in the view properly and never giving them aspect ratio constraints but just fixed their width and height. Done.
So I hope anybody who have the same frustration as me see this and heed my advice. Don't bother putting auto layout on the scroll view or its content View. Just Untick it altogether. Do the autolayout for the views you want to put in. You just have to specify the views' width and height properly and it will work.

Set height constraint for UITextView

I'm fairly new to iOS development and am having a hard time sizing a UITextView to it's content. I've found several examples of calculating a strings render size and/or updating the frame size of a textview, however I can't seem to get those to work.
When I add a UITextView to my view it adds a Height constraint which I think is locking it to a specific height. How can I work around it, update the constraint via code, and/or get my UITextView to resize vertically to show my content?
You can create an outlet to the vertical size constraint, and then adjust the .constant property of the constraint to amend the height of your text view.
A UITextView inherits from UIScrollView. As part of it's logic, it changes the height of its contentSize property to allow the user to scroll vertically to any portion of the TextView's content.
I would recommend using the ContentSize property of your UITextView to figure out how "tall" your content really is. You can then set the frame of your UITextView accordingly.
OR: You could figure out the size of your text using the right method from the NSString+UIKitAdditions category.
If you don't want autolayout then disable it in the xib file.
If you want to change the contraint and it's value this tutorial will help you to deal with autolayout.

how do I use UIScrollView in Interface Builder?

While I've used UIScrollView successfully in the past by manipulating it programmatically, I'm having trouble getting it to work by setting it up exclusively in Interface Builder.
I have a simple "about" page in my iPhone app. It has a UITextView, some icons, and links to my other apps. I have added all of these views to my UIScrollView, arranging them so that their total size is > 480. When I launch my app, the scrollview displays only the contents that fit on the screen, and nothing scrolls.
Is it possible to do this entirely via IB, or must I manipulate the contentSize via code?
You forgot to set the contentSize property of the UIScrollView. Strangely enough you can not do this from Interface Builder. You will have to do it from the view controller managing this scroll view.
Boby_Wan's answer got me thinking, and I found the following solution to configure the UIScrollView's contentSize from Interface Builder:
Select the UIScrollView in the Storyboard scene
Go to the Identity inspector, create a new User Defined Runtime Attribute (click the + button)
Change the attribute Key Path to contentSize
Change the attribute Type to Size
Now set the Value to {desired content width, desired content height}
eg setting the value to {320, 920} will let the user scroll down a whole extra screen on the iPhone.
(I am using xcode 4.3.3, the project's iOS Deployment Target is 5.1)
When I first did this I received the following error:
Illegal Configuration:
Size type user defined runtime attributes with Xcode versions prior to 4.3
MainStoryboard.storyboard
If you too get this error it is simple to fix: select the Storyboard in the Project Navigator, and bring up the File inspector. Find/expand the Interface Builder Document section, and there is a drop down for Development. Ensure this is set to Xcode 4.3
With Autolayout (iOS6+), you can avoid setting contentSize. Set the following constraints instead:
Pin the top of the scrollview to the top of its top-most child.
And pin the bottom to the bottom of its bottom-most child.
You can do it using only Interface Builder, go to the Identity Inspector (the third inspector tab) and add a new User Defined Runtime attribute with
Key Path: contentSize
Type: Size
Value: {width, height}
Now there is a way to make a UIScrollView scroll without leaving Storyboard:
Select the UIScrollView in the Storyboard, go to the Size
inspector and change the Bottom value (or whatever other value
you need to change) in the Content Insets section to the height of the content area.
Now go to the Identity inspector and create a new User Defined Runtime Attribute (by clicking the + button) and name it contentSize. It doesn't matter what Type or Value you fill in (you can even leave their default value).
This will make the UIScrollView work properly, although I don't know why the second step is necessary (I found out by chance). :(
one approach i have used in the past is to drag the scrollview out of it's containing view in interface builder, and set it's actual size to what want the contentSize to be.
what is not inherently obvious about interface builder is you can have unassociated views that are stored in the nib, but aren't a part of the main view the nib is primarily for.
in the view where you want it the scrollview to live, place a simple UIView, which you use as a place holder. (this is simply so you can visually design it's location. if you are just using the entire view, you can skip this step and use the second code snippet i supply at the end of this answer).
you can then populate the scrollview with controls, visually laying it out how you want it to be. give both the placeholder and the scrollview properties inside your view controller so you an access them at runtime.
at runtime, in - (void)viewDidLoad
scrollView.contentSize = scrollView.frame.size;
scrollView.frame = placeholder.frame;
[placeholder.superview addSubView:scrollView];
[placeholder removeFromSuperview];
alternatively (if you didn't use a placeholder):
CGRect f = self.view.frame;
scrollView.contentSize = f.size;
f.origin.x = 0;
f.origin.y = 0;
scrollView.frame = f;
[self.view addSubView:scrollView];
finally, if you "lose" your scroll view in interface builder (it's possible to close it so it disappears from the design grid), don't panic. just click on it in the object list to the left of the design grid.
In Xcode 4.5 using Autolayout I have no Content Insets section in my size inspector. So I had to add it under User Defined Runtime Attributes and then it worked fine.
What you add in "User Defined Runtime Attributes" is keyPath == contentInset which is of type "Rect" (UIEdgeInsets, which has the same input as a Rect) and is defined as {top, left},{bottom, right}. The contentSize only defines the region of the scrollview window. contentInset defines the scrollable area.
I hope this helps somebody in the same situation.
Many of the answers above are misleading or outdated. As of 2017 (possibly much earlier) interface builder does support scrollviews with automatically sized content. The trick is that XCode gives a special, non-standard meaning to the constraints between the scrollview and the content inside it. These "inward" constraints will not actually affect the size of the content as you might otherwise expect.
This means that you can e.g. have your scrollview pinned to the bottom of the main view with zero margin, and also have your scrollview's content pinned to the bottom of the scrollview with zero margin, but the content will not actually be stretched by this. Instead the content will get its self-determined size (more below) and this will also be the size of the scrollable area within the scrollview.
Think of it like this - There is an asymmetry in binding constraints to a scrollview: Constraints from the scrollview to the "outside" (parent) world determine the size and position of the scrollview as usual. But constraints "inside" the scrollview are really setting the size and position of the scrollable area of the scrollview, by binding it to the content.
This is totally non-obvious because when you go to set the constraints XCode will always suggest the current spacing and it might never occur to you to intentionally change the inward and outward facing constraints in a way that conflicts. But you can and they have the meaning described above: one controls the scrollview layout and one controls the scrollable content area size.
I stumbled upon this by accident and then seeing how it appeared to work lead me to this article that explains it completely and cites the Apple docs source for this:
https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/
One last critical piece of information, about the content's self-determined size: You may feel that you are in a catch-22 here because you normally size your content to e.g. the parent view's width, but in this case the parent is the scrollview and as described above - the constraint will not affect your content size. The answer here is to remember that you can constrain items to items not directly neighboring in your view hierarchy: e.g. You can set the width of your content view to the width of the main view instead of trying in vain to get the scrollview to do it for you.
If you click on the Properties icon of any View Controller in Interface Builder, you can set it to a "Freeform" size in Simulated Metrics and change the size of the main View to be your desired content size.
This way you can create your ScrollView's content as if it were one large view. As it's only a simulated metric your View Controller will be resized to the window's bounds when it's loaded.
Setting up a UIScrollView via Interface Builder is not intuitive. Here is my checklist for setting it up:
Select the UIViewController's XIB file. In the interface builder's "Identity Inspector", change the UIView to class type UIScrollView
Under "File Inspector", uncheck Autolayout
Under "Attributes Inspector", change the size to Freeform. You can then stretch the Scroll View manually or you can specify a custom width and height under "Size Inspector".
In "Identity Inspector", add a new User Defined Runtime Attribute called "contentSize" of type "Size" and change it to a value like {320, 1000}. You cannot set this programmatically anymore and therefore need this step so that Scroll View knows that contents of the Scroll View are bigger than the window.
Just remove the autoLayout on your scrollview. then the code is as simple as this:
scrollviewName.contentSize = CGSizeMake(0, 650);
just create an iboulet property on .h file then synthesize on .m file. Make sure that the scrolling is enabled.
Yes, st3fan is right, UIScrollView's contentSize property must be set.
But you should not turn off autolayout for this purpose.
You easily can setup contentSize of UIScrollView with autolayout in IB only, without any code.
It is important to understand that when using autolayout contentSize of UIScrollView is not set directly, it is calculated based on constraints of all subviews of UIScrollView. And all you need is to provide proper constraints for subviews for both directions.
E.g. if you have only one subview you can set its height and space from top and bottom to superview (i.e. scrollView in our case) contentSize.height is calculated as sum
Vertical Space (aSubview.top to Superview.top) + aSubview.height + Vertical Space (aSubview.top to Superview.top)
contentSize.width is calculated similarly from horizontal constraints.
If there too few constraints to calculate contentSize properly small red button is shown near View Controller Scene item to inform about layout ambiguity.
If there are many subviews then it may be "chain" of constraints: top to topmost subview, heights and spaces between subviews and bottommost subview to bottom like in Danyal Aytekin answer.
But in practice in most cases it is more convenient just to add a empty view with required size and set spaces to top, left, bottom, right of scrollView to 0.
You can use this view as "content View" i.e. put all other subviews on it or if you already have many subviews and do not want move them and setup layout again you can add this auxiliary view to existing subviews and made it hidden.
To make scrollView scrollable calculated contentSize must be greater than scrollView size.
You can have UIScrollView in StoryBoard with Autolayouts.
Basically what do you need is:
Add UIScrollView
Add all constraints to it (like insets from top, left, right, bottom edges)
Add a 'container' UIView to UIScrollView
If you want just one-direction scroll (say, vertical):
set height explicitly (for the instance, 600) and link width to the width of UIScrollView.
If you want two-directional scroll just set both width and height.
Here's a solution to design ScrollView with a content larger than the screen entirely in Storyboard (well, almost entirely, you'll need to add 1 single line of code too)
https://stackoverflow.com/a/19476991/1869369
I find out a more convenient way.
1: Scale the size of the scroll view to contain all the ui inside it.
2: Add a iboutlet of the scroll view.
3: In viewDidLoad, save the frame.size of the scroll view.
(e.g. _scrollSize = _scrollView.frame.size;)
4: In viewWillAppear, set the contentSize by the CGSize you saved before.
(e.g. _scrollView.contentSize = _scrollSize;)
5: Done~
Add UIViewController
In UIViewController 'Attribute Inspector -> Simulated Metrics' set size Freeform
In UIViewController 'Size Inspector -> View Controller' set height 800
Add UIScrollView in UIViewController
Add all constraints to UIScrollView (top, left, right, bottom) and add alignment X = center
Add UIView in UIScrollView
Add all constraints to UIView (top, left, right, bottom) and add alignment X = center. Yes, same as for UIScrollView in #3, but for UIView
Add height constraint to UIView. For example 780
Run
Create a new Xcode Project
Navigate to Main.storyboard file
Select ScrollView from the objects library.
Set frame for the ScrollView.
Add another view to scroll view and keep the frame same as that of ScrollView.
Now to set its height and width dynamically you may this Configure A UIScrollView Using Auto Layout In XIB
You can do it entirely in Interface Builder without setting the "contentSize" property in code.
Put only one View in Scroll View. The Scroll View should only has this child view. You can name it as Content View. And put all contents inside this View later.
Align four edges of this View to the Scroll View (the View's superview) with zeros.
Set the width and height of this View. The width and the height will be implicitly treated as the "contentSize" of the Scroll View.
Simply put, the width and height of this View define the "contentSize" of the Scroll View. Because this View is the only content of the Scroll View, the size of this View is the content size of the Scroll View. It is quite reasonable.
I learned it from this tutorial:
https://riptutorial.com/ios/example/12812/scrolling-content-with-auto-layout-enabled

Resources