Using SwiftUI, create memes from a blank template

This is what we will accomplish in this tutorial

Using a public API from https://imgflip.com/api, we will pull popular meme templates and give the user the ability to enter in their desired text and adjust as necessary.

We will use Combine to fetch the results, SwiftUI to display the information, and a few custom views for the user to edit it accordingly.

We won’t cover saving the image in this tutorial, but you could still just screenshot and crop it to fit your needs.

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 12 installed as we will be using parts of the iOS API that are only available in iOS 14. …


Create a super basic implementation of the game no one knows how to play

Image for post
Image for post
Photo by Lorenzo Herrera on Unsplash

This is what we will be creating in this tutorial

Getting Started

Create a new SwiftUI project in Xcode. Make sure you’re running macOS Catalina (or later) and have Xcode 11 (or later) installed. (That allows you to use SwiftUI.)

Open Xcode → File → New → Project

I called mine Minesweeper, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI.

Image for post
Image for post

Implementation

For the images, they’re all from commons.wikimedia.org. The images can also be found in my github repo.

Let’s start off by defining the requirements for how our game will work. …


Image for post
Image for post
Photo by Lucas Benjamin on Unsplash

Get the average color of an image and set it as our background similar to Instagram Stories.

I recently came across this tutorial on Hacking With Swift and thought I would implement it similar to Instagram Stories but in SwiftUI

This is what we will be creating by the end of this tutorial:

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (That allows you to use SwiftUI.)

Open Xcode → File → New → Project

I called mine AverageBackgroundColor, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI. …


Create a custom react hook to save and retrieve custom cookies used within your React App without any dependencies.

Image for post
Image for post
Photo by Mae Mu on Unsplash

Introduction

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

With the addition of hooks in React, it allows us to create highly customizable small pieces of reusable functionality. Some great examples of helpful hooks include:useCookie (manage custom cookies), useKeyPress (get which key was pressed by the user and update state based on that), useAuth (determine if the user has the required authentication on certain pages). These are just a number of useful and reusable hooks that you can create. They allow state to be stored and managed from within. …


Using the built-in microphone, sample the sound level in dB to visualize it in SwiftUI.

Image for post
Image for post
Photo by Icons8 Team on Unsplash

This is what we are going to accomplish in this tutorial:

Image for post
Image for post

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (Allows you to use SwiftUI)

Open Xcode → File → New → Project → iOS → Single View App

Then hit next.

I called mine SoundVisualizer, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI.

Image for post
Image for post

How are we going to accomplish this?

Image for post
Image for post

Imagine the red line above is our analog sound wave. Using Swift, we can capture the level of the sound at any given time. We then take various samples of our sound and store them in an array (buffer). Using this array, we can map it to our SwiftUI bar chart where the height is directly correlated to the sound received from the microphone! …


Build a gradient color picker using DragGesture() in SwiftUI

Image for post
Image for post

Here is what we’ll build in this tutorial:

Image for post
Image for post

Our color picker will allow the user to drag their finger on the color view and it will update the background color of our main view accordingly.

The drag gesture will be constrained within the height of our color view.

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (Allows you to use SwiftUI)

Open Xcode → File → New → Project

I called mine ColorPicker, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI.

Image for post
Image for post

Implementation

Let’s get started by creating a new Swift File. …


Cards and swipe gestures in SwiftUI

Image for post
Image for post
Image source: Brandon Lee Baars

Here’s What We’ll Build in This Tutorial

As you’ll see, only four cards are shown at all times. When one is removed, another is added to the bottom of the stack.

Image for post
Image for post

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (That allows you to use SwiftUI.)

Open Xcode → File → New → Project

I called mine SwipeableCards, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI.

Image for post
Image for post

Implementation

Let’s get started with our layout.

I went on to pexels.com, …


Learn how to build an auto-changing image carousel in SwiftUI with a Timer.

Image for post
Image for post
Photo by Djim Loic on Unsplash

Image carousels are a good way to display multiple photos to a user with minimal real estate on an iPhone.

This is what we’ll accomplish in this tutorial:
Every three seconds the image will switch.

Image for post
Image for post

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (Allows you to use SwiftUI)

Open Xcode → File → New → Project

Make sure you have User Interface set to SwiftUI

Image for post
Image for post

If you’d like to follow along with the same images I’m using, here are the links:

/// Backgrounds

https://www.pexels.com/photo/man-in-bus-247929/
https://www.pexels.com/photo/black-crt-tv-showing-gray-screen-704555/
https://www.pexels.com/photo/black-cassette-tape-on-top-of-red-and-yellow-surface-1626481/

/// Person

https://www.pexels.com/photo/adolescent-adult-black-and-white-casual-270968/

Once the project was created, open ContentView.swift and add the following code to create our layout skeleton for this project. …


Learn how to build a parallax-ed stretchable header in SwiftUI using GeometryReader, ObservableObject, and PreferenceKey.

Image for post
Image for post

In this tutorial, we are going to create a stretchy header that, when scrolled, will create a parallax effect that blurs as the user scrolls further. We will be using GeometryReader to get the current position of certain Views, as well as a few other SwiftUI features to make this nice looking Medium-esque style screen.

This is what we are going to accomplish in this tutorial:

Image for post
Image for post

Getting Started

To get started, open up Xcode. I’m running Xcode 11.3 on an iMac using Swift 5. But, any computer running Xcode 11 on macOS Catalina will work.

Create a new project, selecting Single View Application and call it Sticky Header (or really anything, it’s up to you). …

About

Brandon Baars

Software Engineer | iOS & Vapor | React & Redux | UI/UX

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store