How to Make an App When You Forget to Buy a Card
I’m not saying I forgot …
Hypothetically, if I recently forgot to buy a card for a loved one, and it was too late at night to go out and buy one, what could I have done in about 30 minutes? Make a romantic iOS app instead of course!
What we’ll make
A simple app showing favourite photos from each year you and your loved one has been together. Features:
- Image display.
- Two buttons — to move back and forth through the images.
- A label to display the year of the image.
So basically, instead of just buying a random card and scrawling a message on it, we’re taking the time to create a custom romantic app showcasing images from throughout our most precious relationship! Anyone can tag someone in an Instagram post, but who can build their partner an actual app to say they love them!
What you’ll need:
- Xcode and a knowledge of Swift.
- Some images of your loved one — for this post I’ve got some images from a stock site — as showing the actual images of me and my wife would just be a bit weird!
- A left arrow icon and a right arrow icon for the buttons. I got some from here.
Let’s Go!
- In Xcode, create a new project, call it exactly what it is — The Most Romantic App Of All Space And Time.
2. Add your images and icons to the Assets folder:
3. In the Main Storyboard, add an ImageView
set it’s Content Mode to ‘Aspect Fill’:
and set one of your images as its image. You’ll be setting the image programmatically aswell, but it helps to visualise it.
4. Now add two buttons (assigning their images to be the left and right icons, respectively) and a label between them with default text of ‘2022’. Presuming that one of the images is from 2022!
You can format the label as you wish, here we just whacked it up to 34 size font.
5. Add constraints for all the objects you just added. If you don’t know how to add constraints (which govern where the objects appear on screen, so they can look consistent across different screen sizes) we suggest you have a Google! We don’t have time to open that pandora’s box today!
6. Connect the objects up to the default ViewController.swift file (by control-dragging from each object on the Storyboard onto the swift file). For the buttons, make them Actions. Your code should look like this now:
7. Create two arrays — one for the names of the images, and one for the years of the images. Yes, we could use a better data construct, but I wrote this at about 2 am so let’s just go with it:
8. Now, add code to the button functions such that when clicked, you change the image displayed in the ImageView, based on the current index, along with the label text:
That’s it!!
If you followed all of that, you should have a nice little app that does this:
And remember, I’m not saying I actually forgot to buy an anniversary card …
Any questions, thoughts or comments just let me know below! Or you can get me at Twitter or LinkedIn
