ios6 – UICollectionViewLayout示例

1000memories“Quilt”视图类似于pinterest和开源： http://blog.1000memories.com/168-opensourcing-quilt,你可以深入了解它是如何工作的.

如果您正在寻找更概念性的概述,这里是您想@L_675_3@的基本概念.到目前为止,最简单的事情是,如果你只需要一个Pinterest风格的布局,就是子类UICollectionViewFlowLayout.你可以从这个课程中获得很多布局帮助,Pinterest风格也在其功能范围内.您只需要覆盖一个方法.

使用UICollectionViewFlow布局设置普通的UICollectionView.一个快速的方法是：

>将uIViewController拖到故事板上,在其上放置一个UICollectionView.设置类以匹配您的自定义类等.您可以使用委托并在此创建委托类,但严格来说,这不是实现Jinte Pinterest流程布局所必需的(您几乎肯定希望将选择责任的东西分解为尽管如此委托班级).
>存根数据源.为UICollectionView(http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewDataSource_protocol/Reference/Reference.html)实现数据源协议非常简单.确保在UICollectionViewCell上设置重用标识符.你需要：

>(NSInteger)numberOfSectionsInCollectionView：(UICollectionView *)collectionView

>现在回来1;

>(NSInteteger)collectionView：numberOfItemsInSection：

>现在硬编码,使其成为20.

> – (UICollectionViewCell *)collectionView：cellForItemATindexPath：

>这是对流程布局进行子类化的地方之一,它会帮到你.你真正需@L_675_3@的就是使用索引路径调用dequeueReusableCellWithReusEIDentifier：forIndexPath :.如果您向单元格添加了UIImageView或某些标签,这将是实际分配图像,文本等的好地方.

>在viewController的viewDidLoad中实例化一个UICollectionViewFlowLayout并将uICollectionView的数据源设置为你的数据源并将布局设置为flowlayout.请记住,此类是UICollectionViewViewController的子类.

self.collectionView.datasource = [[YourDatasource alloc] init];
self.collectionView.collectionViewLayout = [[UICollectionViewFlowLayout alloc] init];

好.此时,您应该可以运行您的应用程序,并在屏幕上看到一些东西.这是一个旋风概述.如果您需要有关如何设置ViewControllers等的更多详细信息,那么有很多可用的东西.

现在是重要的部分,Pinterest-izing流程布局.

首先,添加一个新类,它是UIViewControllerFlowLayout的子类.更改ViewController的viewDidLoad以实例化此类并指定为UICollectionView的collectionViewLayout.

您需要实现的方法是 – (NSArray *)layoutAttributesForElementsInRect：(CGRect)rect.

事情就是这样：超类几乎将为你完成所有的工作.你的代码看起来像这样：

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect]; 
    [attributes enumerateObjectsUsingBlock:^(id attr,NSUInteger idx,BOOL *stop) {
    float newYCoord = [calculationMethodYouHaveToWriteFor:attr.frame];
    attr.frame = CGRectMake(attr.frame.origin.x,newYCoord,attr.size.width,attr.size.height];
}];

}

Pinterest使用固定宽度的列,你需要在计算方法中做的就是找出你所在的列(`attr.origin.x / _columnWidth),然后从你的ivar中查找该列中的总高度保存它.不要忘记将它添加到新对象的高度并将其保存回下一遍.

流程布局超类处理：制作单元格,确定哪些单元格可见,计算内容大小,确定行方向在x方向上的排列,为单元格指定索引路径.很多垃圾.并且压倒一种方法可以让你根据自己的心愿摆弄y-pos.