如何在触摸时旋转图像并将图像拖到另一个图像上

时间:2014-09-12 07:36:01

标签: ios objective-c iphone uiimageview uicollectionview

我正在开发一个应用程序,我需要一个可以有很多图像的图库。我想要做的是当用户点击/点击任何图像它应该将该图像旋转到90度,如果用户将任何图像拖到任何其他图像的顶部,那么这些图像应该切换他们的位置(或者我们可以说交换彼此的地方)。

说明:

A B C

D E F

假设上面是我的图库的图像,所以如果用户将图像A拖到图像E的顶部,那么图库应该看起来像这样

E B C

D A F

我使用UICollectionView制作我的图库。这是我到目前为止所做的。

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.imageArray = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", nil];

    [self.collectionView registerClass:[ClosetsCell class] forCellWithReuseIdentifier:@"ClosetsCell"];
    [self.collectionView setPagingEnabled:YES];

    // Configure layout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setItemSize:CGSizeMake(100, 100)];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    [self.collectionView setCollectionViewLayout:flowLayout];
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        return [self.imageArray count];
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    // Setup cell identifier
    static NSString *cellIdentifier = @"ClosetsCell";

    ClosetsCell *cell = (ClosetsCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    cell.imageView.image = [UIImage imageNamed:[self.imageArray objectAtIndex:indexPath.row]];
    cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"checked.png"]];

    // Return the cell
    return cell;

}

-(CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 1;
}

-(CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 4;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"ClosetsCell";

    ClosetsCell *cell = (ClosetsCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    printf("Selected View index=%d",indexPath.row);

    cell.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);

}

但我不认为CGAffineTransformMakeRotation会在我的案例中发挥作用。

This is how my gallery looks.

1 个答案:

答案 0 :(得分:3)

就轮换而言,以下是如何实现这一目标的:

CGAffineTransform rotation = CGAffineTransformMakeRotation(M_PI / 2.0);

/* If you want an animation
[UIView beginAnimations: @"" context: NULL];
[UIView setAnimationDuration: 0.3];
*/

cell.imageView.transform = CGAffineTransformConcat(cell.transform, rotation);

/*[UIView commitAnimations];*/

CGAffineTransformMakeRotation参数是角度,可让您按自己喜欢的方式旋转。 M_PI / 2.0表示左旋转,M_PI / -2.0右旋转,角度0表示回到纵向。如果您的实现想要在单击单元格时来回旋转,则可以实现以下内容:

CGAffineTransform leftRotation = CGAffineTransformMakeRotation(M_PI / 2.0);
CGAffineTransform portraitRotation = CGAffineTransformMakeRotation(0.0);

if (CGAffineTransformEqualToTransform(leftRotation, cell.imageView.transform)){
    cell.imageView.transform = CGAffineTransformConcat(cell.transform, portraitRotation);
}
else if (CGAffineTransformEqualToTransform(portraitRotation, cell.imageView.transform)){
    cell.imageView.transform = CGAffineTransformConcat(cell.transform, leftRotation);
}

现在针对你的第二个问题,切换单元格,我从未使用过UICollectionViews,但我认为你应该在拖动结束时查看- (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath(通过检查拖动开始和拖动结束的indexPath)。

根据Apple documentation,它是用于处理UI操作的方法。

  

使用此方法重新组织现有数据项。你可能会这样做   重新排列数据源对象中的项目时   响应用户与集合视图的交互。