| 微信朋友圈图片显示缩放 | 您所在的位置：网站首页 › 朋友圈图片大小不一样 › 微信朋友圈图片显示缩放 |
微信朋友圈图片显示缩放
|
最近公司非要做一个和微信朋友圈效果，还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分，结果发现微信在朋友圈图片点击放大的地方是渐入的，但是再次点击的时候是闪出的，没有渐变背景效果，所以修复了一下，现在分享给大家。（只是个demo）具体应用到程序中，还需要大家根据自己的需求进行改进。 先说先原理在贴代码。 小伙伴我们既然要是模仿人家效果，首先是要观察。 1.打开微信朋友圈，点击有图片的它是渐变背景同时缩放。 2.再次点击放大后的图片，图片会缩小返回到所在列表的位置，让视觉上感觉是从列表里出来，之后又回到列表中。 看完以上两点，有的小伙伴就会想这会不会是一张图片？先不回答，接着往下看。 3.把wifi关掉，再次点击图片（这张图片，你没有点击过，并且已经在列表中显示出来了），你会发现其实他们不是一张图片（上述问题不存在）。 4.快速刷列表（上拉加载更多）（关闭wifi情况下），你会发现列表中的图片等待加载图片是一张灰色的图片，这时候你点击这张灰色图片，是没有反映的，说明微信开发处理是：只有图片加载完成，才允许你点击。 5.打开wifi，单击一张图片放大（举个列子，是长方形320*160的图片），如果图片是寛320 高 160，如果你放大图片，这个放大的倍数怎么算，其实很简单，要么你先看微信朋友圈，看看我的猜测有没有错： 猜测：当屏幕是竖着，你看看这个图片最后到达边缘是哪个边，是寛？还是高？上述例子中320已经到边缘了，那么高就是最后到达边缘的，对吧。肯定对，那160变成480的高度（3.5寸的屏幕），当然这个缩放是同比的。480/图片的高度160 的出来3就是缩放的倍数。 6.现在拿出来微信找一张类似于寛是320*160的寛图，用两个手指缩放看看，你会发现，当达到我上传的猜测后，不会继续放大。 7.微信图片单击后，多张可以左右滑动，单击缩小都会回到自己所在的位置。 8.还有，小图片有被缩减，这个缩减是有规律的：是把imgView.contentMode = UIViewContentModeScaleAspectFill;和第二5条心照不宣啊！，并且每一张图片都能缩放。 9.还有长按功能，这个如果上述8点实现，这个好说，对吧。
我来说说我这个demo实现的原理。先看看效果图片。
点击demo下载
（蓝色，可以删掉可以不删掉，是这个demo实现的过程）
1.首先要自定义个继承UIScrollView 的自定义ImgScrollView.h，用来缩放单张图片，然后把这个控件在放到UIScrollView中。 2.图片单击的时候出现渐变效果，其实就是背景透明层的控制，这个不说，然后把Cell中图片位置进行坐标转换成相对当前屏幕的位置。 3.初始化一个UIScrollview，用来存放ImgScrollView，背景是透明色。 4.计算单击图片位置，将容器ScrollView的ContentOffset.x位置对应设置。 5.缩放图片，判断图片的长和寛哪一边先到边缘，一旦有一边达到边缘，停止缩放。 6.给图片添加单击事件，同时imgView.contentMode = UIViewContentModeScaleAspectFill。
TapImageView.h有单击事件的图片 #import @protocol TapImageViewDelegate - (void) tappedWithObject:(id) sender; @end @interface TapImageView : UIImageView @property (nonatomic, strong) id identifier; @property (weak) id t_delegate; @end TapImageView.m #import "TapImageView.h" @implementation TapImageView - (void)dealloc { _t_delegate = nil; } - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(Tapped:)]; [self addGestureRecognizer:tap]; self.clipsToBounds = YES; self.contentMode = UIViewContentModeScaleAspectFill; self.userInteractionEnabled = YES; } return self; } - (void) Tapped:(UIGestureRecognizer *) gesture { if ([self.t_delegate respondsToSelector:@selector(tappedWithObject:)]) { [self.t_delegate tappedWithObject:self]; } } @end
ImgScrollView.h可以缩放的图片 #import @protocol ImgScrollViewDelegate - (void) tapImageViewTappedWithObject:(id) sender; @end @interface ImgScrollView : UIScrollView @property (weak) id i_delegate; - (void) setContentWithFrame:(CGRect) rect; - (void) setImage:(UIImage *) image; - (void) setAnimationRect; - (void) rechangeInitRdct; @end ImgScrollView.m #import "ImgScrollView.h" @interface ImgScrollView() { UIImageView *imgView; //记录自己的位置 CGRect scaleOriginRect; //图片的大小 CGSize imgSize; //缩放前大小 CGRect initRect; } @end @implementation ImgScrollView - (void)dealloc { _i_delegate = nil; } - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.showsHorizontalScrollIndicator = NO; self.showsVerticalScrollIndicator = NO; self.bouncesZoom = YES; self.backgroundColor = [UIColor clearColor]; self.delegate = self; self.minimumZoomScale = 1.0; imgView = [[UIImageView alloc] init]; imgView.clipsToBounds = YES; imgView.contentMode = UIViewContentModeScaleAspectFill; [self addSubview:imgView]; } return self; } - (void) setContentWithFrame:(CGRect) rect { imgView.frame = rect; initRect = rect; } - (void) setAnimationRect { imgView.frame = scaleOriginRect; } - (void) rechangeInitRdct { self.zoomScale = 1.0; imgView.frame = initRect; } - (void) setImage:(UIImage *) image { if (image) { imgView.image = image; imgSize = image.size; //判断首先缩放的值 float scaleX = self.frame.size.width/imgSize.width; float scaleY = self.frame.size.height/imgSize.height; //倍数小的，先到边缘 if (scaleX > scaleY) { //Y方向先到边缘 float imgViewWidth = imgSize.width*scaleY; self.maximumZoomScale = self.frame.size.width/imgViewWidth; scaleOriginRect = (CGRect){self.frame.size.width/2-imgViewWidth/2,0,imgViewWidth,self.frame.size.height}; } else { //X先到边缘 float imgViewHeight = imgSize.height*scaleX; self.maximumZoomScale = self.frame.size.height/imgViewHeight; scaleOriginRect = (CGRect){0,self.frame.size.height/2-imgViewHeight/2,self.frame.size.width,imgViewHeight}; } } } #pragma mark - #pragma mark - scroll delegate - (UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView { return imgView; } - (void)scrollViewDidZoom:(UIScrollView *)scrollView { CGSize boundsSize = scrollView.bounds.size; CGRect imgFrame = imgView.frame; CGSize contentSize = scrollView.contentSize; CGPoint centerPoint = CGPointMake(contentSize.width/2, contentSize.height/2); // center horizontally if (imgFrame.size.width |
【本文地址】