iOS使用UICollectionView实现列表头部拉伸效果

 更新时间:2018年05月08日 15:01:14   作者:Break__Self  
这篇文章主要介绍了iOS使用UICollectionView实现列表头部拉伸效果,OC和Swift两个版本,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了iOS实现列表下拉放大效果展示的具体代码,供大家参考,具体内容如下

先看效果图

突然发现没有做出来之前都觉得蛮难的,做出来之后就觉得So Easy 大家都有这样的感触吧

做这个就重写 UICollectionViewFlowLayout 的几个方法就可以

OC版本

创建一个类 CustomCollectionViewFlowLayout 继承 UICollectionViewFlowLayout

//
// CustomCollectionViewFlowLayout.m
// 
//
// Created by GongHui_YJ on 16/8/4.
// Copyright © 2016年 Yangjian. All rights reserved.
//

#import "CustomCollectionViewFlowLayout.h"

@implementation CustomCollectionViewFlowLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
  return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

  UICollectionView *collectionView = [self collectionView];
  UIEdgeInsets insets = [collectionView contentInset];
  CGPoint offset = [collectionView contentOffset];
  CGFloat minY = -insets.top;

  NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

  if (offset.y < minY) {

    CGSize headerSize = [self headerReferenceSize];
    CGFloat deltaY = fabsf(offset.y - minY);

    for (UICollectionViewLayoutAttributes *attrs in attributes) {

      if ([attrs representedElementKind] == UICollectionElementKindSectionHeader) {

        CGRect headerRect = [attrs frame];
        headerRect.size.height = MAX(minY, headerSize.height + deltaY);
        headerRect.origin.y = headerRect.origin.y - deltaY;
        [attrs setFrame:headerRect];
        break;
      }
    }
  }

  return attributes;
}

@end

在控制器中使用 先导入头文件

// 创建collectionView
  CustomCollectionViewFlowLayout *flowLayout=[[CustomCollectionViewFlowLayout alloc] init];
  [flowLayout setSectionInset:UIEdgeInsetsMake(0, 0, 10, 0)];
  [flowLayout setItemSize:CGSizeMake(kScreenWidth / collectionCellW, kScreenWidth / collectionCellW)];
  [flowLayout setHeaderReferenceSize:CGSizeMake(kScreenWidth, userInfoImageViewH)];
  [flowLayout setFooterReferenceSize:CGSizeMake(kScreenWidth, 83)];
  [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
  [flowLayout setMinimumInteritemSpacing:0.0];
  [flowLayout setMinimumLineSpacing:0.0];

  self.homeCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight - 44)collectionViewLayout:flowLayout];
  self.homeCollectionView.backgroundColor = kViewBackgroundColor;
  self.homeCollectionView.alwaysBounceVertical = YES;
  self.homeCollectionView.showsVerticalScrollIndicator = NO;
  //设置代理
  self.homeCollectionView.delegate = self;
  self.homeCollectionView.dataSource = self;
  [self.view addSubview:self.homeCollectionView];

  // 注册表头
  [self.homeCollectionView registerClass:[YJHeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kCollectionHeaderView];

  // 注册表尾
  [self.homeCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kCollectionFooterView];

Swift版

喜欢swift 不需要导入头文件那么麻烦

//
// CustomCollectionViewFlowLayout.swift
// 
//
// Created by GongHui_YJ on 16/8/4.
// Copyright © 2016年YangJian. All rights reserved.
//

import UIKit

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout {

  override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
    return true
  }

  override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let collectionView = self.collectionView
    let insets = collectionView?.contentInset
    let offset = collectionView?.contentOffset
    let minY = -((insets?.top)!)

    let attributesArray = super.layoutAttributesForElementsInRect(rect)
    if offset!.y < minY {
      let headerSize = self.headerReferenceSize
      let deltaY = CGFloat(fabsf(Float((offset?.y)! - CGFloat(minY))))

      for attrs:UICollectionViewLayoutAttributes in attributesArray! {

        if attrs.representedElementKind == UICollectionElementKindSectionHeader {
          var headerRect = attrs.frame
          headerRect.size.height = max(minY, headerSize.height + deltaY)
          headerRect.origin.y = headerRect.origin.y - deltaY
          attrs.frame = headerRect
          break
        }
      }
    }

    return attributesArray
  }

}

在控制器 viewDidLoad方法实现

let customFlowLayout = CustomCollectionViewFlowLayout()
  customFlowLayout.headerReferenceSize = CGSizeMake(kScreenWidth, 203)
  customFlowLayout.footerReferenceSize = CGSizeMake(kScreenWidth, 83)
  customFlowLayout.minimumInteritemSpacing = 0
  customFlowLayout.minimumLineSpacing = 0
  customFlowLayout.itemSize = CGSizeMake(kScreenWidth / 3.000006, kScreenWidth / 3.00006)
  customFlowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 10, 0)

  self.homeCollectionView.setCollectionViewLayout(customFlowLayout, animated: true)
  self.homeCollectionView.backgroundColor = kViewBackgroundColor
  self.homeCollectionView.alwaysBounceVertical = true
  let nib = UINib(nibName: "CommonCollectionViewCell", bundle: nil)
  self.homeCollectionView.registerNib(nib, forCellWithReuseIdentifier: cellId)

  // 注册表头表尾
  let headerNib = UINib(nibName: "HeaderCollectionReusableView", bundle: nil)
  self.homeCollectionView.registerNib(headerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: collectionHeaderId)

  self.homeCollectionView.registerClass(UICollectionReusableView.classForCoder(), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: collectionFooterId)

注:不要实现UICollectionViewDelegateFlowLayout的代理方法了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • IOS判断字符串是不是纯数字的方法总结

    IOS判断字符串是不是纯数字的方法总结

    这篇文章给大家分享了在IOS中判断字符串是不是纯数字的三种方法,大家可以根据自己的需求来选择对应的方法实现,有需要的朋友们可以参考借鉴,下面来看看。
    2016-09-09
  • iOS扫描二维码实现手势拉近拉远镜头

    iOS扫描二维码实现手势拉近拉远镜头

    这篇文章主要为大家详细介绍了iOS扫描二维码实现手势拉近拉远镜头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • iOS中lebel特殊字符的自动换行问题解决

    iOS中lebel特殊字符的自动换行问题解决

    这篇文章主要给大家介绍了关于iOS中lebel特殊字符的实现不自动换行的相关资料,文中通过示例代码介绍的非常详细,对大家学习iOS具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • IOS 开发之UISearchBar 详解及实例

    IOS 开发之UISearchBar 详解及实例

    这篇文章主要介绍了IOS 开发之UISearchBar 详解及实例的相关资料,主要介绍 IOS UISearchBar的使用,附有实例代码,需要的朋友可以参考下
    2016-12-12
  • iOS禁止所有输入法表情的方法

    iOS禁止所有输入法表情的方法

    这篇文章主要为大家详细介绍了iOS禁止所有输入法表情的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • iOS之单独使用UISearchBar创建搜索框的示例

    iOS之单独使用UISearchBar创建搜索框的示例

    本篇文章主要介绍了iOS之单独使用UISearchBar创建搜索框的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 如何利用iCloud Drive同步Xcode配置详解

    如何利用iCloud Drive同步Xcode配置详解

    这篇文章主要给大家介绍了关于如何利用iCloud Drive同步Xcode配置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2018-05-05
  • iOS获取当前连接的WiFi以及IP地址

    iOS获取当前连接的WiFi以及IP地址

    本文主要介绍了iOS获取当前连接的WiFi以及IP地址方法的核心代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • iOS中WKWebView的一些特殊使用总结

    iOS中WKWebView的一些特殊使用总结

    这篇文章主要给大家介绍了关于iOS中WKWebView的一些特殊使用,文中通过示例代码介绍的非常详细,对大家学习或者使用iOS具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • IOS 开发之PickerView自定义视图的实例详解

    IOS 开发之PickerView自定义视图的实例详解

    这篇文章主要介绍了IOS 开发之PickerView自定义视图的实例详解的相关资料,这里提供实例帮助大家学习理解这部分知识,需要的朋友可以参考下
    2017-08-08

最新评论