iOSでは、画像をクリックして拡大したり、画像を長押しして保存する例を実現します。


一:概要
プロジェクトでは必ず出会うことができます。実名認証は身分証をアップロードし、銀行カードを結びつけるなどの機能があります。実際の操作では、画像のアップロードに関連します。ページレイアウトでは、画像は一枚ではないかもしれません。レイアウトの美観などを考慮して、画像を表示する位置が小さくなりました。アップロードされた画像がはっきりしているかどうかを確認したいならば、内容が完全かどうかを確認したいです。画像のズーム機能を完璧に実現しました。
また、これらのブログは私が日常的に開発している技術の総括から来ています。時間が許す限り、技術点についてはそれぞれiOS、Androidの二つのバージョンを共有します。
二:考え方の分析を実現する
  • UImageViewにジェスチャーを追加します。
  • は、NSObjectを継承するFBYImageZoomクラス
  • をカプセル化する。
  • は、アクセスを受信するための関数を書くUImageView
  • は、入ってきたUImageViewに基づいてWindowに
  • を再描画する。
  • 拡大背景ビューの色と透明度を追加します。
  • アニメーションを使って拡大展示されたImageView
  • ImageView元のサイズを復元するtapクリックイベントを追加しました。
  • が完了したら、背景ビューを削除する

  • ソース分析の実現
    実現の考え方に基づいて分析し、一歩ずつ符号化の実現を行う:
    1.UImageViewにジェスチャーを追加する
    
    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];
    
    2.NSObjectを継承するFBYImageZoom類をカプセル化する。
    
    #import <Foundation/Foundation.h>
    #import <UIKit/UIKit.h>
    @interface FBYImageZoom : NSObject
    @end
    
    
    3.アクセスを受信するための関数を書くUImageView
    
    /**
     * @param contentImageview      imageView
     */
    +(void)ImageZoomWithImageView:(UIImageView *)contentImageview;
    
    4.入ってきたUImageViewに基づいてWindowに再描画する
    
    +(void)ImageZoomWithImageView:(UIImageView *)contentImageview{  
      UIWindow *window = [UIApplication sharedApplication].keyWindow;
      [self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
    }
    
    5.拡大後の背景ビューの色と透明度を追加します。
    
    //    
      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]];
    6.動画を使って拡大表示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 / image.size.width) * 0.5;
        //       
        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)];
        //  !        
        [backgroundView setAlpha:1];
      } completion:^(BOOL finished) {
        
      }];
    
    7.ImageView元のサイズを復元するためのtapクリックイベントを追加します。
    
    //             ->              
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
    [backgroundView addGestureRecognizer:tapGestureRecognizer];
    
    /**
     *   imageView    
     */
    +(void)hideImageView:(UITapGestureRecognizer *)tap{
      UIView *backgroundView = tap.view;
      //  imageview
      UIImageView *imageView = [tap.view viewWithTag:1024];
      //  
      [UIView animateWithDuration:0.4 animations:^{
        [imageView setFrame:oldframe];
        [backgroundView setAlpha:0];
      } completion:^(BOOL finished) {
        [backgroundView removeFromSuperview];
      }];
    }
    
    
    8.完了後に背景ビューを削除する
    
    //     ->       
    [backgroundView removeFromSuperview];
    
    四:プロジェクトの実際使用
    1.パッケージ類FBYImageZoomの導入
    
    #import "FBYImageZoom.h"
    2.UImageViewにジェスチャーを追加する
    
    //      
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
    3.パッケージ関数の呼び出し
    
    //        
    -(void)scanBigImageClick:(UITapGestureRecognizer *)tap{
      NSLog(@"    ");
      UIImageView *clickedImageView = (UIImageView *)tap.view;
      [FBYImageZoom ImageZoomWithImageView:clickedImageView];
    }
    はい、ここに行って写真をクリックしてフルスクリーンに拡大したら完成です。
    4.長押保存画像
    また、画像を長押しする機能を実現しています。この機能は簡単です。
    まず長押しジェスチャーを追加します。
    
      //      
      UILongPressGestureRecognizer *longTap = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(imglongTapClick:)];
      //    
      [_myImageView addGestureRecognizer:longTap];
    その後、ジェスチャーを長く押して警告表示をポップアップして確認します。
    
    -(void)imglongTapClick:(UILongPressGestureRecognizer*)gesture
    {  
      if(gesture.state==UIGestureRecognizerStateBegan)    
      {    
        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"    " message:nil preferredStyle:UIAlertControllerStyleAlert];    
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"  " style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
          
          NSLog(@"      ");
        }];
        
        UIAlertAction *confirm = [UIAlertAction actionWithTitle:@"  " style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
          
          NSLog(@"      ");      
          //        
          UIImageWriteToSavedPhotosAlbum(self.myImageView.image,self,@selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:),nil);
          
        }];    
        [alertControl addAction:cancel];
        [alertControl addAction:confirm];    
        [self presentViewController:alertControl animated:YES completion:nil];
        
      }  
    }
    最後に画像を保存した後のコールバック
    
    - (void)imageSavedToPhotosAlbum:(UIImage*)image didFinishSavingWithError: (NSError*)error contextInfo:(id)contextInfo
    
    {
      NSString *message;  
      if(!error) {    
        message =@"       ";    
        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"  " message:message preferredStyle:UIAlertControllerStyleAlert];    
        UIAlertAction *action = [UIAlertAction actionWithTitle:@"  " style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
          
        }];
        [alertControl addAction:action];    
        [self presentViewController:alertControl animated:YES completion:nil];    
      }else
        
      {
        message = [error description];      
        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"  " message:message preferredStyle:UIAlertControllerStyleAlert];    
        UIAlertAction *action = [UIAlertAction actionWithTitle:@"  " style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
          
        }];    
        [alertControl addAction:action];    
        [self presentViewController:alertControl animated:YES completion:nil];    
      }  
    }
    ここで写真をクリックして拡大して保存する機能を実現します。demoソースはすでにgithubに置いてあります。
    五:プロジェクト展示

    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。