1

UICollectionView と UICollectionViewFlowLayout を使用してフォト ギャラリーを作成しようとしています。アイデアは、垂直スクロールでグリッドに多くの写真を表示することです。ユーザーが 1 つをタップすると、ページング付きの水平、フルスクリーンになります。

私の問題は、ユーザーがフルスクリーン モードでデバイスを回転させ、グリッドからフルスクリーンに切り替えると、アニメーションが非常に醜いことです。

2 つの異なるコレクション レイアウトを使用してそれらを切り替えようとしましたが、問題は残ります。

誰かがこの動作のサンプル アプリケーションを持っているか、その方法を知っている場合は、非常に感謝しています。

これは私が持っているものです。

@interface MovieImagesVC () <UICollectionViewDelegateFlowLayout>

@end

@implementation MovieImagesVC {
    UICollectionViewFlowLayout *flowLayout;
    int currentIndex;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    flowLayout = (UICollectionViewFlowLayout *)self.collectionViewLayout;
}

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

    if (flowLayout.scrollDirection == UICollectionViewScrollDirectionHorizontal) {

        collectionView.pagingEnabled = NO;

        flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        [flowLayout setMinimumLineSpacing:10.0f];

        if (self.interfaceOrientation == UIInterfaceOrientationPortrait ||
            self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout.itemSize = CGSizeMake(100.f, 100.f);
        }
        else {
            flowLayout.itemSize = CGSizeMake(105.f, 100.f);
        }

        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }
    else {
        collectionView.pagingEnabled = YES;

        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        [flowLayout setMinimumLineSpacing:0.0f];

        flowLayout.itemSize = CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height-20);

        [self.navigationController setNavigationBarHidden:YES animated:YES];
    }
    [self.collectionView.collectionViewLayout invalidateLayout];
    [collectionView reloadData];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

#pragma mark Rotation

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {

    [self.collectionView.collectionViewLayout invalidateLayout];

    if (flowLayout1.scrollDirection == UICollectionViewScrollDirectionHorizontal) {
        if (toInterfaceOrientation == UIInterfaceOrientationPortrait ||
        toInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout1.itemSize = CGSizeMake(self.collectionView.frame.size.height, self.collectionView.frame.size.width-20);
        }
        else {
            flowLayout1.itemSize = CGSizeMake(self.collectionView.frame.size.height, self.collectionView.frame.size.width-20);
        }

    }
    else {
        if (toInterfaceOrientation == UIInterfaceOrientationPortrait ||
        toInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
            flowLayout1.itemSize = CGSizeMake(100.f, 100.f);
        }
        else {
            flowLayout1.itemSize = CGSizeMake(105.f, 100.f);
        }

    }
    [self.collectionView reloadData];

    CGPoint currentOffset = [self.collectionView contentOffset];
    currentIndex = currentOffset.x / (int)self.collectionView.frame.size.width;

}
-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:currentIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}
4

3 に答える 3

1

私には目的がありました: CollectionView A には、写真のグリッドが 3 つ並んでいます。写真の1つをタップすると、水平スクロールとフルスクリーン画像を備えたCollectionView Bが実装されます。

ここにコード：

1) CollectionView のみの selectItem メソッド:

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

    FullScreenViewController *fsvc = [FullScreenViewController new];
    fsvc.ArrayForFullScr = self.Array;
    fsvc.currentIndex = [NSIndexPath indexPathForItem:indexPath.row inSection:1];
    [self.navigationController pushViewController: fsvc animated: YES];    
}

Here self.Array- アイテム (写真) の配列です。

2) CollectionView B -FullScreenViewController.h

@interface FullScreenViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) NSArray *arrayForFullScr;
@property (nonatomic) NSIndexPath *currentIndex;
@property (nonatomic, strong)  UICollectionView *collectionView;

@end

FullScreenViewController.m

#import "FullScreenViewController.h"

@implementation FullScreenViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] bounds]];

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    [layout setScrollDirection: UICollectionViewScrollDirectionHorizontal];
    [layout setMinimumInteritemSpacing: 0.0f];
    [layout setMinimumLineSpacing: 0.0f];

    _collectionView = [[UICollectionView alloc] initWithFrame: self.view.frame collectionViewLayout: layout];
    [_collectionView setDataSource: self];
    [_collectionView setDelegate: self];
    [_collectionView setPagingEnabled: YES];
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [_collectionView setBackgroundColor: [UIColor blackColor]];
    [_collectionView scrollToItemAtIndexPath: [NSIndexPath indexPathForItem: _currentIndex.row inSection: 0] atScrollPosition: UICollectionViewScrollPositionCenteredHorizontally animated: NO];

    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionView methods

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath: (NSIndexPath *)indexPath 
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath: indexPath];
    CustomClass *information = [self.arrayForFullScr objectAtIndex: indexPath.row];

    UIImageView *imgView = [[UIImageView alloc] initWithFrame: cell.frame];
    [imgView sd_setImageWithPreviousCachedImageWithURL: information.url
                                          placeholderImage: [UIImage imageNamed:@"placeholder_photo"]
                                                            options: 0
                                                          progress: nil
                                                      completed:nil];
    imgView.contentMode = UIViewContentModeScaleAspectFit;
    cell.backgroundView = imgView;

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height - 70);
}

@end

#import "SDWebImage/UIImageView+WebCache.h" を使用して画像を保存しました。コードをコピーしてカスタマイズできます。

于 2016-03-02T17:08:11.373 に答える