#stacklayout

Xamarin Forms – Aprenda a criar o app Hora do Lanche

Que tal criar os seus próprios apps para Android, Windows Phone e IOS. O post Xamarin Forms – Aprenda a criar o app Hora do Lanche ensina de maneira fácil, rápida e dinâmica como criar o app Hora do Lanche utilizando o Xamarin Forms.

Ao construir o app Hora do Lanche você aprenderá como utilizar o Stacklayout, Image e Label. Também aprenderá a criar eventos to tipo click.

Xamarin Forms – Aprenda a…

I played around with UICollectionView for a new app these days and thought this little FlowLayout subclass might help others too.

It's a UICollectionViewFlowLayout subclass which can switch from a stacked state to the default grid, like the iPad photo app does.

You might have to adjust it for your own purposes, but it should give you a good idea about how to build some cool stuff with the existing flow layout.

Here is the content of the header file:

#import <UIKit/UIKit.h> @interface StackLayout : UICollectionViewFlowLayout // the point to which the stack collapses @property (nonatomic) CGPoint stackCenter; // 0.0 means completely stacked, 1.0 results in the default FlowLayout // Values bigger than 1.0 will spread the layout even more  @property (nonatomic) CGFloat stackFactor; @end

And the implementation:

#import "StackLayout.h" @implementation StackLayout // Custom setter for redrawing the layout - (void)setStackFactor:(CGFloat)stackFactor { _stackFactor = stackFactor; [self invalidateLayout]; }

- (void)setStackCenter:(CGPoint)stackCenter { _stackCenter = stackCenter; [self invalidateLayout];

}

// Animation of cells only works WITHIN the bounds of the contentView. // Enlarge the contentView to the size of the collectionView if needed -(CGSize)collectionViewContentSize { CGSize contentSize = [super collectionViewContentSize]; if (self.collectionView.bounds.size.width > contentSize.width) contentSize.width = self.collectionView.bounds.size.width; if (self.collectionView.bounds.size.height > contentSize.height) contentSize.height = self.collectionView.bounds.size.height; return contentSize; } -(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect { NSArray* attributesArray = [super layoutAttributesForElementsInRect:rect]; // Calculate the new position of each cell based on stackFactor and stackCenter for (UICollectionViewLayoutAttributes *attributes in attributesArray) { CGFloat xPosition = self.stackCenter.x + (attributes.center.x - self.stackCenter.x) * self.stackFactor; CGFloat yPosition = self.stackCenter.y + (attributes.center.y - self.stackCenter.y) * self.stackFactor; attributes.center = CGPointMake(xPosition, yPosition); if (attributes.indexPath.row == 0) { attributes.alpha = 1.0; attributes.zIndex = 1.0; // Put the first cell on top of the stack

} else { attributes.alpha = self.stackFactor; // fade the other cells out attributes.zIndex = 0.0; //Other cells below the first one } } return attributesArray; } @end

If you create an UICollectionView with stackFactor = 0.0 you will get a stack with only the top cell visible. Call something like that later to get a nice animation to the full grid layout:

[myCollectionView performBatchUpdates:^{ myCollectionView.collectionViewLayout.stackFactor = 1.0; } completion:nil];

You could also use an UIPinchGestureRecognizer to adjust the stackFactor property.

Here is a little preview showing different states of the animation:

If you want to archive something like the iPad photo app,  you will need another UICollectionView to display the single albums. Once the user selects an album, show the stacked Photos at the position of the album and animate the photos in.