iOS UI - App Store Explore section Transition - ios

I was wondering if this nice master-detail transition where you click on the tableView cell and it expand to disclose the detail , with the cell's label being the navigation bar title is an interface which is part of the SDK object library or it is a customised one?

This is a custom transition between ViewControllers.
There's a nice example of a few transitions (including this one) in this library.
Of course you'll need to add the tableview etc' but this is a great place to start.

I've tried few things but so far this is the best option I could think of.
Animating the frames of all the visible cells and making use of childViewController is how I achieved it.
Animation test project
https://github.com/armaluca/iOS-App-Store-Explore-Section-Animation
Would be nice to know any other possible solution and ultimately to know how Apple did it!

It is custom implementation.There is no API in UIKit/UITableView which implements this behaviour. Only animation to present a cell is there(which I think is used here).
This behaviour can be implemented like-
Add sections(News, Productivity, etc) in table with zero cells(numberOfRowsInSection: = 0 for all sections). Then on tapping any section just reload that section(reloadSections:withRowAnimation:) by adding a cell to it(numberOfRowsInSection: = 1) and animation(maybe UITableViewRowAnimationMiddle). Scroll that section/row to top in same animation loop(UI update cycle).

Related

Need Suggestion to Swipe through Views

I have a UITableView on didSelectrowAtIndex it pushes to a viewController which shows the detail on UIScrollView which is vertically scrollable.
Now I need that If I tap on any row it would be pushed to the same viewController and shows the detail of selected row,Additionally I need to have the Swipe Functionality to see the data for all rows in tableview instead of go back & select another row.
I know it can be achieved by UIPageControl or [scrollView setPagingEnabled:YES];,But I am wondering If there is any better approach to do the same or I should go with any of these two,If yes then Which one is better?
Please Help Guys.....Any Help would be much appreciated.
Thanks in Advance....:)
Of course, there are plenty of approaches to achieve what you want. You should keep in mind that UIPageControl has limitation on number of items (dots) displayed (over 20 items would overlap). Also, it would be appropriate to have next/previous buttons for the users preferring tapping buttons instead of swiping/panning. I prefer using UISwipeGestureRecognizers and buttons on toolbar for navigating between items.
The key, in my opinion, is to control how many UIKit controls are held in memory at the same time. However you implement this, you want to make sure that you have solution that holds UIKit controls for the currently visible child element only, or perhaps the previous and next ones, too, but not for the full array (especially if you're dealing with UIImageView objects).
One control to consider is UIPageViewController. At first blush, it might look complicated, but in reality it's quite simple and offers a nice way to swipe between various "pages" while not holding all of the pages in memory at the same time. See View Controller Catalog for iOS: Page View Controller.
If you decide to implement a scroll view with paging enabled, I'd suggest specifying the delegate and implementing the UIScrollViewDelegate methods to add and remove subviews as appropriate. This is historically what I've done, but I now lean towards page view controllers.
There are also a ton of third-party implementation of "infinite scrollers", which implement this sort of functionality, though I can't vouch for any particular one.

What controls does the built-in contacts app use?

In iOS, the built-in contacts app looks similar to what's displayed on this example page. What controls are being used to create the initial view? Is it a table view? If so, how is the image on the left offset from the two rows?
What's happening behind the scenes to switch this view into edit mode? Are labels being replaced with textboxes or are the textboxes simply being set to editable?
There are 2 ways to do things like this that I know
#1. That is UI TableView, but TableView with a custom TableView Header.
Also it is UITableViewStyleGrouped
Just Init and setup the view include a UIImageView On the left side and three UITextField on the right side.
like this
|----------| |---TextField---|
|---Image--| |---TextField---|
|----------| |---TextField---|
and set this view with:
self.tableview.headerView = yourViewWithImageAndTextField;
2. Just try to use Apple's own ABPersonViewController
Apple's sample
Documentation
Good luck to you
This looks like an pre iOS7 UITableView in UITableViewStyleGrouped style, and a probably a custom cell to handle the image.

iOS 7 Weather app expand/collapse transition

I'm trying to achieve a view transition like the new iOS7 weather app transition, using a collapsing/expanding view.
Does anyone know if a lib already exist for that ?
Thanks
User antol put some effort into replicating the behavior:
https://github.com/Antol/APPaginalTableView
But note that APPaginalTableView doesn't have a separate controller for the expanded pages.
You can see it in action here:
https://www.youtube.com/watch?v=X1YvxDMr0yA
EDIT
Check out this project. It demonstrates how to do the first part of the Weather app's transition using normal View Controllers and the transitioning API.
I know this is a little late for a follow up, but I've looked for a library to do this, as well, but haven't found one.
https://github.com/chefnobody/Colors
I was able to do this using the new UIViewController Transitioning API. This example should get you started:
http://www.teehanlax.com/blog/custom-uiviewcontroller-transitions/
To augment this example to get the pinch/pull table view cell separation animation you would need to identify the table view cell that was selected (or "selected" relative to the pinch gesture"), then in -animateTransition: you would animate the cells above and below the selected cell out of view, revealing your details view controller.
An alternative to APPaginalTableView if you are looking to use the storyboard more and set subview controllers to the table. I was working on the same problem and this is my "playground" for it. https://github.com/nissaba/customcellTest.git

UITableViewController with SearchBar

I have tried both ways below to place SearchBar on UITableView.
TabBarController > UITableViewController(Put SearchBar)
TabBarController > UIViewController > UITableViewController(Put SearchBar)
When I try the second way, then it doesn't work.
(SearchBar cannot show on UITableViewController)
Can anyone tell me what happend?
Here is my xcode project file:
http://www2.zshares.net/tg14vowqzvaw
the usual way to do this would be to put the saerch bar in the header-section of the uitableview its supposed to search. you can do this using the
-tableview: viewForHeaderInSection:
method from the UITableViewDelegate-Protocol. his works in both TableViewControllers and regular ViewControllers that just have a TableView on them. see the mail app on the iphone for an example of this.
if you really NEED the search bar to be outside of the tableview, then you will have to use a regular view controller and just place the search bar in a view above/under the tableView.
other than that, i dont know what to tell you. And what is a TabbedViewController? Do you mean TabBarController? What does that have to do with search bars? Im kinda lacking the time to go through your project, so if you rephrase the question, maybe i can give a better answer?
EDIT-----------------------------------------------------
tableviewcontrollers will do that to you. basically, they will allow ONE tableview to be inside them at a time. also, this tableview WILL ALWAYS fill out the entire space available. Now, there is an exception to this that you cam make use of: Elements like a NavigationBar or a TabBar are allowed alongside the tableview, since they are required for navigation. So if you can put your stuff in one of these, its entirely fine. This my seem counterintuitive, since when do i want just a naked tableview on my screen? the answer is: more often than not. Tableviews are HIGHLY customizable using the UITAbleVIewDelegate-Protocol specified here:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDelegate_Protocol/Reference/Reference.html#//apple_ref/occ/intf/UITableViewDelegate
Do yourself a favor and read that doc, i almost guarantee that you will save time in the long run.
For Example: You know the contacts app on your iphone? If you go into the details of one specific contact, you will find a pertty sophisiticated presentation of the data, that will even go into editing mode if you tap edit. It has a header, multiple segments, and a footer.
Surprise: ALL OF THAT is just a single tableview in a tableviewcontroller, customized via the protocol. Let me repeat: you are wasting your own time if you try to do it any other way. tableviewcontrollers exist for a reason. usem them

moveRowAtIndexPath – animation of dropping the cell?

As I enter the canMoveRowAtIndexPath mode, everything is beautifully animated (other cells sliding as I drag the cell above them) until I drop the cell to a desired location. It just pops in in no time. How can I animate it (as it's for example in Reminders app)?
PROBLEM SOLVED by maddy's comment.
Check this Link might be help full for you.
UITableViewExtendedAnimations category allows to perform new animations,
such as moving cells, exchanging cells, and making transitions from one
cell to another.
There are three new methods on UITableView:
-moveRowAtIndexPath:toIndexPath:
-transitRowAtIndexPath:toRowIndexPath:
-exchangeRowAtIndexPath:withRowAtIndexPath:
This was done using a regular Objective-C category.
To perform such animations UITableViewDelegate protocol was extended.
There are a couple of new methods you have to implement to make these
animations possible. Take a look at example project to see that methods.
Video of the sample project:
http://www.youtube.com/embed/bC-YTq9C0Sk

Resources