【问题标题】:Can I "take out" or "tear off" a cell from a UICollectionView?我可以从 UICollectionView 中“取出”或“撕下”一个单元格吗?
【发布时间】:2014-04-01 17:44:55
【问题描述】:

注意 - 可能是 UIViewControllerAnimatedTransitioning

https://developer.apple.com/library/ios/documentation/uikit/reference/UIViewControllerAnimatedTransitioning_Protocol/Reference/Reference.html

在这里是相关的。

注意 - 我刚刚意识到 iOS7 新的“滑动”手势就是这个概念

这里有一些答案:

The UICollectionView "swipe-away" in iOS7 app manager?


假设您的 iPad 有一个 UICollectionView(“bigView”),垂直的,其中包含 10 个单元格,每个单元格大约为 400x400。假设 bigView 位于屏幕的右半边。

我想这样做:

3号单元格可能被点击了。

该单元格移离集合视图(例如,屏幕左侧)。 TBC 它移动到 UICollectionView 的边界之外。理想情况下,它会变成一个普通的 UIView(比如说)。

其实我想:

(1) 摧毁其他9个细胞

(2) 完全销毁 UICollectionView

(3) 实际上,将一个单元格 #3 转换为(我猜)一个 UIView

我会从那里拿走它!

这个可以吗??

(a) 你能将 UICollectionViewCell“转换”为 UIView(它是否有你可以“移除”的 UIView 内脏??)

(b) 你能否(也许)销毁所有其他单元格,让 UICollectionView 实际上只是一个单元格(并且可能移动“整个东西”)...

(c) UICollectionView 是否有任何其他类型的“撕下”机制


现在已经做了很多很多次了,这几乎是最简单的基本解决方案。

您将拥有一个实际上是集合视图的类,

@interface BouncyItems : UICollectionViewController

在该类中,您将有一个 didSelectItemAtIndexPath: 或类似的:

在那里,您可以轻松到达相关牢房。

-(void)collectionView:(UICollectionView *)cv
  didSelectItemAtIndexPath:(NSIndexPath *)indexPath
    {
    NSInteger thisRow = indexPath.row;
    NSString *thatName = yourData.stuff[thisRow][@"nameField"];
    YourCellClass *cell = [cv cellForItemAtIndexPath:indexPath];
    
    NSLog(@"Yo, peeling off ....... %@  %@", theName);
    
    YourScene *parent = (YourScene *)self.parentViewController;
    [parent peelOff:cell.holder];
    }

但更重要的是,您将拥有一个实际场景,它有一个容器视图,即集合视图。

所以在示例中,“YourScene”是 UIViewController,它确实有一些容器视图。这些容器视图之一确实是有问题的集合视图。

@interface YourScene:UIViewController
@property (nonatomic, strong) IBOutlet UIView *bouncyItemsContainer;
-(void)peelOff:(UIView *)peelMe;
@end

请注意,在情节提要中,查看您的 BouncyItems,您会将连接从它拖回“bouncyItemsContainer”

(与将“YourScene”中的按钮连接到相关 IBOutlet 项目的方式没有什么不同。)

所以,看看 didSelectItemAtIndexPath 中的代码,就这么简单,

    YourScene *parent = (YourScene *)self.parentViewController;
    [parent peelOff:cell.holder];

什么是“.holder”..解释如下。

现在的常规剥离是什么?令人惊讶的是,它就这么简单。

秘诀是 convertPoint: 代码行...

-(void)peelOff:(UIView *)peelMe
    {
    CGPoint oldCenter = [self.view
      convertPoint:peel.center
      fromView:peel.superview];
    [self.view addSubview:peelMe];
    peelMe.center = oldCenter;
    [self.bouncyItemsContainer exitLeft];
    }

{回想一下,addSubview: 可以方便地从旧的超级视图中删除视图,因此它可以在一行代码中为您完成所有这些工作。}

所以,就是这样 - 前三行代码,您已经从容器视图中删除了一个单元格,peelMe。它现在只是普通场景 YourScene 的一部分。

接下来,简单地“摆脱”集合视图。在我的示例中,exitLeft 只是将其设置为离开屏幕左侧的动画。

所以,它是完美的 - 你点击一个单元格;集合视图的所有其余部分都在屏幕上显示动画(您可以在那里做任何您想做的事情,让它们“飞走”,面朝外,翻滚 - 无论如何),并且一个选定的单元格留在后面。由于“神奇”的 convertPoint 代码行,一切都保持正确。

最后,所有单元格都必须有一个“.holder”,即.....

一个包含单元格中所有内容的 UIView;这就是你剥离的东西。 (这是唯一实用的解决方案,不要取出单元格的底层 .contentView。)您可以仔细安排白色/透明等背景,以便在场景中飞来飞去时一切“正常”。

所以,这就是它的全部内容。

您现在 (1) 摆脱了集合视图,并且 (2) 您的 YourScene 拥有了原来是单元格的东西。

因此,在剥离:您将通过 .holder UIVIew,并且,您可能还会通过一些数据,例如“用户选择了这所房子来查看内部”或任何您的上下文。

最后在原始问题中,它提到然后将剥离的视图移动到 YourScene 上的某个位置。当然,你想怎么做都可以,可能在peelOff:.

希望对你有帮助。

【问题讨论】:

标签: ios uicollectionview


【解决方案1】:

我已经按照这些思路做了一些事情。我已经实现了在集合视图周围和部分之间拖动单元格。我还需要集合视图的“外部目标”来将单元格拖到上面。我只是在 collectionView 的图层上关闭了 maskToBounds,然后我就能够将我的假浮动单元格(代表真实的隐藏单元格)拖到 collection view 的边界之外。

无论如何,我认为在您的示例中基本上隐藏未“聚焦”的单元格并根据需要对聚焦单元格的更改进行动画处理要容易得多。

考虑在您的集合视图布局上实现- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath。您既可以重新布局您的 collectionView 以移动/调整焦点单元格的大小,也可以将“已破坏”单元格的框架设置为屏幕外、更小或以其他方式修改。

您还可以对这些布局更改进行动画处理,甚至在布局之间移动,这可以实现非常漂亮的过渡。

collectionView 中的一个单元格没有理由不能非常大并且具有与所有其他单元格完全不同的框架。如果我这样做,我可能会将正常单元格保留在一个部分中,而将聚焦单元格作为另一个部分中的唯一单元格(因为在部分之间移动单元格很简单)。然后,使用上述方法,我可以更轻松地对单元格的布局进行主题化,因为我可以按部分引用这些项目。

【讨论】:

  • 令人着迷 - 我会用 layoutAttributesForItemAtIndexPath 看看能做些什么!谢谢!
  • @JoeBlow 我应该注意,当我处理这个问题时,我只“关心”layoutAttributesForItemAtIndexPath,但我也必须实现layoutAttributesForElementsInRect——我想只是为了剔除不是细胞的元素,但我不是 100% 确定为什么我必须同时做这两个 atm。
  • 我已将您有用的答案标记为灰色,因为没有其他人来参加聚会!请注意链接的问题,其中还有其他一些方法。
猜你喜欢
  • 1970-01-01
  • 2020-10-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-13
  • 2021-11-12
  • 1970-01-01
相关资源
最近更新 更多