【IOS】图片浏览效果(双击图片,弹出层)

原创 2012年03月21日 17:36:29
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface EnlargeImageDoubleTap : UIImageView
{
    UIView *parentview;         //父窗口,即用将UIImageEx所加到的UIView
    UIImageView *imageBackground;  //放大图片后的背景
    UIView* imageBackView;         //单独查看时的背景
    
    UIView* maskView;              //遮罩层
    CGRect frameRect;
}

@property (nonatomic,retain) UIView *parentview;
@property (nonatomic,retain) UIImageView *imageBackground;
@property (nonatomic,retain) UIView* imageBackView;
@property (nonatomic,retain) UIView* maskView;



- (void)handleDoubleTap:(UITapGestureRecognizer *)recognizer;

//必须设置的
- (void)setDoubleTap:(UIView*)imageView;
@end

#import "EnlargeImageDoubleTap.h"

@implementation EnlargeImageDoubleTap

@synthesize parentview;
@synthesize imageBackground,imageBackView,maskView;
@interface EnlargeImageDoubleTap (private)
- (void)fadeIn;
- (void)fadeOut;
- (void)closeImage:(id)sender;
@end

/*
 * setDoubleTap 初始化图片
 * @parent UIView 父窗口
 */
- (void)setDoubleTap:(UIView*) parent
{
    parentview=parent;
    parentview.userInteractionEnabled=YES;
    self.userInteractionEnabled=YES;
    
    UITapGestureRecognizer *doubleTapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleDoubleTap:)];
    doubleTapRecognize.numberOfTapsRequired = 2;
    [doubleTapRecognize setEnabled :YES];
    [doubleTapRecognize delaysTouchesBegan];
    [doubleTapRecognize cancelsTouchesInView];
    
    [self addGestureRecognizer:doubleTapRecognize];
    
}


#pragma UIGestureRecognizer Handles
/*
 * handleDoubleTap 双击图片弹出单独浏览图片层
 * recognizer 双击手势
 */
-(void) handleDoubleTap:(UITapGestureRecognizer *)recognizer
{   
                if (imageBackView==nil) {
                    if( [[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeLeft||[[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeRight)
                    {
                        
                        frameRect = CGRectMake(0, 0, parentview.frame.size.height+20, parentview.frame.size.width);
                    }else
                    {   
                        frameRect = CGRectMake(0, 0, parentview.frame.size.width, parentview.frame.size.height+20);
                    }
                    
                   imageBackView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.image.size.width+20, self.image.size.height+60)];
                    imageBackView.backgroundColor = [UIColor grayColor];
                    imageBackView.layer.cornerRadius = 10.0; //根据需要调整
                    
                    [[imageBackView layer] setShadowOffset:CGSizeMake(10, 10)];
                    [[imageBackView layer] setShadowRadius:5];
                    [[imageBackView layer] setShadowOpacity:0.7];
                    [[imageBackView layer] setShadowColor:[UIColor blackColor].CGColor];
                    
                    maskView = [[UIView alloc]initWithFrame:frameRect];
                    maskView.backgroundColor = [UIColor grayColor];
                    maskView.alpha=0.7;
                    
                    UIImage *imagepic = self.image;
                    UIImageView *view = [[UIImageView alloc] initWithFrame:CGRectMake(10, 30, self.image.size.width, self.image.size.height)];
                    [view setImage:imagepic];
                    UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
                    
                    UIImage *closeimg = [UIImage imageNamed:@"closeImage.png"];
                    btn.frame = CGRectMake(self.image.size.width-30,0, closeimg.size.width,closeimg.size.height);
                    [btn setBackgroundImage:closeimg forState:UIControlStateNormal];
                    [btn addTarget:self action:@selector(closeImage:) forControlEvents:UIControlEventTouchUpInside];
                    
                    [imageBackView addSubview:view];
                    [parentview addSubview:maskView];
                    imageBackView.center= CGPointMake((frameRect.origin.x+frameRect.size.width)/2
                                                      ,(frameRect.origin.y+frameRect.size.height)/2);
                    [parentview addSubview:imageBackView];
                    [imageBackView addSubview:btn];
                    [parentview bringSubviewToFront:imageBackView];

                    [self fadeIn];
                   
                    
                }
}

/*
 * fadeIn 图片渐入动画
 */
-(void)fadeIn
{
    imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);
    imageBackView.alpha = 0;
    [UIView animateWithDuration:.55 animations:^{
        imageBackView.alpha = 1;
        imageBackView.transform = CGAffineTransformMakeScale(1, 1);
    }];
    
}

/*
 * fadeOut 图片逐渐消失动画
 */
- (void)fadeOut
{
    [UIView animateWithDuration:.35 animations:^{
        imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);
        imageBackView.alpha = 0.0;
    } completion:^(BOOL finished) {
        if (finished) {
            [imageBackView removeFromSuperview];
        }
    }];
}

/*
 * closeImage 关闭弹出图片层
 */
-(void)closeImage:(id)sender
{
    [self fadeOut];
    imageBackView=nil;
    [maskView removeFromSuperview];
    maskView=nil;
}

@end
运行后的效果图:

例子的下载连接:http://download.csdn.net/detail/toss156/4160496

相关文章推荐

Android自定义popupwindow实现ios中UC浏览器中长按图片弹出的PopupWindow效果

Android应用仿ISO中UC浏览器中长安图片弹出的PopupWindow的效果 MainActivity: public class MainActivity extends AppCompa...
  • Wtoria
  • Wtoria
  • 2016年06月01日 19:05
  • 965

android图片缩放双击旋转效果

  • 2014年03月27日 10:50
  • 1.52MB
  • 下载

Android中用手势的双击事件实现图片单击放大效果

Android中GestureDetector的用法及用手势的双击事件实现图片单击放大效果

IOS自定义图片浏览器,支持浏览多张图片,点击,双击,两手指缩放操作,并显示加载进度条

图片浏览器Controller的主要思路是:新建一个 JZAlbumViewController,在这个controller里主要显示一个UIScrollView,这个UIScrollView用来显示...

ios 图片拖拽,捏,双击放大缩小,以及保存到相册

图片拖拽,放大缩小原来是可以不用自己写算法的,直接用UIscrollView即可实现。 保存相册就比较简单了。 比较麻烦的地方: 捏,双击等动作形成的放大、缩小效果需要准确定位。 ...

ios 图片拖拽,捏,双击放大缩小,以及保存到相册

图片拖拽,放大缩小原来是可以不用自己写算法的,直接用UIscrollView即可实现。 保存相册就比较简单了。 比较麻烦的地方: 捏,双击等动作形成的放大、缩小效果需要准确定位。 ...

iOS 之图片拖拽、捏合、双击缩放以及保存到相册

1.图片拖拽,使用UIScrollView就可以实现,上面添加一个UIImageView 2.捏合和双击缩放通过手势实现,难点在于缩放效果的准确定位 3.保存问题比较简单 下面直接上代码: ....

iOS查看多张图片,并且添加双击手势,转场动画

负责跳转deviewController // // ViewController.m // PushImageTest // // Created by Eva on 17/4/10. // ...

imgBox图片弹出效果

  • 2016年08月09日 15:11
  • 663KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【IOS】图片浏览效果(双击图片,弹出层)
举报原因:
原因补充:

(最多只允许输入30个字)