如何进行集合查看单元格"放大"和"缩小"当我们在Ios中点击它时的图像

时间:2015-08-31 07:00:12

标签: ios swift

您好我是iOS的初学者,在我的项目中,我以编程方式添加了一个集合视图,并且已成功添加。 enter image description here

我的要求是当我点击UICollectionViewCell然后它将全屏显示,如下面的第二张图像,当我点击关闭按钮图像将返回其实际位置。

为此,我尝试了一些代码,但它没有用!

请帮帮我。

我的代码: -

#import "ViewController.h"

@interface ViewController ()
{
    BOOL isFullScreen;
    CGRect prevFrame;
    UIImageView *dot;
    NSArray * images;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    images = [[NSArray alloc]initWithObjects:@"1.png",@"2.png",@"3.png",@"4.png",@"5.png",@"6.png",@"7.png",@"8.png",@"9.png", nil];

    isFullScreen = NO;
    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];
    _collectionView.backgroundColor = [UIColor whiteColor];

    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [self.view addSubview:_collectionView];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 9;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    dot =[[UIImageView alloc] initWithFrame:CGRectMake(0,0,cell.frame.size.width,cell.frame.size.height)];
    dot.image=[UIImage imageNamed:[images objectAtIndex:indexPath.row]];

    [cell.contentView addSubview:dot];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(100, 100);
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{

    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    if (!isFullScreen) {

        [UICollectionView animateWithDuration:0.5 delay:0 options:0 animations:^{

            prevFrame = cell.frame;
            [cell setFrame:[[UIScreen mainScreen] bounds]];

        }completion:^(BOOL finished){
            isFullScreen = TRUE;
        }];
        return;
    }

    else{

        [UICollectionView animateWithDuration:0.5 delay:0 options:0 animations:^{
            [cell setFrame:prevFrame];
        }completion:^(BOOL finished){
            isFullScreen = FALSE;
        }];
        return;
    }
}
@end

enter image description here

2 个答案:

答案 0 :(得分:1)

尝试 cell.frame不会在屏幕上显示单元格的正确位置,而是CollectionViewController

的内容滚动视图中的位置

要找到正确的框架,请尝试

CGRect frameToAnimateTo = [self.navigationController.view convertRect:cell.frame fromView:self.collectionView];

在周围的NavigationController中查找单元格视图的位置。

对于实际的动画,它比仅转换视图要复杂一些。假设您想要在自己的ViewController中呈现图像(您不一定要这样,但是您的问题表明您打算......),您将必须实现custom ViewController transition

最简单的解决方案是开发一个带有图像视图和按钮的UIView,它从collectionView弹出,只包含一个UIImageView和一个用于关闭的UIButton。

答案 1 :(得分:-1)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>


<input type = "submit" value = "Upload" id="button-upload" />

将图像值发送到下一个视图控制器并将其存储在UIImage变量中,然后将该值传递给UIImageView进行显示。