iOS UICollectionView的用法

使用流式布局

继承

UICollectionViewDataSource,UICollectionViewDelegateFlowLayout

设置

Swift

self.collectionView.register(UINib.init(nibName: "MeCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MeCollectionViewCell");
self.collectionView.showsHorizontalScrollIndicator = false;
self.collectionView.showsVerticalScrollIndicator = false;
self.collectionView.backgroundColor = UIColor.clear;
self.collectionView.isScrollEnabled = false;
let flowLayout = UICollectionViewFlowLayout();
flowLayout.scrollDirection = UICollectionViewScrollDirection.vertical;
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
self.collectionView.collectionViewLayout = flowLayout;
self.collectionView.dataSource = self;
self.collectionView.delegate = self;

OC

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (strong, nonatomic) NSMutableArray<NSMutableArray<OrderPicModel *> *> *tableData;
[self.collectionView registerNib:[UINib nibWithNibName:@"OrderPicsCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"OrderPicsCollectionViewCell"];
self.collectionView.showsHorizontalScrollIndicator = false;
self.collectionView.showsVerticalScrollIndicator = false;
self.collectionView.scrollEnabled = true;
self.collectionView.pagingEnabled = true;
    
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
self.collectionView.collectionViewLayout = flowLayout;
self.collectionView.dataSource = self;
self.collectionView.delegate = self;

代理方法

Swift

var colletcionData:[[String:String]] = [
        ["type": "1","text":"签到","image":"uc_sign@3x.png"],
        ["type": "2","text":"积分历史","image":"uc_integration@3x.png"],
        ["type": "3","text":"更多","image":"uc_more@3x.png"]
    ]
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1;
}
    
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return colletcionData.count;
}
    
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let itemdata = colletcionData[indexPath.row];
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MeCollectionViewCell", for: indexPath) as! MeCollectionViewCell;
    cell.imageView.image = UIImage(named: itemdata["image"]!);
    cell.textLabel.text = itemdata["text"];
    if(indexPath.row+1 % 3 == 0){
        cell.lineImageView.isHidden = true;
    }
    return  cell;
}
    
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: self.collectionView.frame.width/3, height: 100);
}
    
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    
}

OC

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return self.tableData.count;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.tableData[section].count;
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    OrderPicModel *model = self.tableData[indexPath.section][indexPath.row];
    OrderPicsCollectionViewCell *picCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"OrderPicsCollectionViewCell" forIndexPath:indexPath];
    picCell.imageView.image = [UIImage imageNamed:model.imageUrl];
    return picCell;
}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height);
}

- (void)collectionView:(UICollectionView *)collectionView
  didEndDisplayingCell:(UICollectionViewCell *)cell
    forItemAtIndexPath:(NSIndexPath *)indexPath {
    // 获取当前显示的cell的下标
    NSIndexPath *firstIndexPath = [[self.collectionView indexPathsForVisibleItems] firstObject];
    // 赋值给记录当前坐标的变量
    self.pageControl.currentPage = firstIndexPath.row;
}

设置Header或Footer

生成头

我这里用的xib,对应的class文件如下

class QuestionBookHeader: UICollectionReusableView {
    @IBOutlet weak var titleLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    } 
}

注册

self.collectionView.registerNib(UINib(nibName: "QuestionBookHeader", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "QuestionBookHeader")

代理方法

//返回自定义HeadView或者FootView,我这里以headview为例
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView{
    
    let header = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "QuestionBookHeader", forIndexPath: indexPath) as! QuestionBookHeader;
    if(indexPath.section == 0){
        header.titleLabel.text = "我的分类"
    }else{
        header.titleLabel.text = "推荐分类"
    }
    
    return header
}

使用自定义布局

继承

UICollectionViewDataSource,UICollectionViewDelegate

自定义布局

import UIKit
class MainLayout : UICollectionViewLayout {
    
    // 内容区域总大小,不是可见区域
    override func collectionViewContentSize() -> CGSize {
        return CGSizeMake(
            collectionView!.bounds.size.width,
            320
        )
    }
    
    // 所有单元格位置属性
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributesArray = [UICollectionViewLayoutAttributes]()
        let cellCount = self.collectionView!.numberOfItemsInSection(0)
        for i in 0..<cellCount {
            let indexPath =  NSIndexPath(forItem:i, inSection:0)
            let attributes =  self.layoutAttributesForItemAtIndexPath(indexPath)
            attributesArray.append(attributes!)
        }
        return attributesArray
    }
    
    // 这个方法返回每个单元格的位置和大小
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        //当前单元格布局属性
        let attribute =  UICollectionViewLayoutAttributes(forCellWithIndexPath:indexPath)
        //当前行的Y坐标
        let topSpace:CGFloat = 10;
        let space:CGFloat = 6;
        let leftSpace:CGFloat = 10;
        let itemWidth:CGFloat = (collectionView!.bounds.size.width - leftSpace*2 - space)/2;
        var itemHeight:CGFloat = 214;
        var itemHeight2:CGFloat = 104;
        if(ZJ_SysUtils.getDeviceType() == ZJ_SysUtils.DeviceType.iPhone6){
            itemHeight2 = itemHeight2 * 1.3;
            itemHeight = itemHeight2 * 2 + space;
        }
        let rightX:CGFloat =  leftSpace + itemWidth + space;
        let right1Y = topSpace;
        let right2Y = topSpace + itemHeight2 + space;
        let right3Y = topSpace + itemHeight + space;
        
        let item = indexPath.item;
        if (item == 0) {
            attribute.frame = CGRectMake(leftSpace, right1Y, itemWidth, itemHeight)
        } else if (item == 1) {
            attribute.frame = CGRectMake(rightX, right1Y, itemWidth, itemHeight2)
        } else if (item == 2) {
            attribute.frame = CGRectMake(rightX, right2Y, itemWidth, itemHeight2)
        } else if (item == 3) {
            attribute.frame = CGRectMake(leftSpace, right3Y, itemWidth, itemHeight2)
        } else if (item == 4) {
            attribute.frame = CGRectMake(rightX, right3Y, itemWidth, itemHeight2)
        }
        return attribute
    }
}

设置

collectionView.registerNib(UINib.init(nibName: "MainBigCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "mainBigCollCell");
collectionView.registerNib(UINib.init(nibName: "MainSmallCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "mainSmallCollCell");
collectionView.collectionViewLayout = MainLayout();
collectionView.dataSource = self;
collectionView.delegate = self;

代理方法

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1;
}
    
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5;
}
    
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    
}
    
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

}

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏App渠道推广

H5网页唤醒App有哪些做法

在这个流量为王的互联网背景下,移动端的H5页面显然在导流上承担着重要作用,在H5页面上,我们对引流的需求有两种:

37820
来自专栏安恒网络空间安全讲武堂

IOS/MacOS沙箱逃逸竞赛

iOS 12在几周前发布了,并带来了许多安全方面的修复和改进。特别是,这个新版本碰巧修补了我们在Synacktiv发现的一个很厉害的内核漏洞。

10130
来自专栏用户5948733的专栏

iPhone误删通讯录怎么恢复?说出来可能你不信

  iPhone误删通讯录怎么恢复?很多苹果用户在刚使用的时候对一些操作有些不熟悉,这样可能就会因为一些误操作将手机中的数据删除了,可是当要找回删除的数据怎么办...

8820
来自专栏mukekeheart的iOS之旅

iOS学习——iOS项目增加新的字体

  在项目开发过程中,iOS系统自带的字体库可能不适应需求,需要导入其他的字体库。下面是iOS项目增加新的字体的基本思路,基本上分为三步:

5320
来自专栏mukekeheart的iOS之旅

iOS学习——页面的传值方式iOS----KVC和KVO 详解

在iOS开发过程中,页面跳转时在页面之间进行数据传递是很常见的事情,我们称这个过程为页面传值。页面跳转过程中,从主页面跳转到子页面的数据传递称之为正向传值;反...

7320
来自专栏数据森麟

从6730个微信用户中分析出大家的手机使用习惯

之前写了一篇分析小程序用户微信名的文章,从00-90后的微信昵称,发现如下规律。。。大家反响很大,喜欢不喜欢的都有,全网各个平台(微信+网站)总浏览量超10万,...

10020
来自专栏mukekeheart的iOS之旅

iOS学习——#define、const、typedef的区别

在iOS开发中经常遇到一些字段和类型的定义,例如配置生产和测试不同环境的参数等,这时候经常用到#define、const以及typedef。那么它们之间有什么区...

6840
来自专栏mukekeheart的iOS之旅

iOS学习——NSLog输出各种类型

在开发过程中,在调试过程中经常打印不出自己想要的数据格式,还时常报警告,所以整理了一下iOS中用NSLog打印各种数据类型的样式。 整型占位符说明 : %d ...

6320
来自专栏安恒网络空间安全讲武堂

Safari扩展

本系列文章分两部分,介绍macOS浏览器扩展背后的技术,以及恶意插件如何窃取密码、银行细节和其他敏感用户数据。

13540
来自专栏h5

uni-app自定义弹窗模板uniPop组件

uni-app自定义弹窗uniPop.vue模板|uniapp仿微信弹窗/仿ios弹窗效果|msg信息框|alert对话框|loading提示框

1.9K30

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励