简单图片浏览器

九宫格图片浏览

思路:

1.放大

计算得到当前点击的imageView在windows的frame,

创建一个新的imageView在windows上并设置frame,根据image的宽高比计算出全屏显示时的高度和y值

动画放大

2.添加轮播图

移除windos上的imageView

创建添加scrollView在windows上,设置contentOffset.x(第几个imageView*屏幕宽度),根据传入的数组个数创建imageView,如果是长图的话要先创建一个scrollView再在上面创建一个imageView。

3.缩小

创建一个新的imageView在windows上计算frame

移除scrollView

动画缩小后移除imageView


使用:

row点击第几个图片(从0开始),array是image view的数组

PhotoBrowser.h文件

#importtypedef void(^photoBrowserBlock)();

@interface PhotoBrowser : UIView

- (void)didSelectImageItem:(NSInteger)item andArray:(NSArray *)array;

@property (nonatomic ,copy) photoBrowserBlock block;

@end

PhotoBrowser.m文件

#import "PhotoBrowser.h"@interface  PhotoBrowser ()@end

@implementation PhotoBrowser

{

//当前页码

UILabel *pageLabel;

}

#define Alpha 0.85

- (void)didSelectImageItem:(NSInteger)item andArray:(NSArray *)array {

//遮盖

UIView *cover = [[UIView alloc]initWithFrame:self.bounds];

cover.backgroundColor = COLOR_Black;

cover.alpha = 0;

[self addSubview:cover];

//1.在windows创建一个新的imageView,设置frame

UIImageView *imageView = [[UIImageView alloc]initWithFrame:[self returnCGRect:array[item]]];

imageView.image = [(UIImageView*)array[item] image];

imageView.contentMode = UIViewContentModeScaleAspectFill;

imageView.layer.masksToBounds = YES;

[self addSubview:imageView];

//计算image的size

CGSize size = [self returnImageSize:imageView.image];

//计算imageView全屏显示时的高度

NSInteger h = WIDTH*size.height/size.width;

[UIView animateWithDuration:0.5 animations:^{

if (size.width/size.height >= WIDTH/HEIGHT) {

//宽图时y值

NSInteger y = (HEIGHT/2 - h/2);

//动画放大宽图

imageView.frame = CGRectMake(0, y, WIDTH, h);

cover.alpha = Alpha;

}

else {

//动画放大长图

imageView.frame = CGRectMake(0, 0, WIDTH, h);

cover.alpha = Alpha;

}

}

completion:^(BOOL finished) {

//移除windos上的imageView

[imageView removeFromSuperview];

//创建添加scrollView

[self setScrollItem:item andArray:array ];

}];

//页码显示

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(WIDTH/2, HEIGHT-50, WIDTH, 20)];

label.text = [NSString stringWithFormat:@"/%ld",array.count];

label.textColor = COLOR_While;

label.textAlignment = NSTextAlignmentLeft;

[self addSubview:label];

pageLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, HEIGHT-50, WIDTH/2, 20)];

pageLabel.text = [NSString stringWithFormat:@"%ld",item+1];

pageLabel.textColor = COLOR_While;

pageLabel.textAlignment = NSTextAlignmentRight;

[self addSubview:pageLabel];

}

- (void)setScrollItem:(NSInteger)item andArray:(NSArray *)array {

//2.创建scrollView

UIImageView *imv=[[UIImageView alloc]init];

imv.tag = i+1;

imv.contentMode = UIViewContentModeScaleAspectFit;

imv.image=[(UIImageView*)array[i] image];

imv.userInteractionEnabled=YES;

//计算image的size

CGSize size = [self returnImageSize:[(UIImageView*)array[i] image]];

if (size.width/size.height < WIDTH/HEIGHT) {

//展示长图

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(x, 0, WIDTH, HEIGHT)];

[scroll addSubview:scrollView];

//计算高度

NSInteger h = WIDTH*size.height/size.width;

imv.frame =CGRectMake(0, 0, WIDTH, h);

scrollView.contentSize = imv.frame.size;

scrollView.showsHorizontalScrollIndicator = NO;

scrollView.showsVerticalScrollIndicator = NO;

[scrollView addSubview:imv];

}

else {

imv.frame = CGRectMake(x, 0, WIDTH, HEIGHT);

[scroll addSubview:imv];

}

//3.缩小

[imv whenTapped:^{

UIView *cover = [[UIView alloc]initWithFrame:self.bounds];

cover.backgroundColor = COLOR_Black;

cover.alpha = Alpha;

[WINDOWS_View addSubview:cover];

//计算image全屏显示时的高度

NSInteger h = WIDTH*size.height/size.width;

//y值

NSInteger y = (HEIGHT/2 - h/2);

//创建一个新的imageView在windows上计算frame

UIImageView *imageview = [[UIImageView alloc]init];

if (size.width/size.height < WIDTH/HEIGHT)

imageview.frame = CGRectMake(0, 0, WIDTH, h);

else

imageview.frame = CGRectMake(0, y, WIDTH, h);

imageview.image = imv.image;

imageview.contentMode = UIViewContentModeScaleAspectFill;

imageview.layer.masksToBounds = YES;

[WINDOWS_View addSubview:imageview];

//移除scrollView

[scroll removeFromSuperview];

//回调

self.block();

//动画缩小后移除imageView

[UIView animateWithDuration:0.5 animations:^{

imageview.frame = [self returnCGRect:array[imv.tag-1]];

cover.alpha = 0;

} completion:^(BOOL finished) {

[imageview removeFromSuperview];

[cover removeFromSuperview];

}];

}];

}

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

int page = scrollView.contentOffset.x / scrollView.frame.size.width;

pageLabel.text = [NSString stringWithFormat:@"%d",page+1];

}

//返回imageView在windows的frame

- (CGRect )returnCGRect:(UIImageView *)imageView {

return [imageView convertRect: imageView.bounds toView:WINDOWS];

}

//返回image的size

- (CGSize)returnImageSize:(UIImage*)image {

CGImageRef imageRef = [image CGImage];

return  CGSizeMake(CGImageGetWidth(imageRef), CGImageGetHeight(imageRef));

}

@end

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容