OK, so I am learning to use UIScrollView in interface builder. since the scrollView itself does not have any content, I created another view, the contentView, to hold my controls and scrollable content. into this view I place controls, labels, etc and then in my code i set the contentSize of the scrollView to the size of this contentView.
My question seems stunningly simple and so obvious that I must have missed something somewhere. when I created this XIB in IB I got your standard empty iPhone interface window. I dropped a scrollView on top of it, it took up the whole window. I dropped a view on top of that, it took up the whole scrollview. I added some controls, which so far I can still see inside the contentView rectangle in IB.
My question is how do I work on/add controls which lie outside of the visible part of the contentView in IB? LOL. it seems so simple, but i just don't get it. I can set the height of the content view or drag the rectangle to whatever I like (and indeed this is the whole point of having a scrollview) but the fixed UI window from IB won't expand so i can see the "offscreen" part of the contentView to add more controls. It's like it's just fixed at that size because that's the size of one iPhone screen and it won't let me make it any bigger/taller.
what did I do wrong?
-a
You need to turn off all simulated user interface elements (like the status bar) to be "undefined" except for size, which you select to be "Freeform" from the drop-down, and then you can set the view height using the Ruler tab to be whatever you like.
For example, here I've selected a photo view controller, and set the size in the right side bar to be "iPad Full Screen" - but I could also change that to "freeform" to set any height I wished.
First add a ViewController by any which way you prefer. Then in interface builder, click on the view controller Icon (on left). In the connections inspector click on the ruler icon "Show the size inspector". There will be option list for simulated size, change to "Freeform" and increase the height to any size you want. Hope this helps.
neeever mind. you drag the content view up so that some controls are offscreen and then add more controls/expand to the part you just made visible by moving the top stuff off the top. in effect, you physically scroll the contentView in IB by dragging it with the mouse. seems a smidge counterintuitive, but whatever.
Set simulated size to freeform for the the view controller to a large enough size that you can add in your controls
You don't have to create a view to place inside the scrollview if you don't want. In your case, it sounds like it doesn't make much sense.
As for the second part of your question, you can place items directly on the scrollview (it is a view afterall), as subviews. If you want them to be off screen, then just set their frame up to be at those particular x, y coordinates you want it to be at. You will have to ensure your scrollview's contentSize property is large enough though to house your entire content, this is what allows scrolling horizontally/vertically.
You probably want to do the offscreen elements programmaticly instead of using xibs.
Related
I'm trying to make a ScrollView so that its size adjusts to the size of the text. I placed all the necessary constraints
, but when the application is displayed on the simulator, the content view starts from the safe area and also ends up to the safe area. Although I have pinned scroll view to superview and content view to scroll view.
I want the content to start not from the safe area like here ,
but from the start of the screen like here
in other words, I want to remove the blue bar from the top and bottom
Do you have any ideas how to do it?
Sometimes UITableView & UIScrollView can still show safe area even though you attach your View to top of Super View. You just need to add one line to solve this issue but make sure your ScrollView is connected to superView not safe area at the top.
Add scrollView to your ViewController and in viewDidLoad() just write:
scrollView.ContentInsetAdjustmentBehavior = .never
Check this answer for further details: Make UITableView ignore Safe Area
In iOS13, the default way when presenting a view controller was changed to the "sheets/cards" view. As I’m not using auto layout (why not, is not really important and relevant), I rely on getting position of elements based on the frame of the view.
Now, the problem with the new method is, that the view frame doesn’t really reflect the actual content size visible on the screen anymore. E.g. if I have positioned a UIButton at the bottom on the view controller based on the view.frame bottom coordinate, it will be now cut off, as the view is actually moved down in the amount of the nice "sheets/cards" visual indication at the top. The same problem is even more evident in an iPad, where centring another view in the view controllers view will be offset, due to the fact that the default presentation style is now a "sheet" in the middle of the screen.
I’ve currently changed everything to force the full screen version, but it would be nice to use the new fancy design.
Anybody has any idea how to get the actual visible rect/coordinates in the new style without changing things to auto layout?
Here are how they look. The "flower" is centered in the view and the X button should not be so close to the bottom or missing completely in the iPad version.
Finally figured it out. As I was setting the positions of items in viewDidLoad, the frame was not calculated correctly, thus resulting things being laid out incorrectly. When resetting the frame and positions in viewDidLoadSubviews, the positions were placed correctly.
I am pretty sure this has something to do with the dreaded AutoLayout. (been trying since 2days to get hang of it)
So I mastered it somewhat, but now I have problem where my UIScrollView is not scrolling fully down, pictures are much better at explaining these things
this is the scroll view
this is the content view
so the problem is the scrolling is happening but then again it springs back up. So I am not able to click on the signup button
EDIt 1
Edit:
I have created a little example on github for you to look at, here. The project illustrates the answer below and uses the techniques I describe and nothing else.
Original Answer:
couple of things I would advise here.
First, I know you've been trying for a while but remove all the current constraints (painful I know but). Do this for clarity as ....
The view should be the size of the scene, it looks like you want the scrollview to be the full screen so that too needs to be the size of the scene.
e.g. if you are designing at 6Plus by default the scene size is 414x736 so the view and the scrollview it contains should also be 414x736.
Only the content view needs to be the size of the real content you wish to show. Let's say for arguments sake that the content is 414x1000.
Now the constraints for the scrollview are simple. It needs zero spacing to all it's edges.
You can add the content view to the scrollview in a couple of ways. The way I try to do this varies from project to project and depends mostly on how complex the scene is. If it's a really busy scene I keep the content view outside of the scrollview in interface builder so that I can work on it easily and visualize the whole of the view. Then I add the content view to the scrollview in code.
If its a simpler view You can add it inside the scrollview in interface builder. Ultimately whichever way you do it, you can lose visibility of the content view in interface builder because the contentview is larger than the scrollview and the content gets obscured. So play about and find a good way for you.
Define the content view and all it's subviews. The content view needs to be taller than the scrollview otherwise it wont scroll. All of the content view's subviews need to have defined heights from top to bottom and widths from left to right. In your case the scrollview is scrolling vertically not horizontally so all the widths need to add up to the width of the scroll view BUT the heights need to add up to the full height of the content view.
Note: if you do this proportially your life will be easier later. If you do all this with fixed heights the storyboard will break on different device sizes.
Now the "tricky bit" and it's a bit counter intuitive. You need to pin the content view to the scrollview, remember the height of the content view is taller than the scrollview. In all other circumstances in Interface Builder pinning a view to a superview (0 padding) will adjust the height (or width) accordingly. For the relationship between a scrollview and it's content view this doesn't happen.
First pin the contentview
Notice the -400? Remember the content view is taller than the scrollview and we will change this immediately.
Select the bottom constraint (-400) that we have just created:
Select the drop down arrow next to the constant value:
Select Standard Value and type in 0 for the constant.
You should now have a storyboard with no broken constraints and if you build and run you should get a scrollview as desired.
Your bottomspace to superview on your content view is set to -74.0, I don't know if there is a reason you had to do that, but try setting it to -8.0. I think your scroll view is scrolling up to the 0.0 mark automatically
I have an app with a primary view that has a UITabBarController with 5 tabs. Each tab is a UINavigationController.
In interface builder, I'm customizing the background of each page by dragging a UIImageView and setting it fullscreen. The image I'm setting to the view is 640x960. I am setting it to be Aspect Fill.
However, what I've noticed is that it is not where I would expect it to be. When navigating between by tabs, the image seems to be shifted down from where it should be.
Also, when pushing a new view to the navigation controller, the background of this new view isn't offset in the same way as the tabbar one, and it is also slightly dimmed.
How can I set my UIImageViews on each page to be aspect correct and fill the screen 1:1? Also, how does one disable the dimming when pushing a view to the navigation controller?
Thanks for any tips, and apologies if this is covered in another thread, I couldn't find an answer searching the site.
Assuming that you are using the IB to setup your views, you should select navbar/tabbar options to reflect what will be on the actual page. That should place your image correctly. I would also recommend that you make both a low res and hi res version of your background images -- 320x480 and 640x960. Of course, your size may need to be adjusted (reduced) for the navbar and/or tabbar which will leave less than 960 px of vertical height -- probably more like 920px if you are in portrait mode. Then you add #2x to the base name of the hi res version, this would account for older iPhone screens.
Once you have the image placed correctly, resizing should be unnecessary. You can have the image automatically resize width and height using the little arrows on the layout page -- that's a bit hard to describe. It can also be done in code -- if you still need that I can provide a sample.
Maybe you need to set all AutoresizingMask in order to resize the UIImageView properly on each view. And to main aspect ratio u should use either AspectFill or AspectFit on the contentMode.
In my UIViewController that I use for my UIPopoverController, I have a label on top, a segmented control, and then a UITableView below it. When I created my .xib for the content view, I put in a table, and centered the label and segmented control within the .xib.
When I present the popover, I do not want it taking the whole screen. I use about (800,700) points to display the popover, but then the labels do not look right. They are not centered within the popover since the popover is now smaller than the .xib. What I did was move the label and segmented control to the left to make it centered in IB. That doesn't seem the best and future proof way of doing it. I was hoping I could do something programatically by taking the width size and dividing by 2 or something and centering based on that. Any advice? Thanks.
There are a couple of options:
Check out the documentation for the popoverContentSize property on the UIPopoverController, you should set it to be the size of the XIB that provides the content (so the XIB and popover both have the same size/contentSize, essentially).
Set the autoresizing masks on the subviews in the XIB so that they lay themselves out correctly dependant on the size of the XIB. To center them within their parent view you do NOT want the left and right mask setting (they should both be deselected in Interface Builder). This guide covers centering subviews: http://www.techotopia.com/index.php/IPhone_Rotation,_View_Resizing_and_Layout_Handling