iOS 實(shí)現(xiàn)點(diǎn)擊微信頭像效果

公司產(chǎn)品需要實(shí)現(xiàn)點(diǎn)擊個(gè)人主頁頭像可以放大頭像贵少、縮放頭像呵俏、保存頭像效果(和點(diǎn)擊微信個(gè)人頭像類似),故找個(gè)時(shí)間實(shí)現(xiàn)一下春瞬,記錄下來柴信,供自己查看,也給大家做個(gè)參考宽气。

實(shí)現(xiàn)效果(GIF):

2017-03-08 09_42_20.gif

實(shí)現(xiàn)思路:

直接自定義 UIView(CYPhotoPreviewer)随常,為了實(shí)現(xiàn)雙擊縮放,可以實(shí)現(xiàn) UIScrollViewDelegate 對(duì)應(yīng)的方法萄涯。如果需要模糊背景绪氛,可以在自定義的 UIView 中先添加模糊背景,再添加 UIScrollView涝影,繼而在 UIScrollView 中添加圖片容器枣察,這個(gè)容器就是要顯示的圖片的 superView,代碼一目了然:

- (void)setup {
    
    self.frame = [UIScreen mainScreen].bounds;
    self.backgroundColor = [UIColor clearColor];
  
   UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap:)];
    [self addGestureRecognizer:singleTap];
    
    UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTap:)];
    doubleTap.numberOfTapsRequired = 2;
    [singleTap requireGestureRecognizerToFail:doubleTap];
    [self addGestureRecognizer:doubleTap];
    
    UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)];
    [self addGestureRecognizer:longPress];
    
    // 設(shè)置模糊背景
    self.blurBackground = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
    self.blurBackground.frame = self.frame;
    [self addSubview:self.blurBackground];
    
    // 設(shè)置 UIScrollView 相關(guān)屬性
    self.scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.scrollView.delegate = self;
    self.scrollView.bouncesZoom = YES;
    self.scrollView.maximumZoomScale = 3.0;
    self.scrollView.multipleTouchEnabled = YES;
    self.scrollView.alwaysBounceVertical = NO;
    self.scrollView.showsVerticalScrollIndicator = NO;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:self.scrollView];
    
    // containerView
    self.containerView = [[UIView alloc] init];
    [self.scrollView addSubview:self.containerView];
    
    // imageView
    self.imageView = [[UIImageView alloc] init];
    self.imageView.clipsToBounds = YES;
    self.imageView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.5];
    [self.containerView addSubview:self.imageView];
}

可以看到燃逻,我們給設(shè)置了模糊背景序目,給這個(gè) CYPhotoPreviewer 添加了單擊手勢(shì)(關(guān)閉 PhotoPreviewer)、雙擊手勢(shì)(縮放圖片)伯襟、長(zhǎng)按手勢(shì)(使用 UIAlertController 菜單猿涨,比如保存圖片等)。

好姆怪,確定了這個(gè) CYPhotoPreviewer 中的顯示內(nèi)容叛赚,那么我們?cè)撊绾物@示這個(gè) CYPhotoPreviewer 呢澡绩?

  • 直接將這個(gè) CYPhotoPreviewer 添加到 keyWindow 上
  • 將這個(gè) CYPhotoPreviewer 添加到控制器的 self.view 上

這兩種方式的實(shí)現(xiàn)都差不多娘香,不過如果使用第一種方式的話斜姥,會(huì)導(dǎo)致將 CYPhotoPreviewer 添加到 keyWindow 上之后梆砸,再長(zhǎng)按繼續(xù)將 UIAlertController 顯示就比較麻煩了氓轰,因此,這里打算采用將 CYPhotoPreviewer 添加到控制器的 self.view 上啡氢,繼而就可以很方便的顯示 UIAlertController 了:

- (void)previewFromImageView:(UIImageView *)fromImageView inContainer:(UIView *)container {
    _fromImageView = fromImageView;
    fromImageView.hidden = YES;
    [container addSubview:self]; // 將 CYPhotoPreviewer 添加到 container 上

    self.containerView.origin = CGPointZero;
    self.containerView.width = self.width; // containerView 的寬度是屏幕的寬度
    
    UIImage *image = fromImageView.image;
    
    // 計(jì)算 containerView 的高度
    if (image.size.height / image.size.height > self.height / self.width) {
        self.containerView.height = floor(image.size.height / (image.size.width / self.width));
    } else {
        CGFloat height = image.size.height / image.size.width * self.width;
        if (height < 1 || isnan(height)) height = self.height;
        height = floor(height);
        self.containerView.height = height;
        self.containerView.centerY = self.height / 2;
    }
    
    if (self.containerView.height > self.height && self.containerView.height - self.height <= 1) {
        self.containerView.height = self.height;
    }
    
    self.scrollView.contentSize = CGSizeMake(self.width, MAX(self.containerView.height, self.height));
    [self.scrollView scrollRectToVisible:self.bounds animated:NO];
    
    if (self.containerView.height <= self.height) {
        self.scrollView.alwaysBounceVertical = NO;
    } else {
        self.scrollView.alwaysBounceVertical = YES;
    }
    
    CGRect fromRect = [fromImageView convertRect:fromImageView.bounds toView:self.containerView];
    
    self.imageView.frame = fromRect;
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    self.imageView.image = image;
    
    [UIView animateWithDuration:0.18 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseInOut animations:^{
        self.imageView.frame = self.containerView.bounds;
        self.imageView.transform = CGAffineTransformMakeScale(1.01, 1.01);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.18 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseInOut animations:^{
            self.imageView.transform = CGAffineTransformMakeScale(1.00, 1.00);
        } completion:nil];
    }];
}

可以看到孩等,我們將外面的圖片 fromImageView 傳遞進(jìn)來斥赋,是為了顯示更好的動(dòng)畫效果璃哟;將控制器的 container(self.view)傳遞進(jìn)來唠叛,是為了將 CYPhotoPreviewer 添加到 container 的細(xì)節(jié)不需要在調(diào)用處處理,即初始化 CYPhotoPreviewer 之后沮稚,CYPhotoPreviewer 就直接被 container 添加為 subview 了。動(dòng)畫很簡(jiǎn)單不再細(xì)說册舞。

顯示的效果已經(jīng)做好蕴掏,單擊關(guān)閉 CYPhotoPreviewer 也比較好實(shí)現(xiàn),只需要從父類移除 CYPhotoPreviewer 即可:

- (void)dismiss {
    [UIView animateWithDuration:0.18 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        CGRect fromRect = [self.fromImageView convertRect:self.fromImageView.bounds toView:self.containerView];
        self.imageView.contentMode = self.fromImageView.contentMode;
        self.imageView.frame = fromRect;
        self.blurBackground.alpha = 0.01;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.10 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.fromImageView.hidden = NO;
            self.alpha = 0;
        } completion:^(BOOL finished) {
            [self removeFromSuperview];
        }];
    }];
}

好了调鲸,顯示和關(guān)閉 CYPhotoPreviewer 都實(shí)現(xiàn)了盛杰,如果需要雙擊縮放圖片效果,就得實(shí)現(xiàn) UIScrollViewDelegate 的兩個(gè)方法以及 CYPhotoPreviewer 的雙擊手勢(shì):

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return self.containerView;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    UIView *subView = self.containerView;
    
    CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
    (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
    
    CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
    (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
    
    subView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                 scrollView.contentSize.height * 0.5 + offsetY);
}

- (void)doubleTap:(UITapGestureRecognizer *)recognizer {
    if (self.scrollView.zoomScale > 1.0) {
        [self.scrollView setZoomScale:1.0 animated:YES];
    } else {
        CGPoint touchPoint = [recognizer locationInView:self.imageView];
        CGFloat newZoomScale = self.scrollView.maximumZoomScale;
        CGFloat xSize = self.width / newZoomScale;
        CGFloat ySize = self.height / newZoomScale;
        [self.scrollView zoomToRect:CGRectMake(touchPoint.x - xSize / 2, touchPoint.y - ySize / 2, xSize, ySize) animated:YES];
    }
}

最后一個(gè)就是長(zhǎng)按彈出菜單(UIAlertController)了:

- (void)longPress:(UILongPressGestureRecognizer *)recognizer {
    
    // 為了避免彈警告:Warning: Attempt to present <UIAlertController: 0x7fcb1e619e80>  on <ViewController: 0x7fcb1e60f9f0> which is already presenting <UIAlertController: 0x7fcb1e50d2e0>藐石,最好加入狀態(tài)判斷
    if (recognizer.state == UIGestureRecognizerStateBegan) {
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"QuoraDots" message:nil preferredStyle:UIAlertControllerStyleActionSheet];
        
        [alertController addAction:[UIAlertAction actionWithTitle:@"保存" style:UIAlertActionStyleDefault handler:nil]];
        [alertController addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
        
        UIViewController *vc = self.viewController;
        [vc presentViewController:alertController animated:YES completion:nil];
    }
}

注意一點(diǎn)即供,longPress: 這個(gè)方法會(huì)調(diào)用很頻繁,因此于微,為了避免 Attempt to present xxx on xxx which is already presenting xxx 這個(gè)警告逗嫡,我們需要判斷手勢(shì)的狀態(tài)。

后話:

這個(gè)只是顯示單張圖片的大圖株依,如果需要顯示多張圖片類似微信微博的九宮格圖片的大圖顯示驱证,則需要將這個(gè) CYPhotoPreviewer 搞成 UICollectionView 的 item 即可,大家可以嘗試嘗試恋腕。最后抹锄,如果需要或者 CYPhotoPreviewer 源碼,可以前往 GitHub 下載查看:https://github.com/angelen10/PhotoPreviewer

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荠藤,一起剝皮案震驚了整個(gè)濱河市伙单,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哈肖,老刑警劉巖吻育,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異牡彻,居然都是意外死亡扫沼,警方通過查閱死者的電腦和手機(jī)出爹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缎除,“玉大人严就,你說我怎么就攤上這事∑鞴蓿” “怎么了梢为?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)轰坊。 經(jīng)常有香客問我铸董,道長(zhǎng),這世上最難降的妖魔是什么肴沫? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任粟害,我火速辦了婚禮,結(jié)果婚禮上颤芬,老公的妹妹穿的比我還像新娘悲幅。我一直安慰自己,他們只是感情好站蝠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布汰具。 她就那樣靜靜地躺著,像睡著了一般菱魔。 火紅的嫁衣襯著肌膚如雪留荔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天澜倦,我揣著相機(jī)與錄音聚蝶,去河邊找鬼。 笑死藻治,一個(gè)胖子當(dāng)著我的面吹牛既荚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播栋艳,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼恰聘,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了吸占?” 一聲冷哼從身側(cè)響起晴叨,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎矾屯,沒想到半個(gè)月后兼蕊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡件蚕,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年孙技,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了产禾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡牵啦,死狀恐怖亚情,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情哈雏,我是刑警寧澤楞件,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站裳瘪,受9級(jí)特大地震影響土浸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜彭羹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一黄伊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧派殷,春花似錦毅舆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岂津。三九已至虱黄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吮成,已是汗流浹背橱乱。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留粱甫,地道東北人泳叠。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像茶宵,于是被迫代替她去往敵國和親危纫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容