封装了一个iOS中间放大的collectionView layout

效果图如下所示

请添加图片描述

原理:就是首先确定一个放大和缩小系数和原大小对应的基准位置,然后根据距离每个布局属性到视图中心的距离和基准点到中心的距离的差距/基准点到中心的距离, 计算出每个布局属性的缩放系数

下面是代码

//
//  LBHorizontalCenterLayout.m
//  LBHorizontalCenterLayout
//
//  Created by mac on 2024/5/24.
//

#import "LBHorizontalCenterLayout.h"

@interface LBHorizontalCenterLayout ()

@property (nonatomic, assign) NSInteger index;

@end

@implementation LBHorizontalCenterLayout

- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    array = [self getCopyOfAttributes:array];
    //屏幕中线
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
    //刷新cell 缩放
    for (UICollectionViewLayoutAttributes *attributes in array) {
        if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal) {
            //分四种情况,以44 的item为基准,68和35 对应系数分别是1.56 和 0.8
            CGFloat baseW = self.minimumLineSpacing + self.itemSize.width;
            CGFloat apartScale;
            CGFloat distance = fabs(attributes.center.x - centerX);
            attributes.alpha = 1.0;
            if (distance <= baseW) {
                apartScale = 1 + (baseW - distance) / baseW * 0.56;
            } else {
                apartScale = 1 - (distance - baseW) / baseW * 0.2;
                //设置透明度
                if (attributes.center.x - centerX < 0) {
                    CGFloat alpha = (distance - baseW) / baseW;
                    attributes.alpha = 1 - alpha;
                }
            }
            //设置cell的缩放,按照余弦函数,越居中越趋近于1
            attributes.transform = CGAffineTransformMakeScale(apartScale, apartScale);
        }
    }
    return array;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    //把collectionview 本身的中心位位置(固定的), 转换成collectionView 整个内容上的point
    // convert the center position of the collectionView itself (fixed) to a point on the
    //entire content of the collectionView
    CGPoint pInView = [self.collectionView.superview convertPoint:self.collectionView.center toView:self.collectionView];
    
    NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:pInView];
    if (indexPath.item == 0) {
        if (newBounds.origin.x < self.collectionView.bounds.size.width / 2) {
            if (self.index != indexPath.item) {
                self.index = 0;
                if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewScrollToIndex:)]) {
                    [self.delegate collectionViewScrollToIndex:self.index];
                }
            }
        }
    } else {
        if (self.index != indexPath.item) {
            self.index = indexPath.item;
            if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewScrollToIndex:)]) {
                [self.delegate collectionViewScrollToIndex:self.index];
            }
        }
    }
    [super shouldInvalidateLayoutForBoundsChange:newBounds];
    return YES;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGFloat minOffset = CGFLOAT_MAX;
    CGFloat horizontalCenter = proposedContentOffset.x + self.collectionView.bounds.size.width/2;
    CGRect visibleRec = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
    NSArray *visibleAttributes = [super layoutAttributesForElementsInRect:visibleRec];
    for (UICollectionViewLayoutAttributes *atts in visibleAttributes) {
        CGFloat itemCenterX = atts.center.x;
        if (fabs(itemCenterX - horizontalCenter) <= fabs(minOffset)) {
            minOffset = itemCenterX - horizontalCenter;
        }
    }
    
    CGFloat centerOffsetX = proposedContentOffset.x + minOffset;
    //快速轻扫的时候, 距离过短,时间过短, 会导致无法进行翻页,及时很快的轻扫也让他能左右翻页
    if (fabs(velocity.x) > 0.7 && fabs(velocity.x) < 1.5 && fabs(minOffset) <= (self.collectionView.bounds.size.width / 2.0)) {
        if (velocity.x > 0) {
            centerOffsetX = (self.index + 1) * (self.itemSize.width + self.minimumLineSpacing);
        } else {
            centerOffsetX = (self.index - 1) * (self.itemSize.width + self.minimumLineSpacing);
        }
    }
    
    if (centerOffsetX < 0) {
        centerOffsetX = 0;
    }
    
    if (centerOffsetX < self.collectionView.contentSize.width - (self.sectionInset.left + self.sectionInset.right + self.itemSize.width)) {
        centerOffsetX = floor(centerOffsetX);
    }
    return CGPointMake(centerOffsetX, proposedContentOffset.y);
}
//防止报错,先复制attributes

- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
    NSMutableArray *array = [NSMutableArray array];
    for (UICollectionViewLayoutAttributes *attribute in attributes) {
        [array addObject:[attribute copy]];
    }
    return array;
}

@end

下面这一段是计算放大系数的核心逻辑

   if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal) {
            //分四种情况,以44 的item为基准,68和35 对应系数分别是1.56 和 0.8
            CGFloat baseW = self.minimumLineSpacing + self.itemSize.width;
            CGFloat apartScale;
            CGFloat distance = fabs(attributes.center.x - centerX);
            attributes.alpha = 1.0;
            if (distance <= baseW) {
                apartScale = 1 + (baseW - distance) / baseW * 0.56;
            } else {
                apartScale = 1 - (distance - baseW) / baseW * 0.2;
                //设置透明度
                if (attributes.center.x - centerX < 0) {
                    CGFloat alpha = (distance - baseW) / baseW;
                    attributes.alpha = 1 - alpha;
                }
            }
            //设置cell的缩放,按照余弦函数,越居中越趋近于1
            attributes.transform = CGAffineTransformMakeScale(apartScale, apartScale);

支持pod


pod 'LBHorizontalCenterLayout'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/642600.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据库--数据库基础(一)

目录 第一章 绪论 一.数据库的基本概念 1. 数据库的4个基本概念 2、数据库系统的特点 二.数据库和文件 三.数据模型 1.概念模型 2.逻辑模型(物理模型) 2.1关系模型 四.数据库系统的三级模式结构&#xff1a; 五数据库的二级映像功能与数据独立性 第二章 关系数据库…

web学习笔记(五十六)

目录 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名 1.1.2 绑定多个类名 1.2 style相关知识 2. vue的响应式原理 3. v-once 4.本地搭建Vue单页应用 4.1 安装Vue脚手架 4.2 安装对应的包文件 4.3 运行项目 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名…

【Unitydemo制作】音游制作—模式玩法的实现

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

Redis(十三) 事务

文章目录 前言事务的特性Redis事务的执行原理Redis中使用事务WATCH UNWATCH实现乐观锁 前言 前面我们学习 MySQL 的时候&#xff0c;肯定也学习了事务。事务是什么&#xff1f;给大家举个例子&#xff1a;假如我给朋友微信转账&#xff0c;我给他转了 100 块钱&#xff0c;当我…

5.18 TCP机械臂模拟

#include <netinet/tcp.h>//包含TCP选项的头文件 #include <arpa/inet.h> #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <linux/input.h>//读取输入事件 #include <sys/types.h> #include <sys/stat.h&…

C++vector的简单模拟实现

文章目录 目录 文章目录 前言 一、vector使用时的注意事项 1.typedef的类型 2.vector不是string 3.vector 4.算法sort 二、vector的实现 1.通过源码进行猜测vector的结构 2.初步vector的构建 2.1 成员变量 2.2成员函数 2.2.1尾插和扩容 2.2.2operator[] 2.2.3 迭代器 2…

Linux基础(五):常用基本命令

从本节开始&#xff0c;我们正式进入Linux的学习&#xff0c;通过前面的了解&#xff0c;我们知道我们要以命令的形式使用操作系统&#xff08;使用操作系统提供的各类命令&#xff0c;以获得字符反馈的形式去使用操作系统。&#xff09;&#xff0c;因此&#xff0c;我们是很有…

纯代码如何实现WordPress搜索包含评论内容?

WordPress自带的搜索默认情况下是不包含评论内容的&#xff0c;不过有些WordPress网站评论内容比较多&#xff0c;而且也比较有用&#xff0c;所以想要让用户在搜索时也能够同时搜索到评论内容&#xff0c;那么应该怎么做呢&#xff1f; 网络上很多教程都是推荐安装SearchWP插…

shelll 正则表达式

sort sort命令对行内容进行排序 sort语法&#xff1a; 1.sort &#xff08;选项&#xff09; 参数 2.cat file | sort 选项 选项&#xff1a; -n 按照数字进行排序 -r 反向排序 -k 指定排序 -f 忽略大小写 会将小写字母转化成大写字母来比较 -b 忽略每行前面的空格 .........…

CentOS上升级glibc2.17至glibc2.31

glibc是Linux系统中的重要组件之一。在CentOS中&#xff0c;glibc通常是作为系统的默认C标准库使用的&#xff0c;因为它是许多软件的基础库。在CentOS中&#xff0c;glibc的版本通常与CentOS版本一起发布。因为CentOS通常会优先选择稳定性而不是最新性&#xff0c;所以CentOS使…

【linux】docker下nextcloud安装人脸识别插件

一、插件源码地址&#xff1a; GitCode - 开发者的代码家园 二、插件官网地址&#xff1a; Releases - Face Recognition - Apps - App Store - Nextcloud 三、插件安装教程&#xff1a; 1、查看本地nextcloud版本号 http://ipAddress:8080/settings/admin/overview 2、找…

基于51单片机的火灾检测设计(仿真+程序+原理图+论文报告+讲解视频)

基于51单片机的火灾检测设计 基于51单片机的火灾检测设计&#xff08;仿真程序原理图论文报告&#xff09;功能要求仿真图&#xff1a;原理图&#xff1a;源程序&#xff1a;论文/报告&#xff1a;资料清单&#xff1a; 基于51单片机的火灾检测设计&#xff08;仿真程序原理图论…

论文阅读--CLIPasso

让计算机把真实图片抽象成简笔画&#xff0c;这个任务很有挑战性&#xff0c;需要模型捕获最本质的特征 以往的工作是找了素描的数据集&#xff0c;而且抽象程度不够高&#xff0c;笔画是固定好的&#xff0c;素描对象的种类不多&#xff0c;使得最后模型的效果十分受限 之所以…

在ubuntu中关于驱动得问题:如何将nouveau驱动程序加入黑名单和安装NVIDIA显卡驱动

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、nouveau驱动程序加入黑名单二、安装NVIDIA显卡驱动 一、nouveau驱动程序加入黑名单 (1) 打开黑名单列表文件 终端输入&#xff1a; sudo gedit /etc/modprobe…

共享单车(八):数据库

实现后台数据库访问模块的框架&#xff0c;能够实现验证请求并响应&#xff08;支持数据库操作&#xff09;。 数据库设计 class SqlTabel //负责数据库表的创建 { public:SqlTabel(std::shared_ptr<MysqlConnection> sqlconn) :sqlconn_(sqlconn) {}bool CreateUserI…

Mysql之基本架构

1.Mysql简介 mysql是一种关系型数据库&#xff0c;由表结构来存储数据与数据之间的关系&#xff0c;同时为sql(结构化查询语句)来进行数据操作。 sql语句进行操作又分为几个重要的操作类型 DQL: Data Query Language 数据查询语句 DML: Data Manipulation Language 添加、删…

Windows下安装部署rocketmq

1.1.下载安装rocketmq 下载 | RocketMQ 下载完后解压到自定义目录&#xff0c;MQ解压路径\rocketmq-all-4.6.0-bin-release&#xff1b;&#xff08;Windows10系统解压路径不要出现空格&#xff09; 1.2.配置环境变量 配置环境变量&#xff0c;变量名&#xff1a;ROCKETM…

Git 仓库中 -- 代码冲突产生、定位、解决的流程

目录 前置知识1 工具环境2 冲突的产生2.1 仓库中的源代码2.2 人员 A 首先更改代码2.3 人员 B 更改代码&#xff0c;产生冲突2.3.1 第一次错误提示&#xff1a;2.3.2 第二次错误提示&#xff1a; 3 查看冲突4 手动解决冲突4.1 方式一4.2 方式二&#xff08;tortoisegit&#xff…

mysql设置密码,修改密码,破解密码

目录 mysql官方文档 1. mysql中文文档地址&#xff1a; 2. mysql英文文档地址&#xff1a; 一、数据库设置密码&#xff1a; 1.命令行模式&#xff1a; 2.进入数据库设置密码&#xff1a; 二、数据库修改密码&#xff08;需要知道旧密码&#xff09;&#xff1a; 1.命令…

vue 展示svg矢量图可缩放拖动

使用插件&#xff1a;svg-pan-zoom <template> <!-- svg图--><div id"svgContainer"></div> </template><script> import svgPanZoom from svg-pan-zoom import svgFile from ../datav/img/220kVscb.svg // 路径根据实际情况调…