朋友发了3条微信动态，在朋友圈我能看到1条更新动态，另外两条要点他头像进去才能看到，他是怎么设置的？
14-06-08 &匿名提问最近公司非要做一个和微信朋友圈效果，还要求要惟妙惟肖。感觉最麻烦的就是在图片缩放的部分，结果发现微信在朋友圈图片点击放大的地方是渐入的，但是再次点击的时候是闪出的，没有渐变背景效果，所以修复了一下，现在分享给大家。（只是个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 = UIViewContentModeScaleAspectF和第二5条心照不宣啊！，并且每一张图片都能缩放。
9.还有长按功能，这个如果上述8点实现，这个好说，对吧。
我来说说我这个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)
@interface TapImageView : UIImageView
@property (nonatomic, strong)
@property (weak) id&TapImageViewDelegate& t_
TapImageView.m
#import &TapImageView.h&
@implementation TapImageView
- (void)dealloc
_t_delegate =
- (id)initWithFrame:(CGRect)frame
self = [super initWithFrame:frame];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(Tapped:)];
[self addGestureRecognizer:tap];
self.clipsToBounds = YES;
self.contentMode = UIViewContentModeScaleAspectF
self.userInteractionEnabled = YES;
- (void) Tapped:(UIGestureRecognizer *) gesture
if ([self.t_delegate respondsToSelector:@selector(tappedWithObject:)])
[self.t_delegate tappedWithObject:self];
ImgScrollView.h可以缩放的图片
#import &UIKit/UIKit.h&
@protocol ImgScrollViewDelegate &NSObject&
- (void) tapImageViewTappedWithObject:(id)
@interface ImgScrollView : UIScrollView
@property (weak) id&ImgScrollViewDelegate& i_
- (void) setContentWithFrame:(CGRect)
- (void) setImage:(UIImage *)
- (void) setAnimationR
- (void) rechangeInitR
ImgScrollView.m
#import &ImgScrollView.h&
@interface ImgScrollView()&UIScrollViewDelegate&
UIImageView *imgV
//记录自己的位置
CGRect scaleOriginR
//图片的大小
CGSize imgS
//缩放前大小
CGRect initR
@implementation ImgScrollView
- (void)dealloc
_i_delegate =
- (id)initWithFrame:(CGRect)frame
self = [super initWithFrame:frame];
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.bouncesZoom = YES;
self.backgroundColor = [UIColor clearColor];
self.delegate =
self.minimumZoomScale = 1.0;
imgView = [[UIImageView alloc] init];
imgView.clipsToBounds = YES;
imgView.contentMode = UIViewContentModeScaleAspectF
[self addSubview:imgView];
- (void) setContentWithFrame:(CGRect) rect
imgView.frame =
initRect =
- (void) setAnimationRect
imgView.frame = scaleOriginR
- (void) rechangeInitRdct
self.zoomScale = 1.0;
imgView.frame = initR
- (void) setImage:(UIImage *) image
if (image)
imgView.image =
imgSize = image.
//判断首先缩放的值
float scaleX = self.frame.size.width/imgSize.
float scaleY = self.frame.size.height/imgSize.
//倍数小的，先到边缘
if (scaleX & scaleY)
//Y方向先到边缘
float imgViewWidth = imgSize.width*scaleY;
self.maximumZoomScale = self.frame.size.width/imgViewW
scaleOriginRect = (CGRect){self.frame.size.width/2-imgViewWidth/2,0,imgViewWidth,self.frame.size.height};
//X先到边缘
float imgViewHeight = imgSize.height*scaleX;
self.maximumZoomScale = self.frame.size.height/imgViewH
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 imgV
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
CGSize boundsSize = scrollView.bounds.
CGRect imgFrame = imgView.
CGSize contentSize = scrollView.contentS
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 = centerP
#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已经上传。
本文已收录于以下专栏：
相关文章推荐
简单的就这样，实现效果的方法有多种，可以使用ListView嵌套GridView，也可以直接使用RecycleView，这里只说RecycleView的实现方法。
难一点的地方就是每...
这两天写了个小项目，其中用到了点击一组图片中的一张可以查看它的放大版，用手向左滑动能看到下一张的这组图片中的第二张的放大版。。。依次类推，单击放大版的图片实现关闭效果，对于js能力不太好的我只能找度娘...
图片作为App中重要的一个元素，非常具有表现力，图片既要让用户能看清楚，又能让发布图片的用户能快速的上传。所以开发者要对图片进行裁切和质量压缩。但是裁切尺寸质量压缩比设置成多少却很难控制好，如...
/article?id=7505
做社交类产品明显绕不过微信这座大山，他的体验已经做到相当棒了，作为后来者不说要超过他，至少...
老规矩,先上图,这个效果大家应该都很熟悉想要实现这样的效果,在自定义控件的的时候,要首先分析一下功能要点有下面几个:
获取点击图片所在位置
获取相应bitmap
在对应位置绘制bitmap
重写onT...
    很多时候我们都在刷微博或者微信朋友圈的时候都会看到很多图片，而这些图片的显示跟我们平时很多控件的显示方式都不一样，而且，当我们仔细去观察后就会发现，他加载的图片都是根据图片数量动态加载的...
一百行代码实现微信朋友圈九宫格图片显示
第一次写文章，有不足之处请见谅，谢谢。
看到有个App个人信息界面或是朋友圈界面 往往顶部有一个背景图片，下滑的时候还能随滑动拉伸，于是自己想了想，写了如下几句代码实现：
【这里就直接用代码了，代码中...
他的最新文章
讲师：钟钦成
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)涓婚?鎺ㄨ崘锛毬犅犅犅犅犅犅犅犅犅犅犅