当前位置: 移动技术网 > IT编程>移动开发>IOS > iOS使用UICollectionView实现列表头部拉伸效果

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

望京金箍棒,希盼的好梦,长尾鬣蜥

本文实例为大家分享了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 uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网