IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大)

本文主要是介绍IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这是Android-通过自定义ViewPager来高仿土巴兔选择装修风格效果的姐妹篇,上篇通过自定义ViewPager来实现了选中的一项居中并放大的效果,这里通过iCarousel来实现这个效果,iCarousel是我最喜欢的一个IOS开源库之一,我几乎每个IOS项目都用到了它,真的是非常的赞。好了,废话不多说,马上进入主题,在开始之前,先看下我们高仿后的效果图:

tubatu-viewpager-fang-ios.gif

要实现这个效果,总体难度上要比Android上轻松不少,你不需要关心点击左右边缘切换到相应的Item,iCarousel都已经帮你实现了,而且iCarousel的每个View都是支持复用。

总体难点就一个地方,那就是自定义iCarousel,然后设置相应的缩放动画。

首先,我们需要把iCarousel的type值设置成iCarouselTypeCustom,看代码

-(iCarousel *)iCarousel{CGFloat height = ScreenWidth - 2 *PAGE_OFFSET;if (_iCarousel == nil) {_iCarousel = [[iCarousel alloc] initWithFrame:CGRectMake(0, (ScreenHeight-height)*0.5, ScreenWidth, height)];_iCarousel.delegate = self;_iCarousel.dataSource = self;_iCarousel.bounces = NO;_iCarousel.pagingEnabled = YES;_iCarousel.type = iCarouselTypeCustom;}return _iCarousel;
}

然后,我们设置iCarousel两个必须的代理方法viewForItemAtIndexnumberOfItemsInCarousel,看代码:

#pragma mark - iCarousel代理
-(UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view{if (view == nil) {CGFloat viewWidth = ScreenWidth - 2*PAGE_OFFSET;view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, viewWidth, viewWidth)];}((UIImageView *)view).image = [UIImage imageNamed:[self.dataList objectAtIndex:index]];return view;
}-(NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel{return self.dataList.count;
}

经过上面设置后,我们的iCarousel就加进来了,但是你会发现,加进来的iCarousel不能滑动了,这是什么鬼。。。。

这是为什么呢?这是因为我们有一个非常重要的方法没有实现,这个方法是:

-(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform

这个方法就是整个iCarousel的核心所在,所有的动画效果都是这个方法来实现的

这里稍微讲解下iCarousel的原理:

  1. iCarousel不是基于UIScrollView实现的,而是直接继承UIView来实现

  2. iCarousel通过UIPanGestureRecognizer来计算和维护scrollOffset这个变量

  3. iCarousel本身并不会改变itemView的位置 而是靠修改itemView的layer.transform来实现位移和形变

为了实现我们想要中间放大的效果,就必须重写这个方法,看下我们的代码:

-(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform{static CGFloat max_sacle = 1.0f;static CGFloat min_scale = 0.6f;if (offset <= 1 && offset >= -1) {float tempScale = offset < 0 ? 1+offset : 1-offset;float slope = (max_sacle - min_scale) / 1;CGFloat scale = min_scale + slope*tempScale;transform = CATransform3DScale(transform, scale, scale, 1);}else{transform = CATransform3DScale(transform, min_scale, min_scale, 1);}return CATransform3DTranslate(transform, offset * self.iCarousel.itemWidth * 1.4, 0.0, 0.0);
}

核心的算法和我们Android版本的是一样的,只不过这里加了这个形变,一个是Scale形变,一个是移动Translate形变。经过上面的代码就实现我们想要的结果了。

小结

总体实现来说,这个要比Android版本的要简单多了,核心代码就是改变layer.transform属性值。

这也说明iCarousel是多么优秀的一个开源库,说到这里,我个人是非常不喜欢重复造轮子的,能用最少的代码达到所需的要求是我一直以来的准则,而且很多经典的轮子库(比如iCarousel)也值得你去深入探索和学习,了解作者的想法和思路(站在巨人的肩膀)是一种非常不错的学习方法和开阔视野的途径

这篇关于IOS-通过自定义iCarousel来高仿土巴兔选择装修风格效果(中间选中项放大)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1034052

相关文章

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言:为什么需要自定义异常一、异常基础:先搞懂python的异常体系1.1 异常是什么?1.2

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一,再次理解协议二,序列化和反序列化三,实现网络计算器3.1 日志文件3.2Socket.hpp

C语言自定义类型之联合和枚举解读

《C语言自定义类型之联合和枚举解读》联合体共享内存,大小由最大成员决定,遵循对齐规则;枚举类型列举可能值,提升可读性和类型安全性,两者在C语言中用于优化内存和程序效率... 目录一、联合体1.1 联合体类型的声明1.2 联合体的特点1.2.1 特点11.2.2 特点21.2.3 特点31.3 联合体的大小1

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期