CODEWITHSUNDEEP
iosxcodestoryboardinterface-builderautolayout
Erik
Erik

Reputation: 2530

Can't make autolayout

I'm trying to lay out six UIViews onto a UIViewController, but I can't make them appear correctly in the simulator. Could someone please explain what constraints to use here to make it appear the same on the simulator?

My desired result, as seen in interface builder:

enter image description here

My currently result:

enter image description here

I'm using storyboards, Xcode 6, iOS 8 and autolayout.

Thanks!

Upvotes: 0

Views: 133

Answers (4)

Sandeep
Sandeep

Reputation: 21144

Here is a simple gif image of what I tried. It is actually fun to do this. You have to make sure that all have equal width and equal height, the views in rows have aligning top and bottom edges, while the views in columns have aligning leading and trailing edges. Then, if you set the distance between adjacent views and the edges to zero, it will all be done.

The image below shows what I actually mean in a pictorial representation.

enter image description here

Upvotes: 1

Earl Grey
Earl Grey

Reputation: 7466

You don't need collectionViews, nor any trickery in code. This is easily achievable in AutoLayout in interface builder. Btw, the number and type of constraints matters. You should keep it as common sense as possible so that you can maintain it, and keep their number to minimum for the compositing part of UI rendering to stay fast. My solution is thus less complex than @k6sandeep s.

1) Lay them all out evenly, select all 6 tiles by CMD+mouseclick and add these constraints.

enter image description here

2) select each tile individually and add a particular constraint as shown below.

enter image description here

They have the same size and "kiss" each other on all sides and main view.

Once done, interface builder will stop complaining about missing constraints and you will just recalculate frames to make it perfect.

Upvotes: 2

Dallas Johnson
Dallas Johnson

Reputation: 1536

If you are only ever going to display 6 views a CollectionView might would not be necessary. You could place a 6 views with a constraints to pin the corner views to the respective corners. Then add constraints for the horizontal spacing between each neighbouring row/column. And finally set equal width and height constraints from the first (or any view) to the others. This does mean there are more views and constraints with dragging and dropping but you wont need to worry about populating a collectionView datasource and (perhaps the best bit) you won't need to write any code.

Upvotes: 1

inorganik
inorganik

Reputation: 25525

I had a similar problem and couldn't make it work with autolayout. Turns out a UICollectionView was perfect for this though.

For a 2 x 6 grid:

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];

Then you can return the cell contents in

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

Make sure you implement other necessary delegate methods of UICollectionView like numberOfItemsInSection.

Upvotes: 0

Related Questions