최근에 만든 바퀴 BrowsePictureViewController에 대해 이야기

6648 단어

잡담


Browse Picture View Controller는 말 그대로 사진 조회에 관한 View Controller입니다. 이것은 프로젝트 중의 이미지 브라우저입니다. 제가 그를 빼내서 제3자 의존을 만들었습니다. 자당 뇌봉으로 개원 사업에 기여를 했습니다.둘째, 나는 코드 구조가 결벽한 사람이다. 프로젝트를 많이 썼기 때문에 프로젝트 디렉터리나 프로젝트의 코드의 결합성은 일반적으로 볼 수 없기 때문에 재구성하기 시작했다. 그 중에서 이 이미지 브라우저는 내가 재구성한 것이다.이 그림 브라우저에 관해서는 issue나 fork에서 issue를 해결하고pullrequest를 제출하는 것을 환영합니다.
다시 한 번 이 이미지 브라우저의 출처를 말씀드리자면 최근에 하고 있는 프로젝트는'인언'(이미 앱스토어에 출시되었으니 안드로이드도 곧 완성될 것)이라고 합니다. 개발자로서 저는 이 제품의 성질이나 트렌드에 대해 많은 평가를 하지 않습니다. 저는 이 제품이 매우 좋고 더 좋을 것이라고 말할 수 밖에 없습니다.관심 있으신 분들도 다운받아 보셔도 됩니다(버그 같은 일은 있을 수 있습니다. 여러분은 사정을 봐주시고 입으로는 사정을 봐주시고 시간과 조언을 주시면 더 잘할 수 있습니다. 저를 믿든 이 제품팀을 믿든).
만약 이 제품의 다른 상호작용과 UI 기능에 대한 수요가 있다면 저에게 연락을 주십시오. 저는 적당한 기원을 고려할 수 있습니다. 이것은 제가 줄곧 해 온 일입니다.

본제


주요 기능은 다음과 같습니다.

  • 이미지 조회(다중&&단도)
  • 이미지 저장
  • 이미지에 워터마크 추가(옵션)
  • 큰 그림을 조회할 때 팽이 효과(페이스북 페이퍼 사진 조회 효과와 유사)
  • 인터페이스 소개
    BrowsePictureViewController.h + (instancetype)create; 이것은 창설 인터페이스입니다. 이 인터페이스는 BrowsePictureViewController의 대상을 직접 창설할 수 있습니다.
    - (UIImageView *)currentImageView;
    - (UIImageView *)currentOriginImageView;
    - (void)showHideAllViews:(BOOL)show;
    

    이 세 개의 인터페이스는 무시할 수 있으며, 회전 애니메이션에 제공된다.@property (assign, nonatomic) BOOL scaleToMax; 이 속성은 그림을 조회하는 View Controller로 이동할 때 전체 화면scaleToMax == YES을 가득 채울 것인가, 아니면 그림을 완전히 표시할 수 있는 것인가(scaleToMax == NO)를 설정한다. 후자는 위챗 그림을 조회하는 기본 모드이고 전자는 보통 위챗 그림을 두 번 클릭한 상태이다.@property (assign, nonatomic) NSInteger startPage; 이 속성은 그림 브라우저에 들어갈 때의 시작 사진의 아래 첨자를 설정합니다
    상기 두 속성은 모두 create 호출 후 설정해야 하며 기본값이 포함되어 있다. scaleToMax의 기본값은 NO이고 startPage의 기본값은 0이다.
    BrowsePictureViewControllerDelegate
    - (NSInteger)numberOfImagesInBrowsePictureViewController:(BrowsePictureViewController *)browsePitureViewController;
    

    이delegate는 이 그림 브라우저에 표시된 그림 장수를 되돌려줍니다. 선택할 수 있습니다. 이 방법이 실행되지 않으면 기본적으로 1장입니다.
    - (NSString *)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController textAtIndex:(NSInteger)index;
    

    이 에이전트는 워터프린트 문자를 되돌려줍니다.nil이 없으면 워터프린트를 추가하지 않습니다. (워터프린트는 하나의 요구 사항입니다. 이 요구 사항이 없는 사용자는 이delegate를 실현하지 않을 수 있습니다.)
    - (void)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController downLoadImage:(ImageDownLoadFinish)downLoadImage index:(NSInteger)Index;
    

    이 에이전트는 downLoadImage 블록의 대상을 제시했는데, 그 역할은 업무층이 이 index의 그림을 다운로드하고 downLoadImage(image, index) 호출을 통해 이미지로 되돌아갈 수 있도록 하는 것이다.
    나는 이것이 나의 많은 이미지 브라우저와 다른 부분이라고 생각한다. 다른 이미지 브라우저는 보통 너에게 URL을 요구하고 자신의 내부에서 자신이 실현한 HTTP를 통해 이미지를 다운로드하라고 요청하거나 SDWebImage 같은 라이브러리를 통해 이미지를 다운로드하는 논리를 실현한다. 이것은 좋지 않다고 생각한다. 우선 각 앱의 이미지 다운로드를 실현하는 방법은 다르다.이미지 브라우저 내부에서 만약에 이 앱의 다른 방법과 다르면 많은 코드가 중복되고 재미가 없을 것 같다. 그리고 우리가 겪는 곤란한 문제는 OSS 사진으로 저장하면 보통 하나의 URL이 유통기한이 지나기 때문에 URL이 만료될 때 각 App은 반드시 각기 다른 이미지 다운로드 논리를 가진다. 그래서 저는 이미지 다운로드는 업무와 관련된 것이라고 생각한다.외부에서 실현할 수 있지만 내부에서 실현해서는 안 된다. 이렇게 생각하면 옥에 티가 부족한 것은 바로 내가 외부 다운로드를 실현하는 대리 이미지를 사용했기 때문이다. 사실 나는 전체적인 것을 사용해야 한다. 설정하면 더욱 편리한 방식으로 외부 다운로드를 실현해야 한다. 이것은 생각해야 할 문제이고 기회가 있으면 다시 써야 한다.
    - (void)browsePictureViewControllerDidFinishSaving:(BrowsePictureViewController *)browsePictureViewController;
    

    이 방법은 외부 그림 브라우저에 그림을 저장했음을 알립니다
    - (UIImageView *)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController imageViewAtIndex:(NSInteger)index;
    

    이 에이전트는 다음 표index를 통해 UIImageView의 대상을 되돌려줍니다. 이 대상은 현재 탐색하고 있는 그림의 외부에 있는 원시 그림입니다.
    BrowsePictureCustomConfig
    @interface BrowsePictureCustomConfig : NSObject
    @property (strong, nonatomic) UIImage *waterMarkImge;
    @property (strong, nonatomic) NSString *saveString;
    + (instancetype)sharedConfig;
    

    이 클래스는 주로 하나의 예를 만들어 물자국이 찍힌 그림을 설정하고 단추를 저장하는 문자(주로 국제화 문자열에 사용)
    UINavigationController (BrowsePictureViewController)
    @interface UINavigationController (BrowsePictureViewController)
    
    - (void)pushBrowsePictureViewController:(BrowsePictureViewController *)browsePictureViewController;
    
    @end
    

    이 ViewController에 PushViewController를 제공하는 방법

    몇 가지 기술 포인트


    애니메이션 전환 정보
    애니메이션을 전환할 때 저는 주로 팝을 사용했습니다. 어쨌든 최근에 이 애니메이션 엔진 라이브러리에 빠진 것 같습니다. 경고에 의하면 이 애니메이션 엔진이 UIKit의 구성 요소와 어울리면 문제가 있을 수 있습니다. AsyncDisplayKit와 함께 복용해야 효과가 더 좋을 수도 있습니다. 팝의 사용에 대해 나중에 소개를 한 편 쓸 수도 있지만 이 글들은 정말 거리가 넓어서 군말하지 않으려고 합니다.
    아마도 대부분의 흉제들이 팝을 사용할 때 자신이 가지고 있는 속성 애니메이션을 다시 사용할 것이다. 그러나 나는 내가 속성을 써서 애니메이션을 하면 더욱 멋있을 것이라고 생각한다. 예를 들어 나의 오프닝 애니메이션에 transitionProgress의 속성을 설정한 다음에 이 속성의 set 방법에서 이 속성을 다시 써서 인터페이스 변환 코드를 만든다. 내가 이 속성의 get&set를 속성의 애니메이션으로 만들 때popanimation을 사용하여 진도를 제어하면 조합 애니메이션을 쉽게 완성할 수 있습니다.구체적인 코드는 제가 붙여 넣을게요.
    - (void)setTransitionProgress:(CGFloat)transitionProgress {
      _transitionProgress = transitionProgress;
      animationView.frame = [ImageViewApearTransition rectWithProgress:transitionProgress startRect:[self fromFrame] toRect:[self toFrame]];
      animationView.layer.cornerRadius = [ImageViewApearTransition valueWithProgress:transitionProgress startValue:originImageView.layer.cornerRadius toValue:0];
    }
    
    - (POPAnimatableProperty *)springAnimationProperty {
      POPAnimatableProperty *springAnimationProperty = [POPAnimatableProperty propertyWithName:kPOPIMAGEVIEW_APEAR_PROPERTY initializer:^(POPMutableAnimatableProperty *prop) {
      prop.readBlock = ^(id obj, CGFloat values[]) {
      values[0] = [obj transitionProgress];
    };
      prop.writeBlock = ^(id obj, const CGFloat values[]) {
      [obj setTransitionProgress:values[0]];
    };
      prop.threshold = 0.01;
    }];
      return springAnimationProperty;
    }
    

    그림 크기 조절
    여기에 scrollView를 사용하여 행의 그림을 축소합니다. 여기서 주의해야 할 것은 제가 xib로 레이아웃을 했습니다. 여기는 autolayout을 사용할 수 없습니다. 원시적인 autoresize를 사용해야 합니다. 그리고 여러 그림이 UICollectionView를 사용하여 이루어졌기 때문에 애비구덩이의 중용은 당신을 고통스럽게 합니다. Cell의 그림을 업데이트할 때마다 ScollView의zoom값을 다시 설정해야 한다는 것을 꼭 기억하세요.이거 진짜 중요해!
    워터프린트 & & 팽이
    이것은 주로 코드를 보면 된다. 팽이가 상대적으로 부드럽게 보이려면 그림의 위치를 업데이트할 때마다 애니메이션 방식으로 호출해야 한다. 직접 수정하는 것이 아니라
    dispatch_async(dispatch_get_main_queue(), ^{
      [UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveEaseOut animations:^{
      [_scrollView setContentOffset:CGPointMake(_previousValue, 0) animated:NO];
      } completion:nil];
    });
    

    좋은 웹페이지 즐겨찾기