MDCCollectionViewController
provides a styler
property that conforms to the MDCCollectionViewStyling
protocol. By using this property, styling can be easily set for the collection view items/sections. In addition, by overriding MDCCollectionViewStyleDelegate
protocol methods in a collection view controller subclass, specific cells/sections can be styled differently.
The styler
allows setting the cell style as Default, Grouped, or Card Style. Choose to either set the styler.cellStyle
property directly, or use the protocol method collectionView:cellStyleForSection:
to style per section.
// Set for entire collection view. self.styler.cellStyle = .Card // Or set for specific sections. override func collectionView(collectionView: UICollectionView, cellStyleForSection section: Int) -> MDCCollectionViewCellStyle { if section == 2 { return .Card } return .Grouped }
// Set for entire collection view. self.styler.cellStyle = MDCCollectionViewCellStyleCard; // Or set for specific sections. - (MDCCollectionViewCellStyle)collectionView:(UICollectionView *)collectionView cellStyleForSection:(NSInteger)section { if (section == 2) { return MDCCollectionViewCellStyleCard; } return MDCCollectionViewCellStyleGrouped; }
The styling delegate protocol can be used to override the default cell height of 48.0f
.
override func collectionView(collectionView: UICollectionView, cellHeightAtIndexPath indexPath: NSIndexPath) -> CGFloat { if indexPath.item == 0 { return 80.0 } return 48.0 }
- (CGFloat)collectionView:(UICollectionView *)collectionView cellHeightAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.item == 0) { return 80.0f; } return 48.0f; }
The styler allows setting the cell layout as List, Grid, or Custom.
// Set as list layout. self.styler.cellLayoutType = .List // Or set as grid layout. self.styler.cellLayoutType = .Grid self.styler.gridPadding = 8 self.styler.gridColumnCount = 2
// Set as list layout. self.styler.cellLayoutType = MDCCollectionViewCellLayoutTypeList; // Or set as grid layout. self.styler.cellLayoutType = MDCCollectionViewCellLayoutTypeGrid; self.styler.gridPadding = 8; self.styler.gridColumnCount = 2;
The styler allows customizing cell separators for the entire collection view. Individual cell customization is also available by using an MDCCollectionViewCell
cell or a subclass of it. Learn more by reading the section on Cell Separators in the CollectionCells component.
// Set separator color. self.styler.separatorColor = UIColor.redColor() // Set separator insets. self.styler.separatorInset = UIEdgeInsetsMake(0, 16, 0, 16) // Set separator line height. self.styler.separatorLineHeight = 1.0 // Whether to hide separators. self.styler.shouldHideSeparators = false
// Set separator color. self.styler.separatorColor = [UIColor redColor]; // Set separator insets. self.styler.separatorInset = UIEdgeInsetsMake(0, 16, 0, 16); // Set separator line height. self.styler.separatorLineHeight = 1.0f; // Whether to hide separators. self.styler.shouldHideSeparators = NO;
A background color can be set on the collection view. Also, individual cell background colors can be set by using the protocol method collectionView:cellBackgroundColorAtIndexPath:
. The default background colors are #EEEEEE
for the collection view and #FFFFFF
for the cells.
// Set collection view background color. self.collectionView?.backgroundColor = UIColor.grayColor() // Set individual cell background colors. override func collectionView(collectionView: UICollectionView, cellBackgroundColorAtIndexPath indexPath: NSIndexPath) -> UIColor? { if indexPath.item == 0 { return UIColor.blueColor() } return UIColor.redColor() }
// Set collection view background color. self.collectionView.backgroundColor = [UIColor grayColor]; // Set individual cell background colors. - (UIColor *)collectionView:(UICollectionView *)collectionView cellBackgroundColorAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.item == 0) { return [UIColor blueColor]; } return [UIColor redColor]; }