how to animate section header of collectionview in tvOS app? - ios

Need to animate the section header title when the collection cell below the header is focused. Just like if you go to "movies itunes" app on apple tv and go to top movies tab, if you look at the playlists below, when you scroll through items, the header animates, up and down to not to overlap with focused cell. any help is appreciated tvos screen shot link

I can't exactly provide the code; but this is basically what you're going to want to do.
1 - Create an intermediary class headingRouter; whose purpose will be to mediate between the scrollView header (collectionView or tableView) and the cell selection. An instance of heading router will live on your collectionView main level methods. You could use a delegate pattern to abstract out the image logic to the router and then on the collectionView; conform to the delegate in order to update the view in question.
2 - Headers and footers are what is called a supplementary view; so they can be assigned any custom subclass of uiView. In this headerView; you should have a method that takes in an identifier, possibly id and changes the image displayed. You can animate this change with a fade if you want it to look like iTunes.
3 - On your focused cell section; have the cells have an identifier that is assigned during the cellForRowAt method in your delegate/datasource methods. When a specific view is focused; using one of the various collection/tableView methods; you want to take that id; pass it to your headingRouter, which in turn will notify your header to change it's image to the corresponding image (possible held in cache) to the image you're focusing.
This is more the logic of implementation; but you haven't posted any code, so there isn't much of the way of specifics. You could do without the Router class but this is a cleaner solution.
Cheers

Related

How to create a complex scrolling view in iOS similar to yelp?

Yelp has this View show up when you click on a specific restaurant or some event:
In the picture above there is the Cascal label, then Write a Review button, then three buttons (Photo or Video, Check in, Bookmark) all in a row, then a map, and some cells underneath (Directions, Call, Explore the menu, etc.).
How can you make a complex scrolling view similar to this (do you have to use a collection view or table view?)? Since in both a tableview and collectionview you are reusing the same cells again and again (with the same layout) so it is difficult to create a view with so many heterogeneous elements like in the picture above.
Use a table view and a bunch of different cell classes each with their unique design (XIB or Storyboard) and height.
Select the cell class and height depending on index path and let table view delegate methods return accordingly.
Very basic stuff actually.
You only reuse cell classes if you need to. In the Yelp example the Directions, Call, Explore the Menu and More Info cells may have used the same design because the layout seems to be identical, only the image and text differs.

Custom TableView iOS - General questions

This is more of a general question. I want to create a scene where the top 1/3 of the scene is say a slider with some text labels, and then the rest 2/3rds of the scene is a data table of recorded values of the above slider(user moves the slider to the correct value, hits 'enter', and the recorded value is showed in the data table below). I assume this is a modified table view, but I'm not sure? Can anyone point me in the right direction on how to go about doing this? Im not quite sure where to begin looking up information/tutorials on this type of layout. Any help would be appreciated!! Thanks so much!
It isn't a "modified table view". It's a table view. There's no problem here; you have a scene with a UISlider, some UILabels, and a UITableView. There is nothing to "look up". No law says that a UITableView has to occupy the entire scene interface - though of course in that case you can't use a UITableViewController, but that's no restriction at all. Just set your table view's delegate and data source to the view controller that owns the scene.
You'll want to create a UIViewController that contains the UISlider and a UITableView within it's xib file. Hook the view elements to its ViewController.h, and set your ViewController as a UITableViewDataSource and UITableViewDelegate.
In ViewController.m, fetch the data follow the UITableView protocols to load it into cells. Then, when you would like to refresh data call
[myTableView reloadData];
Apple's UITableViewDelegate Protocol
Apple's UITableViewDataSource Protocol

Embedding a UIScrollView with a UITableView

So Path uses this type of page where there is a view above their customized looking table that is a background photo, which contains some user info among other things. I'm trying to recreate something very similar to this.
So lets say that I hypothetically wanted to make a view that shows exactly the way the Path app does, but instead of that weird customized version of a table view that they have, there is an actual table. How would I do something like this? The reason why I would need there to be another UIScrollView embedded into the view is because the entire thing needs the capability to scroll. I'm trying to be as detailed as possible, but its a little difficult to explain.
What I'm imagining is going to happen if I just tried it right now, is that I'd embed a UIView above a UITableView within a UIScrollView that's the size of the frame, and when I'd go to scroll, the user would only scroll the UITableView, and not the entire thing at once. Hopefully that helps convey my doubts.
Another possibility is that I'm totally over thinking this, and I can simply just subclass a view in the header of a UITableView and it would stretch the width and height that I'd like. Hopefully this is the way as this would be easy!
Anyways, can anybody weigh in on this?
Path just uses a normal UITableView with UITableViewStyleGrouped.
The custom view at the top is the header of the first section of the table.
They also access the UIScrollViewDelegate method of the UITableView to change the look of the view (I think the image is moved) when the scroll view scrolls.
If you'd like a tableview that only scrolls within a part of the view and other stuff above it then you need to use a UIViewController. Then you can make it conform to UITableViewDelegate and UITableViewDatasource and add a UITableView and make the view controller the datasource and delegate.
Then you can also add a UIScrollView to it as well.

ios - a single static header that changes as you scroll

I've been searching a ton and can not seem to find an answer...
I have a tableView which scrolls all the days of all the months. And I have a titleForHeaderInSection: and viewForHeaderInSection: which displays a section header at the top of each month-section which replaces appropriately at the top, cool. But how can I create a single header where the titleLabel changes to the proper month as I scroll (in other words, Not have multiple section headers, just one)?
I can't tell whether this should be setup as "one (big) section with a header that changes" or "a headerView that changes", or whatever... Any examples would be greatly appreciated. Thank you in advance.
You can create a static view and place it above your tableView. Then you can use the visibleCells property to determine which cells are visible. When those cells change to the cells of a new section you can update the static view that is above the UITableView.
Once you are the delegate of the UITableView you are also the delegate of the UIScrollView it is built on.
So you can catch the scrollViewDidScroll: delegate call and update your header there.
So to lay it out:
1.) Create a Header View above your UITableView
2.) Become the delegate of the UITableView
3.) Implement the scrollViewDidScroll: method to detect scrolls
4.) Inside the scrollViewDidScroll method use the visibleCells property of the UITableView to determine which cells are being shown and to update your header view appropriately.
I've never done anything like this, but I don't see why it wouldn't work.
EDIT: As Husker Jeff pointed out. It is probably easier to use indexPathsForVisibleRows to determine what is on screen. You can then use that fairly easily to determine which section/sections are being displayed. Thanks Jeff!

How move/reorder cells from TableView1 to TableView2

I have several UITableViews, with different datasources in a iPad screen.
I need to copy/move a cell from the first tableView to the second, similar how is done with ListBox in other languages.
Now, I can reorder the cells, but the movement is restricted to the tableView. I want to drag the cell in tableView1 & drop in tableView2.
P.D. I'm open to use any other control to archive this. I take a look at AQGridView & DTGridView, however the layout is based in columns with different #items. If I can emulate columns with this controls or other then I can accept the workaround.
UPDATE:
I hope this links could help:
Observing pinch multi-touch gestures in a UITableView
This is the most close answer:
Drag and drop between two tables in ipad
I know how get a image from a view, I can detect the drag with a Gesture Recognizers, so I have all the setup in place but have not expertise in graphic development, so don't know how put this in motion...
This is definitely a very interesting question, and I wish I had the time to put together some test code to see if the idea I'm about to outline would actually work. My hope is that this will at least point you in the right direction.
UITableViewCell is a subclass of UIView, so I would create a subclass of UITableViewCell called something like DraggableTableViewCell so we can handle the touch events and then perform the following steps:
Create an instance of DraggableTableViewCell and configure it to appear like the selected cell.
Add the new cell as a subview of a view that is a common superview to both tables at the same location as the original cell.
Update the data source for the source table view and remove the original cell from the table view using deleteRowsAtIndexPaths:withRowAnimation:
Move the cell on the display by responding to touchesMoved:withEvent:
When touchesEnded:withEvent: is received, verify the cell is somewhat close to the other table view and determine the index path where to insert the new cell
Update the data source for the destination table view and call insertRowsAtIndexPaths:withRowAnimation:
Remove your draggable cell from its superview with a nice animation.
This entire process will need to be orchestrated by the view controller that controls the various table views on the screen.

Resources