Question

经过一番阅读后，我发现了很多帖子/文章，其中人们说Instagram的我/个人资料页面是UITableView（因为标题是粘性的）而且里面有一个UICollectionView在切换时在网格视图中显示照片。

我有确切的要求。现在我的基本视图是一个表视图，其中包含所有其他视图的标题视图，例如，在网格视图和列表视图之间切换的选项。

当用户点击切换按钮时，如何在网格视图中显示图像？当再次点击切换按钮时，还原到列表视图？

我的第一个视图将是网格视图。所以在加载时，我会设置为no。表中的行= 1并在该行内添加集合视图。当用户点击切换以显示为列表视图时，我将增加否。表中的行，并使用自定义单元格填充数据。

这是正确的方法吗？

这是初始截图

Answer 1

您需要一些属性

CollectionViewGridFlowLayout *gridLayout;
CollectionViewTableFlowLayout *tableLayout;
BOOL onGrid; //if not we are in table mode

在进行更改之前，您需要为每个布局设置数据源

-(void)changeLayoutButtonTapped {

    if (!onGrid) {
        [self loadDataForGridLayout]; //Your data preparation
    }
    else {
        [self loadDataForTableLayout]; //Your data preparation
    }

    [self animateState];
}

进行布局更改

-(void)animateState {

    NSTimeInterval duration = 0.15;
    UICollectionViewFlowLayout *layout;

    // ADD SPIN ANIMATION TO CELLS FOR FUN
    [profileCollectionView.visibleCells enumerateObjectsUsingBlock:^(UICollectionViewCell *cell, NSUInteger index, BOOL *stop)
     {
         CABasicAnimation *translateXAnimation;
         translateXAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
         translateXAnimation.fromValue = @(self.view.bounds.size.width / 2);
         translateXAnimation.toValue = @(0);
         translateXAnimation.duration = duration*2;
         translateXAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

         CABasicAnimation *translateYAnimation;
         translateYAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
         translateYAnimation.fromValue = @(self.view.bounds.size.height);
         translateYAnimation.toValue = @(0);
         translateYAnimation.duration = duration*2;
         translateYAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

         CABasicAnimation *opacityAnimation;
         opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
         opacityAnimation.fromValue = @(0);
         opacityAnimation.toValue = @(1);
         opacityAnimation.duration = duration*2;
         opacityAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

         [cell.layer addAnimation:translateXAnimation forKey:kCAAnimationCubicPaced];
         [cell.layer addAnimation:translateYAnimation forKey:kCAAnimationCubicPaced];
         [cell.layer addAnimation:opacityAnimation forKey:@"opacity"];

     }];


    // Toggle between layouts
    if (onGrid == NO) {

        // CHANGE TO GRID LAYOUT

        if (!gridLayout) {

            gridLayout = [[CollectionViewGridFlowLayout alloc]initWithContentSize:self.view.bounds.size cellPadding:7];
            gridLayout.sectionInset = UIEdgeInsetsMake(12, 12, (kNavBarHeight + kTabBarHeight) + (kButtonHeight), 12);
        }

        layout = gridLayout;
    }

    else {

        // CHANGE TO TABLE LAYOUT         

        if (!tableLayout) {

            tableLayout = [[CollectionViewTableFlowLayout alloc]initWithContentSize:self.view.bounds.size cellHeight:85 cellPadding:12];
            tableLayout.sectionInset = UIEdgeInsetsMake(12, 12, (kNavBarHeight + kTabBarHeight) + (kPostsListenButtonHeight + kPostsListenUnderLineHeight), 12);
        }

        layout = tableLayout;
    }

    // COMMIT ANIMATION
    [UIView animateKeyframesWithDuration:duration delay:0.01 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{

        collectionView.collectionViewLayout = layout;
        collectionView.scrollsToTop = YES;
        [collectionView setContentOffset:CGPointZero];

    } completion:^(BOOL finished) {

        if (finished) {

            if (onGrid == NO) {
                onGrid = YES;
            }

            else {
                onGrid = NO;
            }
        }

    }];

}

Answer 2

我设法仅使用UICollectioView完全设计布局。我有一个带有标题的collectionView。我正在使用UICollectionViewDelegateFlowLayout来决定视图在＆＃34; Grid＆＃34;中的外观。和＆＃34;列表＆＃34;模式。

默认情况下，我有一个网格视图。为此，我有一个名为GridViewCell的自定义UICollectionViewCell。

当用户点击列表视图时，我将名为ListViewCell的自定义UICollectionViewCell置为具有列表/表视图的UIElements。

感谢@AaronBrager指导我使用UICollectionView并完全删除TableView

我如何设计Instagram像在Feed页面上切换以在iOS中的Swift中的网格视图和列表视图之间切换？

2 个答案: