今天给大家带来一个简单的全屏浏览实例.相信对大家会有些帮助.先看看效果图吧.
首先,创建一个userDetailView.xib文件.放置一些控件,如图:
这个没什么,就是一个view.用于放在userDetailcontroller里面.
UserDetailController.m
#import "UserDetailController.h"
#import "userDetailView.h"
#import "PicScrollView.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface UserDetailController ()<removeImgDelegate>
@property (nonatomic, strong)userDetailView *userDetailView;
@property (nonatomic, assign)CGRect transformedFrame;
@property (nonatomic, strong)UIImageView *lookImg;
@property (nonatomic, strong)PicScrollView *picScroll;
@property (nonatomic, strong)NSArray *ImgList;
@end
@implementation UserDetailController
- (void)viewDidLoad {
_userDetailView = [[NSBundle mainBundle]loadNibNamed:@"userDetailView" owner:self options:nil].lastObject;
_userDetailView.frame = CGRectMake(0, 0, _contentScroll.frame.size.width, _contentScroll.frame.size.height);
[_contentScroll addSubview:_userDetailView];
self.contentScroll.contentSize = CGSizeMake(0, 600);
[self getData];
}
-(void)getData
{
NSArray *titleArr = [NSArray arrayWithObjects:@"篮球",@"足球",@"排球", nil];
_ImgList = [NSArray arrayWithObjects:@"h1.jpg",@"h2.jpg",@"h3.jpg",@"h4.jpg", nil];
for (NSInteger i = 0; i < _ImgList.count; i ++) {
UIImageView *image = (UIImageView *)[_userDetailView viewWithTag:900 + i];
image.image = [UIImage imageNamed:_ImgList[i]];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(touchImage:)];
image.userInteractionEnabled = YES;
[image addGestureRecognizer:tap];
}
static NSInteger contentX = 130;
for (NSInteger num = 0; num < titleArr.count; num++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(contentX, 12, [self stringWidth:titleArr[num]], 30);
[button setTitle:titleArr[num] forState:UIControlStateNormal];
button.layer.masksToBounds = YES;
button.layer.cornerRadius = 15 ;
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
button.backgroundColor = [UIColor colorWithRed:0 green:0.68 blue:0.94 alpha:1];
contentX += [self stringWidth:titleArr[num]] + 5;
[_userDetailView.userInterstView addSubview:button];
}
}
-(void)touchImage:(UITapGestureRecognizer *)tap
{
UIImageView *tapimageView = (UIImageView *)tap.view;
_transformedFrame = [tapimageView.superview convertRect:tapimageView.frame toView:[UIApplication sharedApplication].keyWindow];
_lookImg = [[UIImageView alloc]initWithFrame:_transformedFrame];
_lookImg.image = tapimageView.image;
[[UIApplication sharedApplication].keyWindow addSubview:_lookImg];
[UIView animateWithDuration:.5 animations:^{
_lookImg.center = [UIApplication sharedApplication].keyWindow.center;
CGPoint point = [UIApplication sharedApplication].keyWindow.center;
_lookImg.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
} completion:^(BOOL finished) {
_picScroll = [[PicScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
_picScroll.delegate = self;
[_picScroll scrollViewWith:tapimageView.tag - 900 Pictol:_ImgList.count picArr:_ImgList];
[[UIApplication sharedApplication].keyWindow addSubview:_picScroll];
}];
UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImage:)];
_lookImg.userInteractionEnabled = YES;
[_lookImg addGestureRecognizer:tap1];
}
-(void)removeImageDelegate
{
NSInteger i = _picScroll.scrollView.contentOffset.x / WIDTH;
UIImageView *imageView = [self.userDetailView viewWithTag:900 +i];
_transformedFrame = [imageView.superview convertRect:imageView.frame toView:[UIApplication sharedApplication].keyWindow];
_lookImg.image = [UIImage imageNamed:_ImgList[i]];
[UIView animateWithDuration:1 animations:^{
_lookImg.frame = _transformedFrame;
} completion:^(BOOL finished) {
[_lookImg removeFromSuperview];
_lookImg = nil;
}];
}
-(void)tapImage:(UITapGestureRecognizer *)tap
{
}
-(NSInteger)stringWidth:(NSString *)string
{
return string.length * 24;
}
这里的重点是在这里
UIImageView *tapimageView = (UIImageView *)tap.view;
_transformedFrame = [tapimageView.superview convertRect:tapimageView.frame toView:[UIApplication sharedApplication].keyWindow];
_lookImg = [[UIImageView alloc]initWithFrame:_transformedFrame];
_lookImg.image = tapimageView.image;
[[UIApplication sharedApplication].keyWindow addSubview:_lookImg];
[UIView animateWithDuration:.5 animations:^{
_lookImg.center = [UIApplication sharedApplication].keyWindow.center;
CGPoint point = [UIApplication sharedApplication].keyWindow.center;
_lookImg.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
} completion:^(BOOL finished) {
_picScroll = [[PicScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
_picScroll.delegate = self;
[_picScroll scrollViewWith:tapimageView.tag - 900 Pictol:_ImgList.count picArr:_ImgList];
[[UIApplication sharedApplication].keyWindow addSubview:_picScroll];
}];
UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImage:)];
_lookImg.userInteractionEnabled = YES;
[_lookImg addGestureRecognizer:tap1];
我的思路是先获取到点击的那个imageView,获取到它相对于window的frame,然后在这个frame上新建一个imageView,完全与我们点击的imageView重合,但是新的imageView是放在window上的.然后加一个动画慢慢改变它的frame,动画完了之后再在Window上放一个scrollerview(PicScrollView),覆盖掉整个userdetailController.
picScrollView
#import "PicScrollView.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface PicScrollView ()<UIScrollViewDelegate>
@property (nonatomic, assign)NSInteger total;
@end
@implementation PicScrollView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor blackColor];
}
return self;
}
-(void)scrollViewWith:(NSInteger)picNum Pictol:(NSInteger)picTol picArr:(NSArray *)picArr
{
_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
_scrollView.delegate = self;
_total = picTol;
_scrollView.contentSize = CGSizeMake(WIDTH * picTol, 1);
_scrollView.contentOffset = CGPointMake(WIDTH * picNum, 0);
_scrollView.pagingEnabled = YES;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.bounces = NO;
[self addSubview:_scrollView];
for (NSInteger i = 0; i < picArr.count; i ++) {
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(WIDTH * i, 0, WIDTH, HEIGHT)];
scrollView.minimumZoomScale = 1.0;
scrollView.maximumZoomScale = 2.0;
scrollView.delegate = self;
scrollView.tag = i + 2400;
UIImageView *imageView = [[UIImageView alloc]init];
imageView.center = [UIApplication sharedApplication].keyWindow.center;
CGPoint point = [UIApplication sharedApplication].keyWindow.center;
imageView.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
[scrollView addSubview:imageView];
[_scrollView addSubview:scrollView];
imageView.image = [UIImage imageNamed:picArr[i]];
//双击放大缩小
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapToZoom:)];
doubleTap.numberOfTapsRequired = 2;
doubleTap.numberOfTouchesRequired = 1;
[scrollView addGestureRecognizer:doubleTap];
//点击事件
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(removeFromSuper)];
[singleTap requireGestureRecognizerToFail:doubleTap];
[scrollView addGestureRecognizer:singleTap];
[imageView setTag:1];
}
}
-(void)tapToZoom:(UITapGestureRecognizer *)tap
{
UIScrollView *zoomable = (UIScrollView*)tap.view;
if (zoomable.zoomScale > 1.0) {
[zoomable setZoomScale:1 animated:YES];
} else {
[zoomable setZoomScale:2 animated:YES];
}
}
#pragma mark 缩放中走的方法
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
if (scrollView != _scrollView) {
UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1];
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;
imageView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
scrollView.contentSize.height * 0.5 + offsetY);
}
}
#pragma mark 缩放停止
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(@"缩放停止 %.2f", scale);
}
#pragma mark 缩放所对应的视图
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
if (scrollView != _scrollView) {
UIImageView *imageView = [scrollView viewWithTag:1];
return imageView;
}
return nil;
}
-(void)removeFromSuper
{
[_scrollView removeFromSuperview];
[self removeFromSuperview];
[self.delegate removeImageDelegate];
}
这里是在最底层有个大的scrollerview,大的scrollerview上面放4个小的scrollerview,每个小的scrollerview上放一张图片.如果只是在大的scrollerview上4张图片的话就会造成放大的时候图片越界,变形.
单击图片的时候,先让底部大的scrollerview remove掉,再将整个view remove掉,这个时候在userdetailController上还有一张图片,代理就是让那张图片慢慢缩回到具体的那张小图上然后remove掉.
好了,大概的思路就这些,其实也并不难哈,其实还有不完善和很多可以优化的地方,我把代码给大家看看,大家可以再在这基础上改进改进.下载地址在这里.
好了,就这么多吧.谢谢大家😄
网友评论