2015-02-23 83 views
0

我想展示六个UIViews到一个UIViewController,但我不能让它们在模拟器中正确显示。有人能解释一下在这里使用什么约束使它在模拟器上看起来是一样的吗?不能让自动布局

我期望的结果,如在界面生成器:

enter image description here

我目前导致:

enter image description here

我使用故事板时,Xcode 6,iOS 8的和自动布局。

谢谢!

+0

我有一个非常类似的问题,我不能让它与自动布局一起工作。但事实证明,最好的解决方案(适应任何屏幕尺寸)是建立一个简单的UICollectionView – inorganik 2015-02-23 19:05:34

+0

@inorganik我看,这是一个非常聪明的解决方案。你是如何着手填充UICollectionView的?你是用Interface Builder做的(如果可能的话),还是用代码做的? – Erik 2015-02-23 19:07:11

+0

这很简单。设置第一个矩形的宽度和高度,然后选择相等的宽度和相等的高度。设置尾随,领先,顶部和底部的约束条件,然后就可以开始了。 – Cesare 2015-02-23 19:09:09

回答

0

我有一个类似的问题,不能使它与自动布局一起工作。原来,UICollectionView对此很完美。

对于一个2×6格:

CGFloat screenWidth = [[UIScreen mainScreen]bounds].size.width; 
CGFloat screenHeight = [[UIScreen mainScreen]bounds].size.height; 
CGSize collectionSize = CGSizeMake(screenWidth, screenHeight); 
CGFloat cellWidth = screenWidth/2; 
CGFloat cellHeight = (screenHeight - 44)/3; // deduct title bar 
CGSize cellSize = CGSizeMake(cellWidth, cellHeight); 

CGPoint collectionPoint = CGPointMake(0, 0); 
CGRect collectionFrame = {collectionPoint, collectionSize}; 

// set up collection view flow layout 
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; 
flowLayout.minimumLineSpacing = 0; 
flowLayout.minimumInteritemSpacing = 0; 
flowLayout.itemSize = cellSize; 
flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0); 

// instantiate 
self.categoryCollectionView = [[UICollectionView alloc] initWithFrame:collectionFrame collectionViewLayout:flowLayout]; 

然后你就可以在

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

返回单元格内容请确保您实现像numberOfItemsInSection UICollectionView的其他必要的委托方法。

+0

我不完全明白你的意思。我不能创建一个UICollectionViewController,用XIB创建6个不同的UICollectionViewCells并使用它们? – Erik 2015-02-23 19:30:20

+0

如果它们完全不同,则可以为每个视图拖出一个UICollectionViewCell,并将其放置在集合视图控制器中,为它们提供标识符,然后根据需要为每个视图添加UI元素。否则,您可以重复使用同一个集合视图单元格,创建一个自定义单元类,并在'collectionViewCellForItemAtIndexPath'中给它不同的内容。它的工作原理与表格视图非常相似。 – inorganik 2015-02-23 20:21:48

1

如果您只打算显示6个视图,则可能不需要CollectionView。您可以放置​​6个视图并添加约束,以将角视图固定到相应的角落。然后为每个相邻行/列之间的水平间距添加约束。最后,将第一个(或任何视图)的宽度和高度约束设置为相等。这确实意味着拖放有更多的视图和约束,但是您不需要担心填充collectionView数据源,并且(可能是最好的一点),您不需要编写任何代码。

1

这是我尝试过的一个简单的gif图像。这样做实际上很有趣。您必须确保所有宽度相等且高度相等,行中的视图对齐顶部和底部边缘,而列中的视图则对齐前端和尾端。然后,如果您将相邻视图之间的距离和边缘设置为零,则全部完成。

下图显示了我在图形表示中的实际含义。

enter image description here

+0

太棒了,谢谢! – Erik 2015-02-23 20:17:27

2

你不需要collectionViews,也没有在代码中的任何弄虚作假。这在界面构建器的AutoLayout中很容易实现。 顺便说一句,约束的数量和类型很重要。您应该尽可能保持常识,以便您可以维护它,并将UI编号的合成部分的编号保持为最小,以保持快速。因此,我的解决方案比@ k6sandeep s更简单。

1)均匀地放好它们,通过CMD +鼠标点击选择所有6个图块并添加这些约束。

enter image description here

2)单独选择每个瓦片,并添加特定的约束如下所示。

enter image description here

它们具有相同的大小和“吻”彼此在各方面和主要观点。

一旦完成,接口构建器将停止抱怨缺少约束,您将重新计算帧以使其完美。