Week 6: Building the UI

Now that we have finalized on our design it was time to make it a reality. I took on the task of mapping out the UI in Xcode. I decided to use a UICollectionView, which is what platforms, such as Facebook use, to build the general interface. Using the renderings that we created I went to work mapping out where everything would be in preparation for the data.

The hardest thing to figure out, for me, was setting the constraints for each outlet I was putting into each "cell". An outlet could be an item such as a text label, button, or an image. Setting constraints allows for your UI to be the same on each mobile device that you are viewing it on, whether it be an iPhone 4s all the way up to an iPhone 6 Plus.

The attached image shows what the mockup looks like. Each outlet has its own interaction with the code. The code determines what goes into each outlet, such as putting in what date the event was posted to replace the word "Date", and also how many cells there are. With Xcode you only need to create one cell to determine what the view will look like and you can let the code determine everything else.