iOS - Swift UICollectionView横向分页滚动,cell左右排版

情况

最近在做表情键盘时遇到一个问题,我用UICollectionView来布局表情,使用横向分页滚动,但在最后一页出现了如图所示的情况

只显示一半

情况分析图

是的,现在的item分布就是这个鬼样子

从上到下,从左到右

现在想要做的,就是将现在这个鬼样子变成另外一种样子,如图

从左到右,从上到下

那怎么办?只好重新布局item了

解决方案

我是自定了一个Layout(LXFChatEmotionCollectionLayout),让UICollectionView在创建的时候使用了它

在 LXFChatEmotionCollectionLayout.swift 中

添加一个属性来保存所有item的attributes

// 保存所有item的attributes
fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []

重新布局

// MARK:- 重新布局
override func prepare() {
    super.prepare()
    
    let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
    
    // 设置itemSize
    itemSize = CGSize(width: itemWH, height: itemWH)
    minimumLineSpacing = 0
    minimumInteritemSpacing = 0
    scrollDirection = .horizontal
    
    // 设置collectionView属性
    collectionView?.isPagingEnabled = true
    collectionView?.showsHorizontalScrollIndicator = false
    collectionView?.showsVerticalScrollIndicator = true
    let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
    collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
    
    
    /// 重点在这里
    var page = 0
    let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
    for itemIndex in 0..<itemsCount {
        let indexPath = IndexPath(item: itemIndex, section: 0)
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        
        page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
        // 通过一系列计算, 得到x, y值
        let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
        let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
        
        attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
        // 把每一个新的属性保存起来
        attributesArr.append(attributes)
    }
}

返回所有当前可见的Attributes

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var rectAttributes: [UICollectionViewLayoutAttributes] = []
    _ = attributesArr.map({
        if rect.contains($0.frame) {
            rectAttributes.append($0)
        }
    })
    return rectAttributes
}

大功告成

完整代码

import UIKit

let kEmotionCellNumberOfOneRow = 8
let kEmotionCellRow = 3

class LXFChatEmotionCollectionLayout: UICollectionViewFlowLayout {
    // 保存所有item
    fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []
    
    // MARK:- 重新布局
    override func prepare() {
        super.prepare()
        
        let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
        
        // 设置itemSize
        itemSize = CGSize(width: itemWH, height: itemWH)
        minimumLineSpacing = 0
        minimumInteritemSpacing = 0
        scrollDirection = .horizontal
        
        // 设置collectionView属性
        collectionView?.isPagingEnabled = true
        collectionView?.showsHorizontalScrollIndicator = false
        collectionView?.showsVerticalScrollIndicator = true
        let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
        collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
        
        var page = 0
        let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
        for itemIndex in 0..<itemsCount {
            let indexPath = IndexPath(item: itemIndex, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            
            page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
            // 通过一系列计算, 得到x, y值
            let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
            let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
            
            attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
            // 把每一个新的属性保存起来
            attributesArr.append(attributes)
        }
        
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var rectAttributes: [UICollectionViewLayoutAttributes] = []
        _ = attributesArr.map({
            if rect.contains($0.frame) {
                rectAttributes.append($0)
            }
        })
        return rectAttributes
    }
    
}

附上相关项目:Swift 3.0 高仿微信

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS流布局UICollectionView系列二——UICollectionView的代理方法

        在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与思路,这篇博客是上一篇...

712
来自专栏移动端开发

UICollectionView 很简单的写个瀑布流

你项目中要用到它吗? 可能会在你的项目中用到这玩意,最近也是要用就简单的写了一个 Demo。没多少代码,就不放Git了,下面会详细点的说说代码的,要还有什么问...

1937
来自专栏LinXunFeng的专栏

iOS - Swift UICollectionView横向分页的问题UICollectionView横向分页的问题

973
来自专栏学海无涯

iOS开发之UICollectionViewDataSourcePrefetching

在iOS10中,苹果为UICollectionViewCell引入了Pre-Fetching预加载机制用于提升它的性能。主要引入了一个新的数据源协议UIColl...

3656
来自专栏一“技”之长

iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局

        前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout更加灵活的进行布局,但都限制在系...

962
来自专栏杨建荣的学习笔记

使用shell生成状态报表(r2笔记61天)

在数据迁移的时候,目前启用了10个并行的进程。每个进程负责一部分的数据导入工作。然而在统计数据导入进度的时候,总是感觉抓不到重点,没有一目了然的报告。 在定时做...

3425
来自专栏个人分享

JMS的常用方法

541
来自专栏MelonTeam专栏

封装内嵌UICollectionView和UIPageControl的ScrollView

在需求中涉及到一个比较通用的控件,ScrollView里面嵌入CollectionView,封装一下,后面再有相同交互不用重复造轮子。 一。交互样式 控件交互...

2089
来自专栏Golang语言社区

【Go 语言社区】转-golang windows 判断锁屏

package osapi import ( "syscall" "unsafe" "github.com/lxn/win" ) con...

3037
来自专栏一“技”之长

iOS流布局UICollectionView系列五——圆环布局的实现

        前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的布局属性类...

572

扫码关注云+社区