Xcode - Swift arrange images in a grid 2x4

Question

I am developing a universal iOS app. I am looking to achieve the below grid layout using 8 images (inclusive of the text).

My skills of autolayout are poor, especially for universal apps. I would like the layout to remain for iPad and smaller screen devices, and scale the images accordingly.

I am unsure how to achieve this. Could you suggest a method and perhaps point me in the right direction by providing suggestions on methods to achieve this, such as UICollectionView or grid layout using autolayout.

This is a mockup using Sketch. The navigation bar is all sorted. — ryryan, Jul 20 '16 at 18:33
Don't come here with no code that you've tried (or maybe not even code, but something you've tried in _Xcode_). We can't help you if you haven't attempted something. — tktsubota, Jul 20 '16 at 18:35

score 4 · Accepted Answer · edited May 23 '17 at 12:33

4

Collection view! It's a great way to arrange things in a view like this that automatically adapts to screen size.

Apple docs - https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/

Simple example you can follow - How to make a simple collection view with Swift

UICollectionView is a powerful tool, can be tricky to nail down at first but follow along on the tutorial and you should be able to make your design in no time!

edited May 23 '17 at 12:33

Community

1
1

answered Jul 20 '16 at 18:41

Ethan Parker

2,896
1
21
27

1

Thanks Ethan. This helped tremendously. – ryryan Jul 21 '16 at 14:08
Happy to hear that! Collection view is available as of iOS 6 so that shouldn't be a problem with any new app you're creating. One reason to use iOS 9 as a base version on new projects is UIStackView - it's an amazing tool that provides a ton of automatic spacing of UIView elements and the like. – Ethan Parker Jul 21 '16 at 19:07

Xcode - Swift arrange images in a grid 2x4

1 Answers1