I'd like to implement an Interface that shows an indexed UITableView. In the table view I want a view displaying labels and image views related to the table view.
Together they should behave as if they were on one scrollable page.
First I tried to solve the problem with a tableHeaderView (not a section header). But the problem is that the section index overlaps the tableViewHeader.section index overlaps the table header view
If have seen approaches to solve a similar problem with a UISearchBar, but I can apply them to me problem
Then I tried to embed the tableview as a container view into a container viewtable view in a containerView
The problem here is that you can scroll the tableView inside of the container View, while the top view is still visible.
I also though about fading the index in when the content offset is equal to the height of the top view. But there seems to be no official way to get a hold of index bar view.
Any ideas?
Related
I am this library for parallax effect.: https://github.com/romansorochak/ParallaxHeader
When i am scrolling tableView up, the section header title comes on the top of every view.
This is the image when i scroll Table view up, as you can see content of Name and PHONE NUMBER is hidden but title is not hidden.
I am this code to send table to bottom of every View but it is not working : self.tableView.layer.zPosition = 0.
I tried with many way, but did not find a solution. what may be the solution?
I have two container views controlled by a segment controller. When the selected index changes, one view is set hidden and the other one is set visible.
One view contains a tableview, and the other one is a Google Maps view. I tried to remove the Google Maps view completely to see if the scrolling in the tableview would be better, and that fixed the laggy scrolling. So I know that it is the hidden mapView that makes the tableview scroll slowly.
My question is: How can I keep both container views and still have smooth scrolling when the tableView is visible? Setting the container view with the mapView to hidden does not work.
If anyone else has this problem, try to follow this blog and add the views by code instead of using container views in IB. It fixed the problem, and the tableview now scrolls like a pro!
cocoacasts.com/managing-view-controllers-with-container-view-controllers/
This is a tableView. The white sections are the tableview cells. In the footer of tableView, I've added a scrollview with 2 containers views embeded with 2 UIViewControllers. These embeded view controllers contains tableView.
Now I'm having a problem with the scrolling. I'm scrolling the main tableview and as I scroll, I'm changing the height of the table footerview on which the scrollview is added. Now the problem is when I scroll through child view controller, I'm not able to scroll to the top of my main tableView. How should I do it? Is there is demo github project which I can refer to any code?
EDIT:
This is how my storyboard looks like:
I want to implement something like Facebook has implemented. I think they are using tableview with page view controller. How can I achieve this?
I'm having a hard time finding the best way to structure this design.
The top view has a minimum height and becomes sticky when it reaches this height. The bottom view hosts a paging controller with three views within. Each of these views hosts either a collection view or table view with vertical scrolling.
I'm really at a loss on how to approach this. Is the entire view scrollable and I should prevent scrolling on the second view until the top view has reached it's sticky height? Or are each of these views separate uitableviews and the pagingcontroller is just one cell? Should I even be using a pagingcontroller or should I use a scrollview with paging enabled? (the latter was a little rough interaction-wise)
Thank you!
Take a look at the Advanced User Interfaces using Collection View from WWDC this year. This view is very very very similar to the iTunes Connect app interface. The entire session video explains how they created that interface.
I used a similar method to this to create the keyboard in the Emojicate app.
I think what I'd do is actually fake the sticky header. So something like this...
Use only one collection view.
Create a "segmented data source" that contains three data sources. (See the video from WWDC about this)
When the segmented control is changed then update the collection view by changing its layout and (if you want) dataSource.
Make the entire top section a header on the collection view.
When the collection view scrolls past a certain point (when you want to sticky the header) then have a second view that is the compressed header and make it visible at the top of the screen. This is not attached to the collection view at all.
When the segmented control changes you can update the collection view by changing the "selected datasource". The datasource can also contain a UICollectionViewLayout that will update it.
Essentially, the tableview you are talking about is just a collection view where the cell width is equal to the screen width. i.e. fake a table view.
The sticky header isn't sticky at all. Just when it starts to go off screen you can put a fake header there instead.
It will require a duplicate (ish) view and some thinking about how to structure the data but I think this will be easier and less resource hungry than having multiple collection views and page controller and stuff.
If you want me to go through it in more detail let me know but it's a complex subject. Watch the video first.
I would make this part a navigation bar. Should be relatively easy. Just have to customize the back button with a barButtonItem and do a couple of labels in the titleView.
I would make the next part a Table View.
The tableView has 2 sections. The first section doesn't have a section header and the second section doesn't have any cells but just a section header.
First and only cell in this section:
And the rest would be the second section header's view:
This gives you the stickiness that you want because the section header will remain there even if you scroll past it and since the collection has only 2 sections the controls will always remain on top.
I think the collection/table paging part is the hardest part and I don't know clearly how it can be done. But I was thinking it could perhaps be a ContainerView. Each view of the container view would be either a tableview or a collectionview. You would have to add some code to handle the movement of the containerview relative to the second section header (possibly an autolayout constraint that attaches the containerview to the buttom of the first tableview that you implemented above).
I don't think having your tables/collections in a scrollview would be a good implementation. I think I have even read in documentation that developers should stay away from that (but I might be remembering it incorrectly).
I would have:
A "header view" with three subviews:
Fixed height top and bottom views (they stay visible at any size).
A middle view that appears/disappears as the superview grows/shrinks.
A scroll view (table or collection view are subclasses) on that partially covers the header view with a top inset set enough to reveal the underlying header view (the same way pull to refresh views are revealed).
The paging buttons could be set as table/collection view section header views.
Finally track the scroll view's scroll position to keep manually adjusting the header view height.
Another way to see this solution.
Two completely separated parts, a header view and a table view.
A simple header view (blue) that adjusts its subviews as its height changes. More precisely hides its middle subview (light blue) when it shrinks.
A table view that a) partially covers the header view in Interface builder but b) has a top inset as to avoid hiding the header view in the actual device (tableView.contentInset = UIEdgeInsetsMake(60.0f, 0.0f, 0.0f, 0.0f);).
The two parts are only "connected" by resizing the header view height as the table view scrolls up/down.
I have a rather large table header view above my table view. I have a number of subviews in that header view. I am doing something a bit nonstandard where I am "sticking" some of those subviews (but not all) at the top of the table view.
My problem is that although visually the table view cells pass under the sticky table header subviews, it seems that the table view cells are "above" the table header view in terms of touch response. (For example: I have a button that is a subview of the table header view. When there are no cells underneath the button, the button works great and responds to touches. However, when the user scrolls the table view so that there are cells underneath the button, a touch on the button actually selects a hidden cell rather than push the button.) Can anyone give advice on how to "raise" the table header view above the table view cells, so that its subviews get first shot at touch handling?
I am using a table header view rather than a section header view due to the fact that I only want some of the subviews to stick (letting the others scroll up off the screen as usual). One of the subviews also can be expanded (and that expansion is animated) - to a height that is even bigger than the entire height of the screen. For these reasons, I didn't think using a section header view would be feasible. (If it is, please let me know, as I know that section header views are "above" table cells when it comes to touch response.)
You may try this, which would keep the desired header view on top of the others.
[yourView bringSubviewToFront:yourSubView];
This may be able to help as well:
http://www.iphonedevsdk.com/forum/iphone-sdk-development/5222-keeping-subview-front.html
Is this what you were looking for or did you want another approach?