iOS自定义UICollectionViewFlowLayout实现图片浏览效果

以前瀑布流的时候使用过UICollectionView，但是那时使用的是系统自带的UICollectionViewFlowLayout布局，今天看文章，看到UICollectionViewFlowLayout自定义相关的东西，于是动手写了一个简单图片浏览的demo，熟练一些UICollectionViewFlowLayout自定义布局。

#import <UIKit/UIKit.h>

@interface JWCollectionViewFlowLayout : UICollectionViewFlowLayout

@end

自定义UICollectionViewFlowLayout，首先继承UICollectionViewFlowLayout，实现一下几个方法

#define screenWidth [UIScreen mainScreen].bounds.size.width

#define MaxChangeRange 100

#import "JWCollectionViewFlowLayout.h"

@implementation JWCollectionViewFlowLayout

-(void)prepareLayout
{
 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 self.itemSize = CGSizeMake(300, 500);
}

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

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
 NSArray *array = [super layoutAttributesForElementsInRect:rect];

 CGRect visibleRect = CGRectMake(self.collectionView.contentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
 for (UICollectionViewLayoutAttributes *attr in array)
 {
  if (CGRectIntersectsRect(attr.frame, rect)) {

   BOOL isAtRight = YES;
   CGFloat distance = (attr.center.x - CGRectGetMidX(visibleRect));
   if (distance<0) {
    distance = -distance;
    isAtRight = NO;
   }
   CGFloat precent ;
   if (distance < 180)
   {
    precent = 1.0;
   }
   else
   {
    precent = ((screenWidth / 2) - distance) / (screenWidth / 2);
   }
   CATransform3D transform = CATransform3DIdentity;
   transform.m34 = 1.0 / 600;

   if (precent < 0.5) {
    precent = 0.5;
   }
   transform = CATransform3DScale(transform, 1, precent, 1);
   CGFloat p = isAtRight?M_PI_4:-M_PI_4;
   transform = CATransform3DRotate(transform, p * (1 - precent), 0, 1, 0);
   attr.transform3D = transform;
   attr.zIndex = 1;
   attr.alpha = precent;
  }
 }

 return array;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
 CGFloat offset = MAXFLOAT;

 CGFloat hCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);

 CGRect currentRect = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);

 NSArray* array = [super layoutAttributesForElementsInRect:currentRect];
 for (UICollectionViewLayoutAttributes* layoutAttributes in array)
 {
  CGFloat itemHorizontalCenter = layoutAttributes.center.x;
  if (ABS(itemHorizontalCenter - hCenter) < ABS(offset))
  {

   offset = itemHorizontalCenter - hCenter;
  }
 }

 return CGPointMake(proposedContentOffset.x + offset, proposedContentOffset.y);
}

使用

-(void)setupUI
{

 JWCollectionViewFlowLayout *flowLayout = [[JWCollectionViewFlowLayout alloc] init];
 UICollectionView *imgBrowseView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
 imgBrowseView.dataSource = self;
 imgBrowseView.delegate = self;
 imgBrowseView.backgroundColor = [UIColor whiteColor];
 [self.view addSubview:imgBrowseView];
 _imgBrowseView = imgBrowseView;

 [self.imgBrowseView registerNib:[UINib nibWithNibName:@"CustumCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
}

demo:https://github.com/jiangtaidi/JWImageBrowseDemo.git

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • IOS使用UICollectionView实现无限轮播效果

    IOS使用UICollectionView实现无限轮播效果

    一.案例演示 本案例Demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播.知识点主要集中在UICollectionView和NSTimer的使用. 二.知识储备 2.1.UICollectionView横向布局 只需要设置UICollectionViewFlowLayout的scrollDirection为UICollectionViewScrollDirectionHorizontal即可. 2.2.NSTimer的基本使用 NSTimer的初始化: 复制代码 代码如下: + (NSTi

  • Swift下使用UICollectionView 实现长按拖拽功能

    Swift下使用UICollectionView 实现长按拖拽功能

    导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. GitHub地址:https://github.com/wangliujiayou/Swift-dragLabel 欢迎Star. 效果 主要代码 手势长按移动 1.给CollectionViewCell添加一个长按手势. private lazy var collectionView: UICollectionView = { let clv

  • iOS 解决UICollectionView 计算 Cell 大小的问题

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 正文 陷阱一:minimumLineSpacing.minimumInteritemSpacing 很容易就把这两个属性设置为 0 ,这两个属性是最小行间距和最小列间距,注意是最小!!也就是说实际上可以 > 0 ,并不是间距就是 0 陷阱二:sectionInset 设置 cell 的边距.一开始我以为是每一个 cell 的边距,相邻之间会叠加效果,实际上并不是这样的,这个属性

  • IOS简单实现瀑布流UICollectionView

    IOS简单实现瀑布流UICollectionView

    UICollectionView 比tableView 灵活,功能也强大很多.系统实现了流式布局,但用处还有很多限制. 要想实现更灵活的布局,就咬重写UICollectionViewLayout. 先看下实现效果: 废话不多说,直接上代码: 先看WaterfallCollectionLayout.m #import "WaterfallCollectionLayout.h" #define colMargin 5 #define colCount 4 #define rolMargin

  • iOS应用中UICollectionViewCell定制Button

    iOS应用中UICollectionViewCell定制Button

    UICollectionViewCell定制Button 效果 特点 1.能够动态设置每行显示的按钮的个数,以及控件的摆放格式 2.实现单选或者多选的功能,实现点击事件 3.自定制按钮的显示样式 用法 1.下载源码后,将文件中的GridCollectionView.h/.m文件, CustomCollectionViewCell.h/.m文件, TypeCellClass.h/.m文件导入工程中. 2.注意:你所创建的cell要继承CustomCollectionViewCell.然后你的cel

  • iOS中关于Swift UICollectionView横向分页的问题

    iOS中关于Swift UICollectionView横向分页的问题

    下面通过图文并茂的形式给大家介绍UICollectionView横向分页的问题,具体内容详情如下所示: 情况 直接看图 滚前 滚后 已经设置collectionView的isPagingEnabled为true了,可是出现了这种情况,原因就是collectionView的contentSize不够. <UICollectionView: 0x7fc565076000; frame = (0 0; 375 197); clipsToBounds = YES; gestureRecognizers

  • iOS自定义UICollectionViewFlowLayout实现图片浏览效果

    iOS自定义UICollectionViewFlowLayout实现图片浏览效果

    以前瀑布流的时候使用过UICollectionView,但是那时使用的是系统自带的UICollectionViewFlowLayout布局,今天看文章,看到UICollectionViewFlowLayout自定义相关的东西,于是动手写了一个简单图片浏览的demo,熟练一些UICollectionViewFlowLayout自定义布局. #import <UIKit/UIKit.h> @interface JWCollectionViewFlowLayout : UICollectionVie

  • UICollectionView 实现图片浏览效果

    UICollectionView 实现图片浏览效果

    目录 一.效果展示 二.实现思路 三.代码整理 1.PhotoBrowseViewLayout 2.PhotoBrowseCollectionViewCell 3.CollectPhotoBrowseView 四.总结与思考 一.效果展示 废话开篇:利用 UICollectionView 简单实现一个图片浏览效果. 二.实现思路 1.封装 UICollectionViewLayout ,实现内部 UICollectionViewCell 的布局. UICollectionViewLayout 在

  • JavaScript仿百度图片浏览效果

    JavaScript仿百度图片浏览效果

    本文实例为大家分享了js图片浏览效果的具体代码,供大家参考,具体内容如下 在线地址:http://www.hui12.com/nbin/demo/imgskim/index.html https://nbin2008.github.io/demo/imgskim/index.html 效果图: index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿

  • Android UI控件之Gallery实现拖动式图片浏览效果

    Android UI控件之Gallery实现拖动式图片浏览效果

    我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过Gallery来实现拖动效果的. 通过Gallery可以实现各种各样的效果,此篇文章只是简要谈谈他的用法,至于后续的一些效果 有机会的时候做一个整理. 首先看看其简单实现吧!本次实例是通过选取图片实现类似设置背景的功能! 不过需要说明的是:图片不宜过大,否则容易内存溢出,android对大图片的支持不好

  • UIScrollView实现六棱柱图片浏览效果

    UIScrollView实现六棱柱图片浏览效果

    目录 一.效果展示 二.实现原理 三.代码 四.总结与思考 一.效果展示 废话开篇:利用 CATransform3D 图形变换及 UIScrollView 的一些方法实现一个六棱柱图片浏览效果 二.实现原理 1.在一个基础 View 上添加六棱柱的六个侧面视图. 2.调整六棱柱的各个侧面的旋转角度及z轴数值. 3.基础 View 放在 UIScrollView 上,通过监听 UIScrollView 的滑动来设置基础 View 的坐标x值与与y轴的旋转角度. 三.代码 创建 PhotoDrumB

  • iOS tableView实现顶部图片拉伸效果

    iOS tableView实现顶部图片拉伸效果

    大家可能注意到一些app的tableView的顶部图片,会随着你拉伸而跟着拉伸变大,下面这是我的一些想法 原图: 效果图: 下面附上代码吧,这里的图片不是添加在tabview的header上 #define SCREEN_W [UIScreen mainScreen].bounds.size.width #define SCREEN_H [UIScreen mainScreen].bounds.size.height #define TOP 200 //顶部预留 #import "ViewCon

  • iOS自定义UITabBar仿今日头条效果

    iOS自定义UITabBar仿今日头条效果

    动机 关于自定义 TabBar,早就有过很多讨论,开源网站上也有很多造好的轮子,多半是纯代码实现有个性的 TabBar,当然我们可以很方便的使用它.周末闲着没事干,自己也写了一下,模仿今日头条的 TabBar 效果,实现方式是Storyboard + 代码. 效果图 实现步骤在 Storyborad 上搭建项目基础结构 在界面上设置每个 TabBarItem 的相关属性 需要自定义的 item 不需要在界面上设置. 自定义 UITabBarViewController 目的 替换默认的 UITa

  • 推荐一个不错的图片浏览效果

    推荐一个不错的图片浏览效果

    受那位WPSXXX的 IMG大于DIV 的启发 写的  有不足之处 如果有什么好的修改或建议 希望能给我一份copy 谢谢 sjx.saxon@gmail.com Map Image * {margin:0px auto;padding:0px;text-align:center;} * {font-size:9pt;font-family:Arial;} body {margin-top:20px;} body{-moz-user-select: none;-khtml-user-select

  • 来自国外的一款Js图片浏览效果

    来自国外的一款Js图片浏览效果

    效果图:测试代码: Js图片浏览器 play '; } this.m_mainviewer = this.container.firstChild.cloneNode(true); this.bind(); this.start(); }, writeCanvas : function(id) { document.write(' '); this.container = document.getElementById(id); }, bind : function(obj, evt, fun)

  • iOS tableView实现下拉图片放大效果

    本文实例为大家分享了iOS实现下拉图片放大效果展示的具体代码,供大家参考,具体内容如下 #import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScreen mainScreen].bounds.size.height

随机推荐