Collection View 自定义布局(custom flow layout)

Collection view自定义布局

一般我们自定义布局都会新建一个类,继承自UICollectionViewFlowLayout,然后重写几个方法:

  • prepareLayout():当准备开始布局时调用这个方法,可以在这里计算一些属性,比如cell的尺寸。
  • layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]?:在这里返回布局属性。

实例(比较简单的例子,实际开发中可以进行更多的封装)

第一步:声明两个属性

    // MARK: 属性
    /** cell的个数 */
    var itemCount: Int?

    /** 布局信息 */
    var layoutAttributes = [UICollectionViewLayoutAttributes]()

第二步:重写prepareLayout方法,计算布局属性

    // MARK: 准备布局
    override func prepareLayout() {
        super.prepareLayout()

        // 计算每个cell的宽度
        let width = (UIScreen.mainScreen().bounds.size.width - self.sectionInset.left - self.sectionInset.right - minimumInteritemSpacing) / 2.0

        // 判断itemCount是否为空
        if itemCount != nil {
            // 开始计算每个cell的布局属性
            calculationAttribute(withItemWidth: width)
        }
    }
func calculationAttribute(withItemWidth itemWidth: CGFloat) {
        // 声明数组 保存每一列的总高度 (两列)
        let column1 = sectionInset.top, column2 = sectionInset.top
        var columnArray: [CGFloat] = [column1, column2]

        for index in 0..<itemCount! {
            // 创建indexPath 因为是示例 所以排版固定在一组
            let indexPath = NSIndexPath(forItem: index, inSection: 0)
            // 创建布局属性 通过indexPath
            let attribute = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
            // 创建一个随机高度
            let itemHeight = CGFloat(arc4random()%150 + 100)

            // columnNumber 记录定义的是哪一列
            var columnNumber: CGFloat
            if columnArray[0] < columnArray[1] {
                columnArray[0] += itemHeight + self.minimumLineSpacing
                columnNumber = 0
            } else {
                columnArray[1] += itemHeight + self.minimumLineSpacing
                columnNumber = 1
            }

            // 设置item的位置
            let x = self.sectionInset.left + (self.minimumLineSpacing + itemWidth) * columnNumber
            let y = columnArray[Int(columnNumber)] - itemHeight - self.minimumLineSpacing
            attribute.frame = CGRectMake(x, y, itemWidth, itemHeight)

            layoutAttributes.append(attribute)
        }
        // 当设置完所有item的位置后需要设置itemsize 这样才能保证滚动时能显示所有的cell
        // itemsize的height属性 是取最高的那列的平均值
        if columnArray[0] > columnArray[1] {
            self.itemSize = CGSizeMake(itemWidth, (columnArray[0] - sectionInset.top) * 2 / CGFloat(itemCount!) - self.minimumLineSpacing)
        } else {
            self.itemSize = CGSizeMake(itemWidth, (columnArray[1] - sectionInset.top) * 2 / CGFloat(itemCount!) - self.minimumLineSpacing)
        }
    }

第三步:返回布局信息数组

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return layoutAttributes
    }

总结:这个例子是瀑布流的布局,如果需要别的布局需要在准备布局时计算,然后返回布局信息数组就可以了

时间: 2024-10-25 21:17:02

Collection View 自定义布局(custom flow layout)的相关文章

IOS UIView 03- 自定义 Collection View 布局

注:本人是翻译过来,并且加上本人的一点见解. 前言 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一颗新星.它和 UITableView 共享一套 API 设计,但也在 UITableView 上做了一些扩展.UICollectionView 最强大.同时显著超出 UITableView 的特色就是其完全灵活的布局结构.在这篇文章中,我们将会实现一个相当复杂的自定义 collection view 布局,并且顺便讨论一下这个类设计的重要部分.项目的示

[翻译]在objective c创建自定义collection view样式

创建自定义collection样式 苹果在ios6中新增了一个更加易于创建和管理复杂用户界面的类:collection view.在此之前ios6上面用于展示多项列表的是table view,虽然名称是表格但它展示信息的形式并不是表格形式,而是垂直列表,当然在实际设计展示垂直可滚动的文本型列表时非常有用,但是你会遇到许多垂直可滚动的列表所存在的局限性,比如不能水平滚动,每行只有一项单元格,没有复杂的样式,在ios6之前你想要做到这些事情,只能靠自定义扩展. 在ios6 平台介绍了一个新的类:co

Collection Views and Building Custom Layouts-备

UICollectionView的结构回顾 首先回顾一下Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header或者Footer) Decoration Views 装饰视图 (用作背景展示) 而在表面下,由两个方面对UICollectionView进行支持.其中之一和tableView一样,即提供数据的UICollectionViewDataSource以及处理用户交互的UICollectionViewDe

UICollectionView自定义布局教程

转载自:叶孤城 UICollectionView自定义布局Pintere UICollection这个东西是在iOS6被推出来的,所以如果你的app还在支持iOS5还是老实用TableView吧,要么牛逼的就用ScrollView手撸一个出来 它 最牛逼的地方就在于,Custom的Layout可以玩出无限可能.举个简单例子,早年有个非常出名的CoverFlow第三方库iCarousel(大 约在13年的时候我非常频繁的使用过它),效果非常炫,但问题是它是用scrollview撸出来的,虽然里面也

Android:创建可穿戴应用 - 自定义布局

创建自定义布局(Creating Custom Layouts) 本文将介绍如何创建自定义通知以及使用可穿戴UI库来创建自定义布局你同时还需要了解可穿戴设计准则(Wear Design Principles)除了屏幕尺寸和瞬读能力(Glance ability)外,为可穿戴应用创建布局大体和普通手机一样. 创建自定义通知(Custom Notifications) 通常,你应该在手机应用上创建通知然后自动同步到可穿戴应用.这让你只需要构建通知一次,就可以呈现于多种设备(不只是可穿戴,最终还包括汽

深入解析_Android的自定义布局

前言: 这篇文章是前Firefox Android工程师(现在跳槽去Facebook了) Lucas Rocha所写,文中对Android中常用的四种自定义布局方案进行了很好地分析,并结合这四种Android自定义布局方案所写的示例项目讲解了它们各自的优劣以及四种方案之间的比较.看完这篇文章,也让我对Android 自定义布局有了进一步的了解,于是趁着兴头,我把它翻译成中文,原文链接在此. 只要你写过Android程序,你肯定使用过Android平台内建的几个布局——RelativeLayout

Android自定义布局

1.首先新建属性文件 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="topbar"> <attr name="title" format="string"/> <attr name="titleTextSize" format=&

深入解析Android的自定义布局

原文链接:http://greenrobot.me/devpost/android-custom-layout/ 写在前面的话: 这篇文章是前Firefox Android工程师(现在跳槽去Facebook了)Lucas Rocha所写,文中对Android中常用的四种自定义布局方案进行了很好地分析,并结合这四种Android自定义布局方案所写的示例项目讲解了它们各自的优劣以及四种方案之间的比较.看完这篇文章,也让我对Android 自定义布局有了进一步的了解,于是趁着兴头,我把它翻译成中文,原

ActionBar 自定义布局定义

Android系统中ActionBar默认的布局不美观且难于控制,通过为ActionBar自定义布局的方式可以灵活控制ActionBar. 效果: 工具/原料 android集成开发环境eclipse.ADT android sdk 3.0及以上 方法/步骤 自定义Activity主题和ActionBar样式 在新建的android工程的res/values/styles.xml添加自定义ActionBar样式的代码和自定义Activity主题的代 码,并在AndroidMainfest.xml