UICollectionViewLayout示例

Question

有人能指出我如何使用UICollectionViewLayout创建类似于Pinterest列布局的界面吗？

我尝试在线搜索,但看起来还没有很多例子.

Answer 1

1000memories"Quilt"视图类似于开放源代码:http://blog.1000memories.com/168-opensourcing-quilt ,您可以深入了解它是如何工作的.

如果您正在寻找更概念性的概述,这里是您想要做的基本概念.到目前为止,最简单的事情是,如果你只需要一个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上设置重用标识符.你需要:
  1. (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
     • 现在回来1;
  2. (NSInteteger)collectionView:numberOfItemsInSection:
     • 现在对一个数字进行硬编码,使其成为20.
  3. - (UICollectionViewCell *)collectionView:cellForItemAtIndexPath:
     • 这是对流程布局进行子类化的地方之一,它会帮到你.你真正需要做的就是dequeueReusableCellWithReuseIdentifier:forIndexPath:用索引路径调用.如果您向单元格添加了UIImageView或某些标签,这将是实际分配图像,文本等的好地方.

• 在viewController中viewDidLoad实例化a UICollectionViewFlowLayout并将UICollectionView的数据源设置为你的数据源并将布局设置为flowlayout.请记住,这个类是它的子类UICollectionViewViewController.

  self.collectionView.dataSource = [[YourDataSource alloc] init];
  self.collectionView.collectionViewLayout = [[UICollectionViewFlowLayout alloc] init];
  

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

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

首先,添加一个新类,它是UIViewControllerFlowLayout的子类.更改您的视图控制器的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.

Answer 2

来自github的两个人

https://github.com/jayslu/JSPintDemo

https://github.com/chiahsien/UICollectionViewWaterfallLayout

我现在在项目中使用了修改版的Waterfall,现在我正在调查JSPint.