需求:
点击cell上的图片.图片以原图显示出来,可以放大或缩小.再次点击图片移除图片显示原来界面.(和QQ空间看图片类似)
点击图片实现效果:
1. 自定义一个 UITableView (KDImageDetailTableView) 在方法(- (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)style)里面设置代理对象手势,tableView的背景色,隐藏指示器等
- (id)initWithFrame:(CGRect)frame style:(UITableViewStyle)style
{
self = [super initWithFrame:frame style:style];
if (self) {
// Initialization code
//解决手势冲突(代理对象必须是UIScrollView类的对象)
self.panGestureRecognizer.delegate = self;
//设置代理对象
self.dataSource = self;
self.delegate = self;
//设置背景颜色
self.backgroundColor = [UIColor blackColor];
self.backgroundView = nil;
//去掉分割线
self.separatorStyle = UITableViewCellSeparatorStyleNone;
//设置横向
//1.逆时针旋转
self.transform = CGAffineTransformMakeRotation(-M_PI_2);
//2.重新设置frame
self.frame = frame;
//3.隐藏滑动指示器
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
//4.设置单元格的高度
self.rowHeight = kMainScreenWidth + 20;
//开启翻页效果
self.pagingEnabled = YES;
//默认隐藏
self.alpha = 0;
self.queue = [NSOperationQueue mainQueue];
}
return self;
}
当视图的内容在屏幕上绘制的时候
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:self.index inSection:0];
[self scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
}
实现数据源方法和代理方法
#pragma mark - UITableView DataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.dataList.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = @"imageDetailCellId";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
self.showIndexpath = indexPath;
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier] ;
//去掉单元格的背景颜色
cell.backgroundColor = [UIColor clearColor];
cell.backgroundView = nil;
//取消单元格的选中事件
cell.selectionStyle = UITableViewCellSelectionStyleNone;
//顺时针旋转单元格
cell.contentView.transform = CGAffineTransformMakeRotation(M_PI_2);
//--------------创建子视图------------
//1.创建小的滑动视图(主要是为了缩放)
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 0, kMainScreenWidth, kMainScreenHeight)];
//tag
scrollView.tag = 201;
//取消弹性效果
scrollView.bounces = NO;
//设置缩放比例
scrollView.minimumZoomScale = 1.0;
scrollView.maximumZoomScale = 2.0;
scrollView.delegate = self;
scrollView.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:scrollView];
//--------------创建图片---------
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kMainScreenWidth, kMainScreenHeight)];
// CGRectMake((kMainScreenWidth - 150)/2.0, (kMainScreenHeight -150)/2.0,150 , 150)];
//设置填充方式
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.userInteractionEnabled = YES;
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(imageTapAction:)];
tap.numberOfTouchesRequired = 1;
tap.numberOfTapsRequired = 1;
[imageView addGestureRecognizer:tap];
//tag
imageView.tag = 2014;
[scrollView addSubview:imageView];
UIActivityIndicatorView *aIndicatorView = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
aIndicatorView.center = CGPointMake(kMainScreenWidth/2.0, kMainScreenHeight/2.0);
aIndicatorView.hidden = YES;
aIndicatorView.tag = 2015;
[cell.contentView addSubview:aIndicatorView];
}
return cell;
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
[self.queue cancelAllOperations];
NSString * imageUrl =self.dataList[indexPath.row];
NSURL * requestAddress = [[KDDataTools share] getThumbnailUrlWithPath:imageUrl size:CGSizeMake(960, 720)];
// NSURL * requestAddress = [NSURL URLWithString:imageUrl];
UIImageView *imageView = (UIImageView *)[cell.contentView viewWithTag:2014];
imageView.frame = CGRectMake((kMainScreenWidth - 150)/2.0, (kMainScreenHeight -150)/2.0,150 , 150);
imageView.image = [self.thumbnailDic objectForKey:@(indexPath.row)];
UIScrollView * scrollView = (UIScrollView *)[cell.contentView viewWithTag:201];
UIActivityIndicatorView * aindicatorView =(UIActivityIndicatorView *) [cell.contentView viewWithTag:2015];
[aindicatorView startAnimating];
__weak UIImageView *weakImageView = imageView;
[imageView setImageWithURL:requestAddress placeholderImage:[self.thumbnailDic objectForKey:@(indexPath.row)] options:SDWebImageRetryFailed success:^(UIImage *image) {
// 1.把高清图片现实上去
weakImageView.image = image;
// 计算图片视图的高度 height / kscreenWith = size.heiht / size.with
float height = weakImageView.image.size.height /weakImageView.image.size.width * kMainScreenWidth;
height = MAX(height, kMainScreenHeight);
weakImageView.frame = CGRectMake(0, 0, kMainScreenWidth, height);
scrollView.contentSize = CGSizeMake(kMainScreenWidth, height);
[aindicatorView stopAnimating];
} failure:^(NSError *error) {
}];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[self colse];
}
- (void)colse{
[UIView animateWithDuration:.35f animations:^{
self.alpha = 0;
}];
[self performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:.35f];
}
- (void)imageTapAction:(UITapGestureRecognizer *)tap{
[self colse];
}
#pragma mark - UIGestureRecognizer Delegate
//下面的代理方法只要是YES所有的滑动手势都会响应
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}
- (void)showInWindowFromsuperView:(UIView *)superView{
UIWindow *windown = [superView window];
[windown addSubview:self];
[UIView animateWithDuration:1 animations:^{
self.alpha = 1;
}];
}
#pragma mark - UIScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//如果滑动的事表示图(我不在执行下面代码)
if ([scrollView isMemberOfClass:[self class]]) {
return;
}
if (scrollView.contentOffset.x == 0 || scrollView.contentOffset.x + scrollView.width >= scrollView.contentSize.width) {
} else {
//获取滑动视图里面的手势对象,并获取位置
CGPoint point = [scrollView.panGestureRecognizer locationInView:self];
int index = point.y / 340;
//固定表示图
self.contentOffset = CGPointMake(0, index * 340);
}
}
这个方法返回的控件就是需要进行缩放的控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:2014];
return imageView;
}