I am trying to build an iOS app that will have the structure of Facebook's feed:
A vertical collection view that will have cells. Each cell will consist of image and text.
In fact, I am building my app with the help of this video by LetsBuildThatApp (this guy rocks by the way).
Currently, I am able to touch the image and animate it to full width, and also pan to dismiss it if velocity on Y-axis is more than a specific threshold.
What I want to achieve after that is to also be able to pinch/double tap to zoom. Like this:
I searched around and found some great articles on how to use UISCrollView to zoom. [Article1, Article2].
The problem is that I use autolayout to perform animations but these articles either use Storyboards or frames to position the image in the center of the scroll view [or at least this is how I understand it]. And also they don't involve any animations to start with.
Also, I don't want to present or push a view controller onto the navigation controller stack. I would rather animate the view on top of the base view as I do now.
Any idea on how to achieve this?
Thank you in advance!
Related
I have an iPad app similar to the iPad Keynote with a narrow overview on the left and a paged UICollectionView of my "slides" on the right. The collection view is using the default FlowLayout. Some of these slides are standard PDFs and some are embedded UIViewControllers that have been scaled (with a CGAffineTransform) and embedded in the cell. I'd like to smoothly animate the overview sidebar offscreen and zoom the current page cell to fullscreen. The collection view should allow paged swiping at whatever size. I'm using storyboards and autolayout.
I think I need to simultaneously animate about three things:
The collection view constraints (to the sidebar) to enlarge/shrink it
The flow layout's sizeForItemAt: value
The CGAffineTransform on the embedded view controller.
I have some pieces working (a single embedded View Controller "slide" that scales correctly) but cannot get the collectionView/cell resize dance to work correctly. The cell resize animation is jerky, or ends up with the wrong offset, or works for the leftmost cell but not for other cells.
I've tried most of the suggestions in the answers to this question but with no convincing success. I can't believe it's impossible but at this point I'm considering the smoke and mirrors approach of animating a static slide and hiding it after the animation completes. The attached video - ignoring the glitches - illustrates the kind of effect I'm after:
It's worth noting, on close inspection, that Keynote cheats somewhat when it comes to swiping between slides in edit mode, and manually manages the next slide sliding onscreen, so probably doesn't use a UICollectionView.
Has anyone done anything similar, or have any suggestions for things to try?
I managed to solve this. There's a proof-of-concept GitHub repo here.
There are a few moving parts:
There are two pieces of UIView scaling code. I suspect these could be combined with suitable delegate references as the nested view controllers are embedded. The first piece scales (statically) correctly when the Collection View cell is created. The second is an animated scale/translate when the sidebar size is changed.
I added a FlowLayout subclass to remove flicker as the collection's layout is invalidated during scaling.
The sidebar-related transform in the top-level VC uses most of the tricks in the book - invalidateLayout(), performBatchUpdates(...), layoutIfNeeded() etc. as well as animating the contentOffset to the correct value. Some manual tracking of the correct page/slide is required.
There's still a slight flicker occasionally at the start of resizing. This may not be an issue with my particular colour-scheme which will be black on dark gray. Bonus points if anyone can suggest how to track this down or alleviate it.
I'm trying to create a scroll view like the one used in the airbnb app.
At start the view display the image and under the image there is many subviews with info.
when scrolling the image start to shrink in a parallax way till it's gone.
Any ideas how to implement it ? I prefer to understand how it's done rater then using some github control
I'm using a UICollectionView (with horizontal layout) to manage a collection of images. The view controller that manages the collection view has the bottom toolbar visible with a play button to start a slideshow of the images in the collection. My question is what is the best way to implement a slideshow that involves a collection view? My initial thought was to try to make the collection view changing the visible cells with a UIView transition (transitionFromView or transitionWithView) with a cross dissolve option but I didn't get the effect I was expecting (maybe something wrong in my code). The other idea I had was to simply add a subview to the collection view to handle slideshow. This subview would have access to the data source and be able to iterate through the images. Don't know if this last option is a good way to approach the problem. Anyone has ever tried this and/or what would the recommendation be to solve this problem?
My idea is no need of collection view. In scrollview place imageview which display images. In timer Change the offset of scrollview. so it looks like automatically images are changing as like slide show.
I have created a small app using a ScrollView w/ paging and a series of UIImageViews each representing a page. It acts similar to the Photos.app.
I want to be able to pan and zoom individually for each image (page of a scrollview).
What would be the most sound approach to do this? Should I replace the UIImageView page with a scrollview with a UIImage inside it? I would then have a main scroll view where each page of the scrollview had a scrollview with an image inside it that could be pinched,etc.
It seems like a messy approach. I am looking for a clean approach. Any suggestions?
Well, as far as I know the approach you suggest is the way it is done. I have used this to create a PDF viewer and once everything is in place it doesn't feel too messy.
You might want to use CATiledLayer as your inner (per-page) scrollview's layer (instead of CALayer) if these images you have are really big (which could well be the case since otherwise zooming in on them would not bring you much but pixelation, but this is just an assumption on my part).
Checkout UIPageViewController. This controller manages a view controllers for each page and transitions between them using effects like page curl or scroll.
In your case you would create a view controller that manages a scrollview for zoom & pan for each page.
I have a simple app that has a set of coloured views, one red, one green and one blue.
I am trying to make it so that when a swipe gesture is made the current view will switch to the next one in the list in a fluid manner, it looks like moving a long piece of paper with different colours on it.
Is there a way to do this (CoreAnimation)?
You could first look into UIScrollView. It seems to me that what you are trying to accomplish is the same you have, say, in Mobile Safari on an iPhone, when you show all your current pages and can go from one to the next by scrolling. This tutorial is particularly close to what you describe.
If you are looking into more advanced kind of transformations, than Core Animation would be the option.
Actually, nothing prevents using both approaches, UIScrollView to handle the swipe, Core Animation to add more animation to the pack...
You could use a UIScrollView to accomplish this. Add all of your colored views as subviews to the scroll view. Make sure your contentSize is setup appropriately and optionally setup paging to make the scrolling always snap to a certain border. See the scroll view programming guide for more info Scroll View Programming Guide