iOS简单的图片浏览器 - 实现图库效果

2016-09-19 本文已影响8310人 Beacon丶

这几天在做项目的时候，碰到了要用图片浏览器的需求，在网上找了一些资料，发现大多的做法不是说很好理解，然后就自己试着用UICollectionView写了简单的图片浏览器，做了简单的过渡动画，也可以实现图片的缩放。

下图是基础的效果:

演示demo.gif

演示demo2.gif

接下来是大致的步骤讲解：

demo1界面的搭建

首先我们需要利用创建一个控制器，然后在控制器上面搭建collectionView
- collectionView的创建首先创建UICollectionViewFlowLayout 的对象，设置布局的滚动方式，和每个item的尺寸，然后创建collecitonView

UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
 layout.scrollDirection = UICollectionViewScrollDirectionVertical;
 layout.itemSize = CGSizeMake(SCREENWIDTH / 4 - 1, SCREENWIDTH / 4 - 1);

    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
 _collectionView.frame = CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT);
 _collectionView.contentInset = UIEdgeInsetsMake(45 * W, 0, 57, 0);
 [self.view addSubview:_collectionView];

接下来设置好代理并注册cell，来让cell进行循环利用

    _collectionView.delegate = self;
 _collectionView.dataSource = self;
    //注册cell
 [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"table"];

接下来实现数据源的方法，然后在接下来的几个方法

//每组中item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section；

//cell的创建和数据的提供
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath；

//每行之间的最小间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section；

//每个item(cell)的最小间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section；

//选中cell时候要执行的操作
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    //在这个里面我们要完成将indexPath第二个界面的操作
}

我忽略了数据提供的具体操作，自己可以找数据实现上面的数据源方法，然后这时候得到的界面应该如下图所示：

Paste_Image.png

第二个界面的搭建

这时候我们有两种做法可以参考：

一种是直接跳转另一个控制器，在控制器中再创建collectionView,进行相应的操作
我们直接自定义一个View，在View上面直接创建collectionView，然后直接把这个View在需要的时候利用KeyWindow改到第一个控制器上面，在我们需要的时候再进行移除

我选择的是第二种方法

我们直接自定义1个View，设置View和屏幕的宽高相同，然后直接定义collectionView，和上面第一个界面的搭建大同小异，只需要把每个item的大小直接设置为屏幕的大小。滚动的方向设置为水平滚动。

    //滚动的方向设置为水平滚动
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.itemSize = CGSizeMake(SCREENWIDTH, SCREENHEIGHT);

接下来我们需要自定义cell来完成接下来的操作，拿到第一个页面indexPath，然后根据indexPath.row计算出初始化的时候，我们colletionView的偏移量，来进行定位我们到底选择了哪一张图片，而且我们两组数据其实用的是同一组数据源。

    self.collectionView.contentOffset = CGPointMake(SCREENWIDTH * index.row, 0);

到现在我们两个界面的搭建基本完毕，最关键的一点是实现界面的交互，和第二个界面的图片的缩放

缩放问题

我们需要在自定义的cell里面放入等同屏幕大小的scrollView，并设置如下的属性：

    self.artScrollView = [[UIScrollView alloc] init];
    self.artScrollView.frame = CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT);
    self.artScrollView.minimumZoomScale = 0.5;
    self.artScrollView.maximumZoomScale = 3.0;
    self.artScrollView.showsVerticalScrollIndicator = NO;
    self.artScrollView.showsHorizontalScrollIndicator = NO;

    self.artScrollView.delegate = self;
    [self.contentView addSubview:self.artScrollView];

然后在模型的set方法中，完成UIimageView的创建和设置

    UIImageView *textimage = [[UIImageView alloc] initWithImage:image];

    //移除上一个artimage
    [self.artimage removeFromSuperview];

    self.artimage = [[UIImageView alloc] init];
    self.artimage.contentMode = UIViewContentModeScaleAspectFit;
    self.artimage.frame = [self setImage:textimage];
    self.artimage.image = image;
    [self.artScrollView addSubview:self.artimage];

    //设置scroll的contentsize的frame
    self.artScrollView.contentSize = self.artimage.frame.size;

设置scrollView的缩放内容

//这个方法的返回值决定了要缩放的内容(只能是UISCrollView的子控件)
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.artimage;
}

而接下来两个方法则是实现图片缩放时候让图片仍然居中，和设置imageView的frame来让图片根据自己的大小，自适应屏幕

//控制缩放是在中心
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    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;

    self.artimage.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,

                            scrollView.contentSize.height * 0.5 + offsetY);
}

//根据不同的比例设置尺寸
-(CGRect) setImage:(UIImageView *)imageView
{

    CGFloat imageX = imageView.frame.size.width;

    CGFloat imageY = imageView.frame.size.height;

    CGRect imgfram;

    CGFloat CGscale;

    BOOL flx =  (SCREENWIDTH / SCREENHEIGHT) > (imageX / imageY);

    if(flx)
    {
        CGscale = SCREENHEIGHT / imageY;

        imageX = imageX * CGscale;

        imgfram = CGRectMake((SCREENWIDTH - imageX) / 2, 0, imageX, SCREENHEIGHT);

        return imgfram;
    }
    else
    {
        CGscale = SCREENWIDTH / imageX;

        imageY = imageY * CGscale;

        imgfram = CGRectMake(0, (SCREENHEIGHT - imageY) / 2, SCREENWIDTH, imageY);

        return imgfram;
    }

}

第二个界面的缩放处理完毕，接下来时如何显示在第一个界面上

我们利用KeyWindow可以使第二个界面View直接盖在第一个界面的上面，而要做动画操作，大家可以看下我的做法理解下(原理就是利用蒙版先做动画效果，然后让第二个界面直接盖上去，移除的时候先用CGD定时器延时让View透明，然后在这个时间之后直接移除View就可以)

    #第一个界面cell被选中的时候调用的代理方法进行如下操作

     UIView * backview  = [[UIView alloc]initWithFrame:self.view.bounds];
    backview.backgroundColor = [UIColor blackColor];

    openartModel * model =  self.objcArray[indexPath.row];

    //计算位置
    CGFloat startX = indexPath.row % 4 * ((SCREENWIDTH - 10) /4) + 15;
    CGFloat startY = indexPath.row / 4 * ((SCREENWIDTH - 10) /4)+ 84;
    CGFloat animatime = 0.7;
    UIImageView * imageview = [[UIImageView alloc]initWithFrame:CGRectMake(startX,startY, ((SCREENWIDTH - 10) /4), ((SCREENWIDTH - 10) /4))];

    //加载图片
    NSString * str  = [NSString stringWithFormat:@"http://www.artp.cc/%@",model.ARTWORK_FILE_ORIGINAL];
    imageview.image = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:str];
    imageview.contentMode = UIViewContentModeScaleAspectFit;
    [[UIApplication sharedApplication].keyWindow addSubview:backview];
    [[UIApplication sharedApplication].keyWindow addSubview:imageview];

    //设置动画显示
    [UIView animateWithDuration:animatime animations:^{

        CGRect  frame = CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT);
        imageview.frame = frame;

    }];

    //添加新的view
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(animatime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        DetailArtView * detailView = [[DetailArtView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT) AndIndex:indexPath];
        detailView.objcArray = self.objcArray;
        [[[[UIApplication sharedApplication].keyWindow subviews] lastObject] removeFromSuperview];
        [[[[UIApplication sharedApplication].keyWindow subviews] lastObject] removeFromSuperview];
        [[UIApplication sharedApplication].keyWindow addSubview:detailView];

    });

iOS简单的图片浏览器 - 实现图库效果

demo1界面的搭建

第二个界面的搭建

缩放问题

第二个界面的缩放处理完毕，接下来时如何显示在第一个界面上

猜你喜欢

热点阅读