微信朋友圈图片显示缩放

最近公司非要做一个和微信朋友圈效果，还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分，结果发现微信在朋友圈图片点击放大的地方是渐入的，但是再次点击的时候是闪出的，没有渐变背景效果，所以修复了一下，现在分享给大家。（只是个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 <UIKit/UIKit.h>@protocol TapImageViewDelegate <NSObject>- (void) tappedWithObject:(id) sender;@end@interface TapImageView : UIImageView@property (nonatomic, strong) id identifier;@property (weak) id<TapImageViewDelegate> 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 <UIKit/UIKit.h>@protocol ImgScrollViewDelegate <NSObject>- (void) tapImageViewTappedWithObject:(id) sender;@end@interface ImgScrollView : UIScrollView@property (weak) id<ImgScrollViewDelegate> i_delegate;- (void) setContentWithFrame:(CGRect) rect;
- (void) setImage:(UIImage *) image;
- (void) setAnimationRect;
- (void) rechangeInitRdct;@end

ImgScrollView.m

#import "ImgScrollView.h"@interface ImgScrollView()<UIScrollViewDelegate>
{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 horizontallyif (imgFrame.size.width <= boundsSize.width){centerPoint.x = boundsSize.width/2;}// center verticallyif (imgFrame.size.height <= boundsSize.height){centerPoint.y = boundsSize.height/2;}imgView.center = centerPoint;
}#pragma mark -
#pragma mark - touch
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{if ([self.i_delegate respondsToSelector:@selector(tapImageViewTappedWithObject:)]){[self.i_delegate tapImageViewTappedWithObject:self];}
}

这里不是全部代码，具体demo已经上传。

git代码下载

点击demo下载

微信朋友圈图片显示缩放相关推荐

android 在 ListView 的 item 中插入 GridView 仿微信朋友圈图片显示。
转载请声明出处(http://www.cnblogs.com/linguanh/) 先上张效果图: 1,思路简述这个肯定是要重写 baseAdapter的了,这里我分了两个数据适配器,一个是自定义的 ...
安卓开发仿微信图片拖拽_Android仿微信朋友圈图片浏览器（支持图片手势缩放，拖动）...
[实例简介] Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动) [实例截图] [核心代码] ImageDemo-2014-02-18 └── ImageDemo-2014-02-18 ├ ...
iOS转场动画之微信朋友圈图片查看器
前言什么是转场动画呢?顾名思义,就是切换界面所用的动画效果.本文主要介绍的是modal的效果.当我们使用modal的时候,只需要使用 presentViewController:animated:c ...
canva画图图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...
需求如下: 前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上.那么 ...
Android仿微信朋友圈图片上传选择器布局
标题有点绕口,直接上一个效果图,如果符合你的需求的请在往下看,避免浪费你的时间当当当当,标红的区域就是今天我们要干的活了 ,搞起来! 思路: 对android有点了解的人都知道在列表显示中我们可以使 ...
Android仿微信朋友圈图片展示效果,图片查看器
现在越来越多的APP都会有图片展示,这里是模仿微信朋友圈图片展示效果,图片查看器. 主要分为4部分: 1.透明Activity 2.计算gridView下iamgeView Item所在位置 3.一张 ...
如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO
当下朋友圈很火,很多企业都将微信朋友圈作为品牌传播的途径,经常会发一些精彩的文章到微信朋友圈供大家自发传播,这样的想法很好,对于优质的内容,网友们也乐于转发与朋友们分享,对品牌宣传与推广确实是有好处的 ...
Android调用系统分享和指定app分享-微信朋友圈图文分享和qq分享
Android调用系统分享和指定app分享-微信朋友圈图文分享和qq分享标签: Android系统分享QQ分享朋友圈图文分享 2016-09-27 22:54 279人阅读评论(0) 收藏举报 ...
类微信朋友圈图片放大效果，点击图片放大动画
要用到的就是坐标转换方法 - (CGRect)convertRect:(CGRect)rect toView:(UIView *)view; 1:我这里演示的是 tableviewHeader上子v ...

微信朋友圈图片显示缩放

微信朋友圈图片显示缩放相关推荐

最新文章

热门文章