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
Related
I'm wondering how did Twitter implement it's profile screen. At first I thought it is a table view with a header (profile info) and section header (segmented control to choose tweets/media/favorites). It would make sense for me as the profile info goes away while user scrolls down, but segmented control stays, and that's exactly behavior of plain UITableView header view and section header. There is also an image view at the top, under navigation bar, but that's not what's important for me. Here's a visualization of what I think it is:
I tried to recreate it in Interface Builder and that's what I got. The slider drew my attention: it's different than in Twitter app, it starts at the top of table view header, not at the top of cells.
So… how did they achieve it? Did they put a UITableView in a UIScrollView and handled touch/scroll events themselves? I don't think so, since it's discouraged, but I can't think of another explanation.
I'm not sure about the slider, but here they did pretty good job with mimic twitter profile view. So take a closer look, maybe you'll find this helpful.
You can adjust the height of the scroll indicator to sit below your header using
tableView.scrollIndicatorInsets = UIEdgeInsetsMake(yOffset, 0, 0, 0)
yOffset would be the current on screen height of your header. If you adjust this as the user scrolls down using the scrollViewDidScroll method from UIScrollViewDelegate, it will achieve the smoothly changing effect that twitter uses.
This page goes into more detail on creating the twitter profile effect, building on the method described in the link supplied by njuri above including changing the scrollbar to be correctly positioned.
EDIT: I have create a very small app that represents perfectly the problem. https://drive.google.com/file/d/0B6sI4Feh1HJUb3pGa2pBUmY4QW8/view?usp=sharing
In the sample app, we just need to scroll down then press the button on the top bar to see the problem I am having
I am using https://github.com/jamztang/CSStickyHeaderFlowLayout to have sticky headers behaviors (like default UITableView) inside my collection view.
It works pretty well when scrolling through the collection view. I have a search bar outside the collectionview that allows users to filter the data with search text, everytime the user enters a letter, I'm refreshing the collectionview's data with the found data.
The problem is let's say there is currently 4 sections inside the collection view and that it is scrolled completely at the bottom. When I input a certian letter, it filters out everything but a single item (with a single header). The content size then changes for the collection view and displays the proper data, but then the header is too low (see screenshot).
I have investigated inside the flowlayout and inside the layoutAttributesForElementsInRect and I see it actually set the frame's origin Y to 0 (like it should be), but it seems the collectionview doesn't use this value and uses the previous one (which was when the collection view was scrolled down).
Any idea what could cause the UICollectionView to not use the desired frame inside layoutAttributesForElementsInRect ?
I tried to fix this issue, but it looks like it's impossible till UICollectionViewLayout mechanism is black box for us. Custom layout correctly returns updated frame to layout engine on reloadData:
But hidden engine not even asking attributes if they are equal. In your case you can use simple workaround. Just update contentOffset after reload.:
[self.collectionView reloadData];
self.collectionView.contentOffset = CGPointZero;
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.
I've been searching through here and googling like crazy for a possible solution to this problem. Thus far I'm turning up exactly nothing that actually fixes it so I'm hoping someone can help.
I'm working on the UI for a iPad app. I'm doing it using interface builder. I worked with storyboards briefly but I don't like them all that much so I'm sticking with IB for now. Unfortunately I'm not very experienced with the workings of IOS Ui but it's been going relatively smoothly so far. In my app, I have a view controller, which holds a view containing a pair of sub views. One subview contains a rather windows like header bar (i like the look). The second contains a UITableView. The UITableView is set up properly as far as I can tell, and feeds it's info from a data source using custom UITableViewCells. The UITableView is set to grouped though currently there is only one section. The table is in edit mode by default because I want the user to be able to add new items and use the VC as a selection dialog. The view controller is presented (rather than pushed) using UIModalPresentationFormSheet (again, because I like the view) but I don't know that has any bearing on the problem. The cell border is flush with the X origin, the only reason the text isn't currently starting there is because I went into my cell and move the label over, leaving a gap between the edge of the cell and the label containing my text.
The Offending View http://bit.ly/144cbjT
The Problem: The UITableViewCells, for some reason are positioning themselves at X: 0. This puts them outside the border drawn on the UITablewView when you set it to grouped style. I could probably just turn off the border and get away with it, but I like the look so i want to keep it. I've tried messing around with constraints and anchor points on the cells, the content of the cells, the table itself, the view... I've tried simply moving my cell's labels over a bit. I've also had clipping subviews turned on and off. I've made sure the controls are being loaded properly from the XIB. I've made sure everything is added as a subview where needed. I've made sure I've tried everything I could think of short of setting the cell's X position in code. But since I'm not sure how to tell where the border is, I'd rather have the tableview or the cell do the work itself.
The question: How do I fix this? The selection accessory should be outside the grouping box. The text should be inside, not bleeding out onto the background like it is.I believe the content of the cell should be displayed inside the border within the yellow area.
The odd thing is, this is my fifth or sixth table in this app and I've been doing them all basically the same. Thus far this is the only one I've had trouble with.
Can anyone shed some light as to what's going on?
Thanks in advance
I think that to get this in code, you'd have to do something explicit, so the most likely candidate is a messed up IB file.
Since it doesn't cost anything, I'd just delete the tableView from the IB and then re-add it. If that doesn't work, try recreating the complete IB.
Hope that helps
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.