I have this UICollectionView, layout scroll direction = horizontal.
I don't want it to occupy all page (as it does when you create it in IB), I need to have a header (another view) above it. This won't work using Accessories -> Header Section, when the scrolling is horizontal this header section sits to the left of the collection view. And it's not fixed, as I need my view to be.
Thanks
I was doing something similar and ended up just putting a UIView at the top that allowed me to put whatever I needed up there. It just solved a lot of problems for me.
I thought it was strange the way the header operates in the horizontal scrolling mode. It isn't really a header at all.
Revision -- I don't use IB at all, so it is all hand-coded -- but either way, you can do it. I've attached a screenshot of something I'm working on now -- it has a picker view and a youtube video at the top, where your header would be and a collection view down below. You could, of course, make your header view whatever size you want it to be and with whatever content. In this case I also have a footer that is a different view as well, but the concept is the same.
Related
I have the following scenario...
When I initially load a UICollectionView, I need it to slide up from the bottom of the screen without a header. This is pretty easy.
There is an "Add" cell that takes the user through the process of adding an item. At the end of this process, we display the list again, but this time with a header. The header needs to fade in and, at the same time, the updated list slides up from the bottom.
The requirement is that the header scroll with the list after both are in place, which is pretty much the default behavior.
The problem I'm having is coming up with a workable method for animating the list slide while the header is displayed.
One thought is simply animating the height of the header. Basically, start it with a height equal to the view height, then animate it to its final size. This would automatically draw the rest of the list up, making it look as though it were sliding in.
I've tried several variations of this method with no success. I can set the height without a problem, but I haven't been able to animate it.
I had thought just returning the appropriate height from referenceSizeForHeaderInSection and reloading the data would handle it. At least that's what I gather from SO messages. I've also tried invalidating the layout and performBatchUpdates.
Would this be simpler if I placed the contents of my header in the first row of the collection view and then try animating the height of row 0?
I'm not sure which is the best strategy.
OK, I found the following which was easily adapted to my scenario...
iOS Animating UITableView Header
Here's a Wayback Machine link to the original post. It may take a little while to load. Be patient.
Wayback Machine: iOS Animating UITableView Header
And here's a GitHub link with sample code...
GitHub: MichiganLabs / AnimatingTableViewHeader
I'm trying to do a custom layout like the Chanel app you can find the app in the Appstore.
https://itunes.apple.com/us/app/chanel-fashion/id409934435?mt=8
I know they are using an UICollectionView, but no clue how to start.
The interaction feels like a tableview mixed with a paginated scroll. When you scroll the elements grow, and the first element position itself at the top.
Start with dragging & positioning just one UIView. See UIGestureRecognizer docs and look for existing examples of movable views. You'll need an UIPanGestureRecognizer to move the view.
Resize the view depending on its Y position.
Create & position an image inside that view depending on the view size using a couple autolayout constraints.
Note that Chanel app has different constants for these constraints. With a minimum view height, one image's top is 80% height, for another image it's 90% height. Make sure you can manipulate constraints from code (I think it's a good idea to create everything from code there, XIBs are not very flexible).
Make the view "anchoring" to certain points (e.g. top = -75%, 0%, 75%, 90% from what I see in the Chanel app) when you stop moving it. Just find the nearest one and animate the view to it.
Once you did it with 1 view, move all your work to an NSView subclass (if it's not yet there) and create a collection of these views.
You can create UICollectionView, but I'd rather do it with a simple NSArray: I actually don't see a reason to use UICollectionView here; it's a very simple structure. Anyway, you write your own gesture recognizer (don't you? I can't see another way) - so what's the point to use UICollectionView? If you want to expand the app functionality some day, UICollectionView will unlikely help you with that. Well, it's my hypothetical approach, you can find another one while working on that.
Position other views while you're moving an "active" view. Do it by hand, without any UIScrollViews.
Write a function that reflects the Y position of the "neighbor" views while you moving one. It should "slow down" to the bottom of screen.
I realize this is a general question, but any direction would be helpful.
So I am using this module https://github.com/maxep/MXSegmentedPager to try and recreate Twitter's profile page. One thing I am unsure how to do is get content above the HMSegmentedControl but is still pinned to it so it scrolls out of the way. When i add subviews to the parallax header view (in the xib file) they are totally static and dont move with the HMSegmentedControl menu.
Any ideas how I would tweak it? I dove into the MXSegmentedPager.m file but to no avail.
I suppose what I'm looking for is can i expand and put content inside a UIPageControl or in this case HMSegmentedControl?
So I was pointed in the right direction by the author of the module I was using, MXSegmentedPager. His MXParallax header already has space for content above the HMSegmentedControl and can be used for more than just one image.
Turns out any subviews you want to pin need their constraints to be referenced to the background imageView, not the superview. Only the background imageView itself its set to the superview of the nib.
Also, when putting several things in a uiview thats sitting on top of the background imageView, make sure it is referencing the background imageView but not on all 4 sides, otherwise it appears static. Typically you will want to set it to bottom left and right, and set a fixed height equal to height of the header you want to view when its at its resting visible point.
So, in hindsight fairly simple, but I overlooked it.
I have a UICollectionView with size: 768x1024 with a navbar on top. My custom UICollectionViewCells are of size 200x200. The problem is that when I keep adding cells and I reach the bottom row, I can only see part of the 200x200 cell. It won't let me scroll further before it bounces back up. Any ideas on what the problem could be?
EDIT:
I add cells via:
insertItemsAtIndexPaths:
The issue was just adding AutoLayout constraints to the View Controller which housed the UICollectionView. To do this, select the View Controller in Storyboards and click on "Editor" on the top. Then, "Resolve Autolayout Issues" > "Reset to Suggested Constraints..."
Check whether you have changed the minimum spacing attribute of collection view in size inspector of collection view. Setting it back to default values(10) was the solution for me.
The problem has to do with your UICollectionViewLayout, since it is the job of the layout to state how large the actual scrollable content is, and to ask for a refresh of that information when necessary. But unfortunately your question reveals nothing about how you are doing layout or how you "keep adding cells", so no specific answer is possible.
EDIT (after your edit): It is not enough to call insertItemsAtIndexPaths:; you must also add the items to your model (the data source). Otherwise, the layout doesn't know about them and doesn't make the scrollable content bigger (and lots of other bad things happen too).
i think you use the collection view in an unsual way, but if the content area of the scrollview of the collection view extend the frame size of the collection view you have to set the virtual size with the property 'contentSize' :
self.collectionView.contentSize = CGSizeMake(768,900);
I had a similar problem but due a gradient that it was at the bottom of the collection view and the user was not able to see the last rows of the collection view.
The way I've found to solve it is in the Size Inspector, set the Height of the Footer Size to a number that works for issue.
I know that maybe, it's not the best solution. But it works for my problem and it's really easy to use it.
Collection View that doesn't show the last row:
Collection View after setting the Footer Size Height to 40:
I am using section headers to show a small image 'floating' next to cells from appropriate sections. The section header is transparent and contains only a imageview.
The initial problem with this solution was that the section header takes up height, which looked strange (there was unnecessary empty space in the beginning of each section + the image should be aligned with the top of the first cell when tableview is scrolled to the beginning of the section). The fix for this was to set section header height to 1px. The image was still in place, but the header didn't use any height and everything looked great.
However now I need to add a UIButton on top of that image, and unfortunately it doesn't work when the header has 1px of height. It is not hidden or covered by anything and it is drawn correctly, but the set selector doesn't get called. If I set some height, the button works.
In short - how to achieve either a working button in a section header that has virtually no height, or how to achieve a section header that has normal height but always overlaps cells (doesn't use any space when the tableview is scrolled to the top of the section)?
Any help will be greatly appreciated.
One way you may be able to get this to work is to add a transparent view over the table. You would intercept touchDown and touchUp. You could calculate whether they were over one of your buttons, and if so send them directly to the button, otherwise just forward them. the reason you don't get the touch events is probably since the touch does not fall into the header frame.
David H suggestion was my initial idea as well but I was hoping to find a more elegant solution. Anyway, that's how I ended up implementing this feature.
I kept the code as simple as possible (I'm sure it can be done in a more optimized fashion, works fast enough for my needs) - each image added to a section (no need for overlaying buttons anymore) was also added to a dictionary with section numbers as keys.
When my mask layer view (the transparent one added over my tableview) is being touched I simply check with CGRectContainsPoint if the touch corresponds to any of the views in my dictionary.