微信朋友圈图片显示缩放

时间：2024-04-17 15:29:27

近期公司非要做一个和微信朋友圈效果，还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分，结果发现微信在朋友圈图片点击放大的地方是渐入的，可是再次点击的时候是闪出的，没有渐变背景效果，所以修复了一下，如今分享给大家。（仅仅是个demo）详细应用到程序中，还须要大家依据自己的需求进行改进。

先说先原理在贴代码。

小伙伴我们既然要是模仿人家效果，首先是要观察。

1.打开微信朋友圈，点击有图片的它是渐变背景同一时候缩放。

2.再次点击放大后的图片，图片会缩小返回到所在列表的位置，让视觉上感觉是从列表里出来，之后又回到列表中。

看完以上两点，有的小伙伴就会想这会不会是一张图片？先不回答，接着往下看。

3.把wifi关掉，再次点击图片（这张图片，你没有点击过，而且已经在列表中显示出来了），你会发现事实上他们不是一张图片（上述问题不存在）。

4.高速刷列表（上拉载入很多其它）（关闭wifi情况下），你会发现列表中的图片等待载入图片是一张灰色的图片，这时候你点击这张灰色图片，是没有反映的，说明微信开发处理是：仅仅有图片载入完毕，才同意你点击。

5.打开wifi，单击一张图片放大（举个列子，是长方形320*160的图片），假设图片是寛320 高 160，假设你放大图片，这个放大的倍数怎么算，事实上非常easy，要么你先看微信朋友圈，看看我的推測有没有错：

     推測：当屏幕是竖着，你看看这个图片最后到达边缘是哪个边，是寛？还是高？上述样例中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 horizontally
    if (imgFrame.size.width <= boundsSize.width)
    {
        centerPoint.x = boundsSize.width/2;
    }
    
    // center vertically
    if (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下载



相关文章