So I consider myself a relatively bright person, not genius but not moron but I cannot seem to understand even the basic layout principles of iOS and wondered if someone may be able to point me to something that would help.
Specifically I am working on a storyboard on a view with an ImageView and a CollectionView. I have tried to get the image as a header but every single tutorial that I have tried doesn't seem to work (a problem that I have seen recurring with iOS development).
So I put the imageview with constraints at the top, left and right so that it sits in the middle at the top. The problem that I have is that when I put the collection view underneath the image, it either dissappears (most of the time if I add ANY constraints) or it sits over the top of or beneath (as in behind) the ImageView. Is there any concept of relative constraints? Why is this so hard in iOS? IS there a working tutorial that doesn't require me hand coding the layouts? Is it better for me just to hand code the layouts as the storyboard is the biggest time sink I've ever seen?
Your thoughts and help will be hugely appreciated.
It should just work. Try this (I tried and both the imageView and collection view show):
What I did:
Add UIImageView with top, left and right constraints;
Add height constraint to image view;
Add collection view with bottom, left and right constraints;
Add top constraint to collection view relative to uiimageview top + uiimageview height.
Result:
Related
I have a UICollectionViewCell in which I want to display some UIButtons with in some custom grid, like this:
As you can see I have different kind of arrangements for the grid, I actually have these possibles types of arrangements that depends on the data I have:
I'm trying to know how to accomplish this, I don't know what's the best way to have this different types of grid arrangements inside the cell. One first though was to make a different UICollectionCiewCell for each arrangement but since there's also other views inside the cell like the white rounded view, the title and the subtitle, I think that's not the best way to solve this. Then I though about using XIB files or maybe a ContainerView but I really don't know what's the best way to do this.
But the biggest problem here is also how to set the constraints for this type of view, I was trying with the constraints in storyboard but that didn't help a lot, maybe I should set the constraints programmatically or maybe even do a XIB file for each arrangement and each device haha.
This is what I had in my Storyboard that didn't work as I though:
All the buttons are inside a view with a constraint of aspect ratio, bottom, left and right constraint to 11 each one.
I have the buttons with aspect ratio constraint, the red views are just spacer views with width or height of 2 as a constraint, and all the buttons have top, left, right and bottom constraint to 0 with its closer view.
But as I said before this didn't work well.
Please comment or answer any idea or question you have.
I'm trying to figure out how to use autolayout, and there seems to be a lack of info about it on the internet. I placed a view within my view controller with three buttons inside it. Before I place any constraints, the buttons show up on the preview. However, as soon as I make ANY constraints, the whole sub view completely stops showing up in the preview. I made a constraint to center vertically, and then one to place it 25 pixels from the left edge. It should know exactly where to place it, but still nothing shows up.
Any ideas on why constraints cause my buttons to not show up?
With Autolayouts the constraints should be as clear as possible. You can try by adding size constraints as well as fix(right, top or bottom) constraints if necessary.
When you don't use auto-layout it positions everything manually. When you enable auto-layout it switches this behaviour off so you have an unconstrained object, which is why it dissappeared.
Turns out I didn't have constraints on the size of the sub view, so it didn't know how to center it. I didn't think I needed that because I thought it would default to what it's already at.
I know there are a couple of questions around but I could not figure out how to do this (none of the answers there helped me), so here is my version of the question.
I have an UICollectionView which is set to scroll horizontally. Each cell has an UIScrollView inside and inside the UIScrollView I have an UIImageView.
Now, the images displayed by the UIImageView are loaded from the internet and I can't figure out a way to make the zooming work correctly using storyboards and autolayout.
If I set constraints that tie my UIScrollView to it's container everything is ok. The moment I tie the UIImageView to the UIScrollView XCode starts to complain that the UIScrollView's size is ambiguous.
If I don't make any constraints in InterfaceBuilder the images are not the displayed in the correct size (doh!).
So, I'm stuck. I don't know what kind of constraints to make and which view needs to be tied to what. I know that my perfect world result is a view controller that behaves like the native iOS Photos app. That is, the image is displayed as large as the screen (with a black band at top and bottom or left & right depending on image's orientation) and that you can zoom it in and pan it around.
Help please!
Note
I did read these posts before posting my own question
UIScrollView zooming with Auto Layout
UIScrollView Zoom Does Not Work With Autolayout
“Pinch to Zoom” using AutoLayout
I don't know if it'll help you with your zooming problem but Apple provided a technical note about using scroll views with auto layout: Technical Note TN2154, UIScrollView And Autolayout
The important part with scroll views is, that the constraints of the subviews inside the scroll view are not bound to the scroll view itself, but to the scroll view's parent (in your case the collection view cell)
It works
You can easily do it. Well not really easily, i have been struggling for quite a while!
I managed to implement auto layout within the scrollable area. Just it is vertical only
Set intrinsic size to a "placeholder" (to scrollable view)
Don't set contentSize at all
Attach right constraints to the wrapper (so it will be relative to the parent view)
self.view.addConstraint(NSLayoutConstraint(
item:self.view, attribute:.Trailing,
relatedBy:.Equal, toItem:contentView,
attribute:.Trailing, multiplier:1, constant:0))
scrollView.setTranslatesAutoresizingMaskIntoConstraints(false)
So, in your case, your contentView right side should be attached the right side of the image
Try it out, certainly you will have your zooming to work
Here is an example, it may help you
https://github.com/nchanged/swift-content-manager/tree/master
I have a pretty complex view and am trying to update it to work with autolayout (while I learn autolayout at the same time). Here is a screenshot of my view:
The only thing that you can't see is that all of these views are wrapped in a containerView and that container is sitting in a vertical scrolling UIScrollView.So if there was a really long description or something you would be able to scroll vertically.
My first problem is that I can't figure out how to get the descriptionView (red background) to adjust it's height dynamically (I have scrolling disabled in IB and again in code). I think it might be related to the bottom constraint to the imageScrollView.
The second problem is that the imageScrollView needs to be removed half the time. It holds multiple pictures of an item. But sometimes the item doesn't have pictures so I just want to remove the scrollView in that instance. I call removeSubview in code and want things to just readjust without having to set up a bunch of new constraints. So I added a top space constraint from the Question/Comments label to the bottom of the description and changed its priority to 900 instead of 1000. This seemed to solve my first problem and when I remove the imageScrollView the description view resized to the size of the content. However my scrollView that holds all of the content didn't scroll anymore, I am assuming that the containerView's height got screwed up or something.
Edit: the more I think about this the more I think that figuring out how to add a contraint for the size the descriptionView's height to match the content will solve the other problem as well. Here is another screenshot with the current constraints.
SOLUTION
I don't feel it is fair to post my own solution as the accepted answer. So I am posting my solution within the question, and giving the accepted answer to Nikita for trolling all the questions related to textViews being sized to their content.
My first problem is solved by using this: Github - Resizable Text View
The second issue was just a matter of setting up the constraints correctly. The red textView had a constraint to the bottom of the superview(contentContainer) (the superview which sets the height of the the main scrollView.) So when I removed textView then the contentContainer view didn't have a height constraint. So I ended up removing the constraint from the textView to the superview (which is the contentContainer) and made a constraint from the bottom of the commentTextView to the contentContainer. This solved the problem. Whenever I remove the red textView everything shrinks up the way I desire.
I'm not sure, that my solution is the best one, but I've done it in the following manner (I think that will help you with red text view): How do I size a UITextView to its content?
Unfortunately, I didn't understand you about second problem. Please, provide more details. Thanks!
Don't remove the image view. Just give it a zero-height constraint. That way you don't have to mess with any of your other constraints.
I'm having a heck of a time with using some of these constraints. I'm simply trying to add a UIView in the IB so that I can inject other views into as needed. However, I can not get the positioning right. No matter how many Constraints I add or remove I cannot seem to remove the 'Top Space to: Superview'. I'm simply trying to pin the UIView to the bottom and have it float up for the different screen sizes. This 'Top Space' is forcing the UIView off the screen and I can't seem to remove it nor de-prioritize it.
UIView Constraints (doesn't work) - sorry can't post images yet
http://i1322.photobucket.com/albums/u574/dneely79/uiview-constraints_zpscae66ed9.png
On another note though I can remove the UIView and add a UIImageView and I can get this to work. So, for now I'm actually injecting my views into this element instead of a UIView. Its working, just feels dirty.
UIImageView Constraints (Works)
http://i1322.photobucket.com/albums/u574/dneely79/uiimageview-constraints_zps726da545.png
Anyone else have any thoughts on how to overcome this? Its been driving me mad and doesn't seem to make much sense to me.
I've already tried this help link (though trying to anchor bottom and not top)
Xcode 4 and Interface Builder: Editing Vertical Spacing Constraint (Anchor Top, not Bottom)
Thanks ahead of time for any help or advice on this matter.
This was a semi-goofy mistake on my part based on the defaults that IB gives you. I went back and better analyzed my own pictures.
After noticing a height set on the UIImageView and not UIView, I added a height and was able to successfully delete the Top Space.