Scaling of WeChat moments and Wechat moments

Zoom in and out of the circle of friends

Recently, companies have to make an effect with a circle of friends, but they still need to be vivid. The most troublesome part is the image scaling. It turns out that the image clicking and enlarging in the circle of friends is gradually increasing, but the clicking is flashing again, with no gradient background effect, so I fixed it and now I will share it with you. (Just a demo) the specific application needs to be improved according to your own needs.

First, paste the code.

Since we want to imitate the effect of others, we need to observe first.

1. Open the circle of friends and click the image. The gradient background is scaled at the same time.

2. Click the enlarged image again, and the image will be scaled down and returned to the position in the list. This will make the image appear in the list visually and then return to the list.

After reading the above two points, some friends will wonder if this is an image? I will not answer the question, but I will continue to look at it.

3. turn Off wifi and click the image again (this image has not been clicked and is displayed in the list). You will find that they are not an image (the problem does not exist ).

4. click the image list (pull up to load more) (when wifi is disabled). You will find that the image in the list is a gray image waiting to be loaded. At this time, click this gray image, it does not indicate that the development process is: you can click it only after the image is loaded.

5. open wifi and click an image to enlarge it (for example, an image with a rectangle of 320*160). If the image is larger than 320, how to calculate the magnification is actually very simple. You can check the circle of friends to see if I guess there is any error:

Guess: when the screen is vertical, You can see which side of the image reaches the edge at the end? Or High? In the above example, if 320 has reached the edge, the height is the last to reach the edge, right. Yes, that 160 turns to 480 height (3.5 inch screen). Of course, this scaling is year-on-year. 480/3 of the Image Height is a multiple of scaling.

6. Now we can find a resize image similar to 320*160. Zoom in with two fingers and you will find that the image will not be enlarged when it reaches the speculation I uploaded.

7. After you click an image, you can move multiple images to the left and right corner. Clicking zoom in will return to your position.

8. In addition, small images have been reduced, and this scale-down is regular: imgView. contentMode = UIViewContentModeScaleAspectFill; and the second five images are imperceptible !, And each image can be scaled.

9. There is also the long press function. If the above eight points are implemented, let's say, right.

Let me talk about how this demo works. First watch the film.

Click demo to download

(Blue, which can be deleted but not deleted, is the implementation process of this demo)

1. First define a custom ImgScrollView. h that inherits UIScrollView to scale a single image, and then place the control in UIScrollView.

2. When an image is clicked, the gradient effect is actually the control of the transparent background layer. If this is not the case, convert the image position in the Cell to the position relative to the current screen.

3. initialize a UIScrollview to store ImgScrollView. The background is transparent.

4. Calculate and click the image position to set the ContentOffset. x position of the container ScrollView.

5. Scale the image to determine which side of the image is first to the edge. Once one side reaches the edge, the scaling is stopped.

6. Add a click event to the image, while imgView. contentMode = UIViewContentModeScaleAspectFill.

TapImageView. h has an image of a click event

#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

Images that can be scaled by ImgScrollView. h

#import <UIKit/UIKit.h>@protocol ImgScrollViewDelegate <NSObject>- (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 () <UIScrollViewDelegate> {UIImageView * imgView; // record your location CGRect scaleOriginRect; // The image size 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; // determine the first scaled value float scaleX = self. frame. size. width/imgSize. width; float scaleY = self. frame. size. height/imgSize. height; // small multiples, first to the edge if (scaleX> scaleY) {// Y direction to the edge 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 first to the edge 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-touch-(void) touchesEnded :( NSSet *) touches withEvent :( UIEvent *) event {if ([self. I _delegate respondsToSelector: @ selector (tapImageViewTappedWithObject :)]) {[self. I _delegate tapImageViewTappedWithObject: self] ;}}

Not all code here. The demo has been uploaded.

Click demo to download

Images Uploaded By friends will appear in the memory of my mobile phone. Click zoom in to see the original images uploaded by others.

Reload it.

How can I turn off 'show city address' when I send a picture to my circle of friends?

When sending an image, there is a switch that shows your current position below. Click Cancel.