How to rotate an Image on touch and Drag image over another Image

问题

I'm developing an app where I need a gallery which will have many images. And what I want to do is when user Tap/click on any image it should rotate that image to 90 degree, And if user drag any image to the top of any other image then those images should switch their places (or we can say swap places with each other).

Explanation:

A B C

D E F

Suppose above is the images of my gallery so if user drag image A on top of image E then gallery should look like this

E B C

D A F

I'm using UICollectionView for making my gallery. Here is what I have done so far.

- (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);

}

But I don't think that CGAffineTransformMakeRotation will work in my Case.

回答1:

As far as rotation is concerned, here's how you can achieve this:

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];*/

The CGAffineTransformMakeRotation parameter is the angle and will allow you to rotate the way you want it. M_PI / 2.0 means left rotation, M_PI / -2.0 right rotation and an angle of 0 will set you back to portrait. If your implementation wants to rotate back and forth when clicking on a cell, you could implement something like this:

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);
}

Now for your second problem, switching cells, I've never used UICollectionViews but I think you should look into - (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath when a drag ends (by checking the indexPath where dragging started and dragging ended).

According to Apple documentation it's the method to use to handle to UI actions.

Use this method to reorganize existing data items. You might do this when you rearrange the items within your data source object or in response to user interactions with the collection view.

来源：https://stackoverflow.com/questions/25803120/how-to-rotate-an-image-on-touch-and-drag-image-over-another-image

标签

ios

objective-c

iphone

uiimageview

uicollectionview