I have a UICollectionView that has two layout's (list style like uitableview and gallery style which is a full screen horizontal item scroller).
The cell contains a single image and two labels (title & description). In list layout the image is on the left and labels on the right. In gallery layout the image is full width & 50% height with labels beneath. Like this:
The default animation when switching between these two layouts is too simply resize and move the cells to their new positions in the layout. However I want to make a much more specific animation.
Specifically these are the rough steps I want the animation to take when going from list to gallery view:
Fade out all but the first visible cell (aka cell 1)
Fade out the labels in cell 1
Grow the width of the image in cell 1 to 100%
Grow height of cell 1 to full screen (with the image height following the cell growing - to 40% height)
Fade back in the labels for cell 1
Show the other cells (although they should be off screen - so this may not be neccessary)
The steps would pretty much reverse for gallery -> list layout change.
The UICollectionViewFlowLayout is perfect for the layouts that i want to achieve, I just want to have a much finer control over the animation so that I can produce this "stepped animation" (or would this be like keyframe animation?)
It probably doesn't matter much - but i'm using auto layout constraints (via SnapKit) wherever possible and i'd like to maintain that where i can.
Of course I don't expect someone to program all this for me, however Google isn't helping me work out where to start.
Could someone please point me in the right direction of which methods I need to be implementing/overriding on which classes, and maybe a hint of pseudo-code?
Related
I encountered this image on Apple's UI Design Do's and Don'ts:
Of course the UI on the left is the one I am shooting for, my question is what is the best way to go about getting this UI on the left? My initial thought was to use a static table view, with the top cell being the image and the cell below it but I came up with two problems with that approach:
How would I get that little water droplet image to span across both cells?
How do I make sure that the text field below the image is always the right length no matter how much text is put in (i.e. resizing the text field and the cell depending on the amount of text)?
My second thought was to use a UIScrollView and put the image at the top, constrain the water droplet in between them and then contain a text field below it, but then:
How would I make sure that the text field always the right length no matter the amount of text put in?
It is pretty impossible to constrain these items in a UIScrollView, how do I properly constrain this in a UIScrollView?
Why not use a UITableView, and make your cell in the interface builder that can be called through a reuse identifier. And each cell would have the image along with the relevant information that's required. This would fix your first option since you would be able to place the water droplet image over your image and your text.
For your second issue, making sure the cell is of correct height can be done by giving the UITableView dynamic height.
For example, you wouldn't need to insert a heightForRowAtIndexPath function on this tableview, and you can also define:
tableView.estimatedRowHeight = 100; //Can be any value really, but giving a reasonable estimate is helpful
tableView.rowHeight = UITableViewAutomaticDimension;
Also, your the textView you want to use shouldn't be set with any fixed width's or height in the interface builder.
TableView Image . Your imageView would be set up somewhat like the blue section in this picture (but fitting the entire width of the screen instead) and your textView would be like the red one. They would all fit in one cell and would make it much easier to organize than using 2 separate cells for one set of content, and you wouldn't have to get into the hassle of setting up the UIScrollView.
I have a UICollectionView that displays one cell at a time that has the size equals to the UIViewController.view.bounds.size. This works great for me on Vertical/Portrait screen.
I want to rotate the screen to landscape and a nice animation happens to show 2 cells side by side each having size equals to CGSize(UIViewController.view.bounds.width / 2, UIViewController.view.bounds.height)
Is there a library that does that or how can I achieve this approach?
You can think of it as an image gallery that displays one image at a time when rotated should show 2 images.
If you are using flow layout, then all you have to do is implement UICollectionViewFlowLayout delegate methods, and invalidate the collectionView's layout on rotation.
Take a look at this repo: dynamic width cells
It's not exactly what you are looking for, but you can get a general idea.
I want to have a collection view with randomly sized cells but each cell is circle. An example mockup is shown below.. The question is
how would I go about doing this?
Edit: The design doesn't have to be a UICollectionView, I just assumed this would be the best way to do it.. I'm definitely open to any way about doing this.
I also think using a UICollectionView is a good idea. You would definitely have to implement a custom flow layout to be able to organize these random sized cells. Maybe taking a look at CCHexagonFlowLayout and MosaicLayout could help. As for drawing the circles inside the cells, you could have a square UIView in the cell and set circleView.layer.cornerRadius to half of its height.
The collection view is a pretty good idea. Using the flow layout, you can implement collectionView:layout:sizeForItemAtIndexPath:. Answer a random square size (see arc4random_uniform()).
Within each cell, inscribe a circle. The simplest way to do that (at least for a start) is a UIImageView whose frame fills the cell bounds and whose content mode is set to UIViewContentModeScaleAspectFit. All you need then is a picture of a circle.
I am working on an iOS app that has a UICollectionView. I would like to make a simple custom layout in which the middle cell on each row is slightly lower than the one on the right and left. I've been looking over tutorials and the apple documentation but most of it is for a much more complicated set up.
Is there is a quick way to stagger the middle cell. Thanks for any input!
Currently the collectionView looks like this...
I simply want the center cells shifted down by 40 pixels or so.
Subclass UICollectionViewFlowLayout and alter the response that the superclass gives so that the cells are positioned where you want them.
Here's an example of a UICollectionViewFlowLayout subclass:
https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/bk2ch08p466collectionViewFlowLayout2/ch21p748collectionViewFlowLayout2/MyFlowLayout.swift
It shifts the cells left (so that they are left-justified instead of full-justified across the screen). It is not difficult to see how to adapt this to shift certain cells down.
Can someone please give me a hint on how to recreate the scrolling effect used in the UltraVisual iPhone app? Here's a gif to illustrate the effect:
The first "cell" is full height while the other displayed cells are regular sized. While the user scrolls up, the first cell slowly animates to the regular height, while the next one slowly gets bigger. Do they use an UITableView? Or an UIScrollView? I have no idea how it's made...
Ha, you made my day! I actually wrote that view :)
This is actually very straightforward. This view uses UICollectionView with a custom UICollectionViewLayout.
The general principle is this. I make up a 'drag interval' – that is the required distance to drag between each cell. This value is arbitrary but affects how much the user has to drag to switch cells. The total height of the collection view is the 'drag interval' * the number of items in the view. Then I set the layout to automatically paginate to the nearest drag interval (which gives it the snapping behavior). This is very similar to how coverflow works. From this you can calculate the index of the 'top cell' by dividing the contentOffset.y by the height.
With the 'top cell' index you can generate the frames for each cell pretty easily. The top cell's frame is { 0, contentOffset.y, 320, 176 }, and from there you can calculate the next cells frame and so forth.
Then the last trick is calculating the interpolation of the page index. This is basically the decimal part of the current cell index. This will give a number between 0 and 1 that can be used to calculate the interpolation between the top frame and the frame below.
Every 'prepareLayout' calculates the frames of the cells on screen, and then in layoutAttributesForElementsInRect:, generate all the layoutAttributes based on the generated frames.
Using this trick you can create all sorts of complicated layouts. UICollectionView can be a powerful beast, but definitely takes a bit to wrap your head around it.
It's very cool! We made a fairly simple to use control like this that can be found here:
https://github.com/RobotsAndPencils/RPSlidingMenu