UICollectionView 在旋转时改变流向

UICollectionView change flow direction on rotation

嘿,我想获得您在图片中看到的内容:在紧凑高度模式(横向 iphone)下,红色和蓝色视图都必须垂直显示所有屏幕,水平显示一半屏幕.在 Compact Width 模式下(纵向 iphone),他们必须水平占据所有屏幕,垂直占据一半屏幕。 Space 在两种模式下视图之间的大小应该相同。

我曾经认为我必须使用大小 类 和自动布局约束,但我尝试的一切都惨遭失败。

也许我必须使用 UICollectionView 并根据方向更改流向(如果可能的话)?

集合视图可能有点矫枉过正,因为您不想滚动,而这正是集合视图的全部要点——当您调整大小以停止滚动时,您已经完成了所有必要的工作设置非滚动布局。

这可以通过 IB 中的尺寸 类 实现。首先,一般来说,您可能会发现在 IB 左侧的文档大纲中命名视图很有帮助。您还需要使用此轮廓而不是尝试抓住微小的约束 H 线。

  1. 设置除 1) 约束之外的所有约束 link OrangeView 和 BlueView 相互关联,2) 约束 linking 顶部和左侧(前导)的 OrangeView,以及 3) 约束 link将 BlueView 移动到底部和右侧(尾随)。
  2. 将底部的大小 class 设置更改为 w-Compact 和 h-Any 在时髦的盒子系统中。现在我们正在设计一个紧凑的宽度,所以视图在彼此之上。
  3. 为 BlueView.bottom 创建垂直 space 约束 OrangeView.Top。同时为 OrangeView 创建约束 superview.leading (or ledaing,margin) 和 BlueView 到 superview.trailing.margin。如果您 select 这些约束中的任何一个并查看右侧的尺寸检查器(标尺),您应该会看到一个 "installed" 复选框而不是 selected,并且在其下方是一个 w-Compact h-Any 和另一个已安装的盒子,这个 selected。
  4. 现在,在保持约束 selected 只是为了看看会发生什么的同时,将底部的 sizeClass select 或更改为 w-Regular h-Any。请注意,在左侧的文档大纲中,它应该变灰。
  5. 现在我们正在为常规设计,所以并排设计。添加约束 link 将水平 space、BlueView.trailing 的视图添加到 OrangeView.leading。 link OrangeView.top 到 superview.top 或顶部对齐到 BlueView.top,底部也是如此。您可以先手动编辑框架;如果不是,IB 会自动填入错误的值,所以在您创建它们之后编辑它们,并验证它们是 w-Regular 和 h-Any。使用 ViewController selected,select "update frames" 并且视图应该捕捉到尺寸 class 的预期形状。

让我们知道这是否适合您或不清楚。祝你好运!