A:
In the project, it is inevitable to encounter functions such as uploading id card and binding bank card through real-name authentication. In practice, to upload pictures, when the page layout, may is not a images, considering the factors such as the layout of the beautiful, according to the position of the picture is small, if you want to see the upload picture is clear, the content is complete, may need to zoom in to achieve, I enclosed below and share with you, Perfect realization of the picture zoom function.
In addition, these blog posts are from my technical summary in daily development. If time permits, I will share iOS and Android versions respectively for technical points, and try to attach demo for everyone’s reference. If you need other technical points, you can leave a message after the article, and I will do my best to help you.
Two: realize the analysis of ideas
-
Add a gesture to UIImageView
-
Encapsulates a FBYImageZoom class that inherits NSObject
-
Write a function to receive incoming and outgoing UIImageView
-
Redraw the Window based on the incoming UIImageView
-
Adds the color and transparency of the enlarged background view
-
Use animation to zoom in on the ImageView
-
Add a tap tap event that restores the ImageView to its original size
-
Delete the background view when you’re done
Three: realize source code analysis
According to the analysis of the implementation ideas, step by step to achieve the coding:
1. Add gestures to UIImageView
self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 150, SCREEN_WIDTH-100, SCREEN_WIDTH-100)]; self.myImageView.image = [UIImage imageNamed:@"bankcard"]; UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)]; [_myImageView addGestureRecognizer:tapGestureRecognizer]; [_myImageView setUserInteractionEnabled:YES]; [self.view addSubview:_myImageView];Copy the code
2. Encapsulate a FBYImageZoom class that inherits NSObject
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface FBYImageZoom : NSObject
@end
Copy the code
3. Write a function to receive incoming and outgoing UIImageView
/** * @param contentImageview */ +(void)ImageZoomWithImageView (UIImageView *)contentImageview;Copy the code
4. Redraw the UIImageView in the Window according to the incoming UIImageView
+(void)ImageZoomWithImageView:(UIImageView *)contentImageview{
UIWindow *window = [UIApplication sharedApplication].keyWindow;
[self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
}
Copy the code
5. Add the color and transparency of the enlarged background view
UIWindow *window = [UIApplication sharedApplication].keyWindow; // UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size. Width, [UIScreen mainScreen].bounds.size.height)]; [backgroundView setBackgroundColor:[UIColor colorWithRed:107/255.0 green:107/255.0 blue:99/255.0 alpha:0.6]];Copy the code
6. Use animation to enlarge the ImageView
ImageView [UIView animateWithDuration:0.4 animations:^{CGFloat y,width,height; y = ([UIScreen mainScreen].bounds.size.height - image.size.height * [UIScreen mainScreen].bounds.size.width / Width = [UIScreen mainScreen].bounds.size. Width; Height = image.size. Height * [UIScreen mainScreen].bounds.size. Width/image.size. Width; [imageView setFrame:CGRectMake(0, y, width, height)]; Display the view [backgroundView setAlpha:1];} completion:^(BOOL finished) {}];Copy the code
7. Add a tap tap event that restores the ImageView to its original size
UITapGestureRecognizer *tapGestureRecognizer = [UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)]; [backgroundView addGestureRecognizer:tapGestureRecognizer]; /** * restore imageView to original size */ +(void)hideImageView:(UITapGestureRecognizer *)tap{UIView *backgroundView = tap.view; UIImageView *imageView = [tap. View viewWithTag:1024]; [UIView animateWithDuration:0.4 animations:^{[imageView setFrame: oldFrame]; [backgroundView setAlpha:0]; } completion:^(BOOL finished) { [backgroundView removeFromSuperview]; }]; }Copy the code
8. Delete the background view when you’re done
BackgroundView removeFromSuperview;Copy the code
Iv. Actual use of the project
1. Introduce the encapsulation class FBYImageZoom
#import "FBYImageZoom.h"
Copy the code
2. Add gestures to UIImageView
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];Copy the code
3. Call the encapsulated class function
-(void)scanBigImageClick:(UITapGestureRecognizer *)tap{NSLog(@" click the image "); UIImageView *clickedImageView = (UIImageView *)tap.view; [FBYImageZoom ImageZoomWithImageView:clickedImageView]; }Copy the code
Ok, go here and click on the image to zoom in full screen and you’re done
4. Long press to save the picture
Another is to achieve long press to save the picture function, this function is very simple
- First add the long press gesture
/ / create long press gesture UILongPressGestureRecognizer * longTap = [[UILongPressGestureRecognizer alloc] initWithTarget: self action:@selector(imglongTapClick:)]; / / add gestures [_myImageView addGestureRecognizer: longTap];Copy the code
- Then long press the gesture to pop up the warning view to confirm
-(void)imglongTapClick:(UILongPressGestureRecognizer*)gesture { if(gesture.state==UIGestureRecognizerStateBegan) { UIAlertController * alertControl = [UIAlertController alertControllerWithTitle: @ "save image" message: nil preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction * cancel = [UIAlertAction actionWithTitle: @ "cancel" style: UIAlertActionStyleCancel handler: ^ (UIAlertAction * _Nonnull action) {NSLog(@" unsave picture ");}]; UIAlertAction * confirm = [UIAlertAction actionWithTitle: @ "confirmed" style: UIAlertActionStyleDestructive Handler :^(UIAlertAction * _Nonnull Action) {NSLog(@" confirm to save image "); // Save the image to the album UIImageWriteToSavedPhotosAlbum(self.myImageView.image,self,@selector(imageSavedToPhotosAlbum:didFinishSavingWithError:co ntextInfo:),nil); }]; [alertControl addAction:cancel]; [alertControl addAction:confirm]; [self presentViewController:alertControl animated:YES completion:nil]; }}Copy the code
- Finally save the picture after the callback
- (void)imageSavedToPhotosAlbum:(UIImage*)image didFinishSavingWithError: (NSError*)error contextInfo:(id)contextInfo { NSString *message; if(! Error) {message =@" save to album successfully "; UIAlertController * alertControl = [UIAlertController alertControllerWithTitle: @ "prompt" message: the message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction * action = [UIAlertAction actionWithTitle: @ "sure" style: UIAlertActionStyleDestructive handler: ^ (UIAlertAction * _Nonnull action) { }]; [alertControl addAction:action]; [self presentViewController:alertControl animated:YES completion:nil]; }else { message = [error description]; UIAlertController * alertControl = [UIAlertController alertControllerWithTitle: @ "prompt" message: the message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction * action = [UIAlertAction actionWithTitle: @ "sure" style: UIAlertActionStyleCancel handler: ^ (UIAlertAction * _Nonnull action) { }]; [alertControl addAction:action]; [self presentViewController:alertControl animated:YES completion:nil]; }}Copy the code
Click here to enlarge the picture and long press to save the picture function is realized
Source code Demo access method
Follow [net development] wechat public account, reply [93] can be received. Net the world method, convenient for you and me to develop, more iOS technology dry goods waiting to receive, all documents will continue to update, welcome to pay attention to grow together!
Five: Project presentation
Hope to help you, if there is a problem can be added QQ technical exchange group: 668562416, if there is anything wrong or insufficient place, but also hope readers give more comments or suggestions
If you need to reprint, please contact me, after authorization can be reprinted, thank you
This post has been synchronized to my blog: FBY Zhan Fei