效果如下:
圖片瀏覽器調(diào)用代碼:
[FullScreenShowImageView showFromeView:imageView WithImageArray:images CurrentIndex:index];
一 圖片瀏覽器實(shí)現(xiàn)核心思想:
1. 圖片縮放
將圖片添加到ScrollerView中, 再通過(guò)實(shí)現(xiàn)ScrollerView的代理方法及添加雙擊手勢(shì).實(shí)現(xiàn)圖片縮放功能,代碼如下
- (void)scaleAction:(UITapGestureRecognizer *)tapGestureRecognizer{
UIScrollView *gestureView = (UIScrollView *)tapGestureRecognizer.view;
if (gestureView.zoomScale > 1) {
[gestureView setZoomScale:1 animated:YES];
}else{
[gestureView setZoomScale:2 animated:YES];
}
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
if (scrollView != _backScrollView) {
return scrollView.subviews.firstObject;
}
return nil;
}
2. 圖片下拉縮小逐漸透明
(1) 給圖片添加平移手勢(shì)
UIPanGestureRecognizer *panGestureRecognizer = [UIPanGestureRecognizer.alloc initWithTarget:self action:@selector(panAction:)];
panGestureRecognizer.delegate = self;
[imageView addGestureRecognizer:panGestureRecognizer];
(2)為了防止圖片平移手勢(shì)與scrollView左右滑動(dòng)沖突,實(shí)現(xiàn)平移手勢(shì)的代理方法
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(nonnull UIGestureRecognizer *)otherGestureRecognizer{
//返回 YES所有手勢(shì)將會(huì)觸發(fā)
return YES;
}
(3)通過(guò)判斷平移坐標(biāo),在平移事件中處理平移手勢(shì)觸發(fā)效果
- (void)panAction:(UIPanGestureRecognizer *)panGestureRecognizer{
if (!_isPan) return; //用于判斷當(dāng)前是否處于可以觸發(fā)平移的狀態(tài)(如:圖片正處于放大狀態(tài)則不允許觸發(fā)平移事件)
UIView *panView = panGestureRecognizer.view;
CGPoint panPoint = [panGestureRecognizer translationInView:panView.superview];
if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
//平移手勢(shì)狀態(tài)結(jié)束后 通過(guò)判斷縱向平移距離決定讓瀏覽器消失還是讓圖片回彈到原來(lái)狀態(tài)
__weak typeof(self)weakSelf = self;
if (panPoint.y > 150) {
[self dissmissAction];
}else{
[UIView animateWithDuration:0.3 animations:^{
panView.width = ScreenWidth;
panView.height = ScreenHeight;
panView.center = self.center;
weakSelf.backgroundColor = RGBA(0, 0, 0, 1);
} completion:^(BOOL finished) {
weakSelf.backScrollView.scrollEnabled = YES;
weakSelf.isVPan = NO;
}];
}
}else{
if (panGestureRecognizer.numberOfTouches !=1) return;// (防止縮放時(shí)的兩根手指與平移時(shí)的一根手指發(fā)生沖突)
if (!_isVPan) { //用于判斷 只有平移的縱向坐標(biāo)改變時(shí)才能觸發(fā)第一次平移 否則將會(huì)與左右滑動(dòng)同時(shí)觸發(fā)
if (panPoint.y > 0) { //向下平移才能觸發(fā)第一次平移
self.backScrollView.scrollEnabled = NO; //觸發(fā)平移后 不能左右滑動(dòng)切換圖片
_isVPan = YES;
}
}else{
if (panPoint.y > 0) {
//通過(guò)縱向平移距離縮放圖片寬高
panView.width = ScreenWidth - panPoint.y*0.5;
panView.height = panView.width*(ScreenHeight/ScreenWidth);
}else{
panView.width = ScreenWidth;
panView.height = ScreenHeight;
}
//平移同時(shí)改變圖片位置
panView.center = CGPointMake(self.center.x+panPoint.x, self.center.y+panPoint.y);
////通過(guò)縱向平移距離改變背景透明度
self.backgroundColor = RGBA(0, 0, 0, 1-panPoint.y/ScreenHeight);
}
}
}
3 瀏覽器彈出動(dòng)畫(huà)
[view.superview convertRect:view.frame toView:self]
//將view.superview上的view.frame轉(zhuǎn)化為self上的frame
通過(guò)這句代碼可以獲取其他父視圖的子視圖在當(dāng)前父視圖上的坐標(biāo)
4 結(jié)構(gòu)
外1層:View.
外2層:橫向ScrollView.
外3層:用于縮放圖片的ScrollView,每個(gè)里面放一張圖片,有多少個(gè)圖片就有多少個(gè)ScrollView容器
最里層:圖片imageVIew
