Description

Learn to create with SwiftUI/iOS 16. This course illustrates many features in iOS 16 development using the SwiftUI programming language, covering the basics (Stacks, Forms, Lists, ForEach, Buttons, Sliders, Pickers, Color Pickers, Scroll Views, Sheets, state, binding, and animations) and we create an Emoji Quote app using SwiftUI.

SwiftUI creates user interfaces for any Apple platform and helps create beautiful and dynamic apps fast. SwiftUI helps build functional apps across all Apple platforms with surprisingly little code. The course begins with a brief introduction to the text, modifiers, stacks, state variables, and animations and then advances to cover ForEach views, sheets, pickers, sliders, toggle switches, scroll views, buttons, etc. We will move to develop the main app and learn to create an app icon based on Pexels Figma. We will learn to disassemble an SVG image and convert it to PNG using Pexel Figma and Shape and Path to create a speech bubble and add text. We will create a color palette to support light and dark modes and develop a model of a quote-based app on a free quote API, part of the MVVM (Model, View-Model, View design pattern). When tapped, we will test the emoji to generate a new quote and copy the image to the clipboard with a long press. We will create image grids using an iPad/iPhone and create a share sheet to customize the images/quotes; change text color/size or image size, share or save it, and test the app's functionality on a simulator. Upon completion, we can develop an Emoji Quote app using SwiftUI/iOS 16. The course aims for succinct yet fairly comprehensive SwiftUI/iOS 16 development. All resources are available at: https://github.com/PacktPublishing/SwiftUI-iOS-16-Crash-Course---Emoji-Quote-App-in-SwiftUI

What You Will Learn

Learn about modifiers, stacks, state variables, animation, onAppear
Use Shape/Path to create a speech bubble and add text to the bubble
Create a customizable color palette to support light and dark modes
Develop a quote-based app on a free quote API to use in the course
Create image grids using iPad or iPhone adapting to both iPhone/iPad
Test the app's features on a simulator, preferably on an actual device

Audience

This course caters to individuals wishing to acquire application development skills using SwiftUI/iOS 16 with beginner to advanced programming skillsets; however, more than basic to intermediate programming skills are desirable at least to make the most of the course. Anyone wishing to learn programming on iOS 16 using SwiftUI and individuals wanting to learn a quick course on what can be developed using SwiftUI would benefit from this course.

Approach

The course delivers its content primarily through a well-structured video lecture program that explains concepts with hands-on screen demonstrations and presentations. Code explanations rely on your basic programming understanding and the ability to implement an app idea using what you learned from this course.

Key Features

Explore SwiftUI (stacks, forms, lists, buttons, color pickers, scroll views, sheets, animations) * Create blinking emojis with speech bubbles (like Duolingo) and display quotes in the speech bubbles * Explore SwiftUI and iOS app development and implement app ideas adapting to both iPhone and iPad

Github Repo

https://github.com/PacktPublishing/SwiftUI-iOS-16-Crash-Course---Emoji-Quote-App-in-SwiftUI

About the Author

Ron Erez

Dr. Ron Erez is a computer programmer, educator, and mathematician. Dr. Erez has been programming for over 30 years and has always been amazed by the creativity and satisfaction of writing computer programs. Dr. Erez is also an experienced teacher, teaching mathematics, computer science, and English literature from middle school to university level courses. Dr. Erez is out cooking, cleaning, skateboarding, and living in his free time.

Course Outline

1. Introduction

In this video, the instructor briefly overviews the concepts you will learn through this course, including sheets, share links, forms, sliders, buttons, and color pickers. We will understand the goals of the course and the concepts covered.

2. Installing Xcode 14

This video is a detailed demonstration of installing Xcode 14. We will be installing the beta version of the program for our learning purposes, the Xcode 14 beta 3. We will set up and configure the system. We will then download and install SF symbols version 4.

3. Warming Up with the Basics

In this lesson, we will explore the basics of Xcode 14. The lecture explains the interface and then takes us to the basic concepts of Xcode and what we can do with the program.

2. Beyond the Basics

1. Beyond the Basics - ForEach and ScrollView

We will create a new Xcode project and app named "Beyond the Basics". We will choose the iPhone and learn about "ForEach" and "ScrollView".

2. Lists and Sheets

This lesson will create a quick UI view and understand lists with examples. You will learn to create a list of images by resizing the images in the frames and adding shadows. You will learn to create a sheet.

3. Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Structure

This video will discuss the structure of forms, buttons, pickers, sliders, toggles, images, and overlays. We will create a basic form and create different sections and views.

4. Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - The Image Section

In this continuation video from the previous lesson, we will examine the image section in more detail. You will learn to resize the image and add aspect ratios and other features to the images.

5. Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Edit Text Section

This is a continuation of the lesson from where we left off in the previous video. In this video, we will examine the text section. We will create a text field to input text.

6. Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Edit Options

In this lesson, a continuation of the previous video, we will now look at the edit options in more detail. You will learn about the alignment index, and we will test the "text.alignleft", "text.aligncenter", and "text.alignright" options.

7. Forms, Buttons, Pickers, Sliders, Toggle, Images, Overlays - Final Touches

In this continuation video from the previous four lessons, this final installment focuses on the Swift UI view and buttons. We will test the functionality of the content we have created.

8. Buttons, Buttons, Buttons

In this video, we will create a SwiftUI view, "ButtonsExampleView", and learn to create buttons, add features, and test their functionality. You will learn to add spacers, paddings, and colors, and make them more presentable.

9. Steppers

In this lesson, we will explore steppers in detail. We will create a SwiftUI view, "StepperExampleView", to accept user input and display information/messages.

10. Alert, Action Sheet, AsyncImage, Computed Properties, and Default Buttons

In this video, we will discuss alerts, action sheets, computer properties, switch and if statements, animating fonts, typecasting, and more.

3. Useful Tips

1. Useful Hotkeys

In this lesson, we will examine the various hotkeys used in Xcode and explore various tips and tricks we can use while creating new Xcode projects.

4. Emoji App

1. Getting Started and Creating the App Icon

In this video, we will start creating the app icon for the project. We will create a new Xcode project called "Emoji Quote".

2. Get the Emoji SVG, Separate Parts, and Import to Xcode

In this lesson, you will learn to create an emoji SVG by downloading an emoji of choice from Figma and then customizing or modifying the same using vectors to our preference and saving it on Xcode.

3. Blinking Ninja Emoji

In this video, you will learn to create our blinking ninja emoji for our project. We will add features and functionality to the emoji. You will learn to animate the emoji with blinking eyes.

4. Speech Bubble View - Part 1

In this lecture, you will learn about dynamic class names and dynamic CSS styling, which involves conditional arguments passed as True or False values and then performing a task assigned to it.

5. Speech Bubble View - Part 2

In this video, let's create a new view, "SpeechBubbleView", and pass arguments with the CGFloat function. You will learn to alter the tail size and radius of the bubble and try different values until we find an optimal tail size and bubble radius on the screen.

6. Adding Text to the Speech Bubble View

In this lesson, we will pick up where we left off in the previous video, where we defined the tail size and bubble radius. We will shift our focus to adding text to the speech bubble view. We will define parameters on how the text appears in the bubble.

7. Light and Dark Mode Color Palette

In this lecture, you will learn to add colors to your project. You will learn to create a new color set and add the desired number of colors to it. You will also learn to change the display mode using the light and dark modes.

8. The Quote Model

This video demonstrates how to use a quotable API. We will use Google to locate the Luke Peavey Quotable and obtain random quotes. We will use the JSON decoder and develop the Quote Model.

9. The Quote View Model

This is a continuation of the previous video about the quotable API. Here, we will create the view model, connecting the actual view and the data model we created.

10. The Emoji Ninja Can Quote

In this video, you will learn to add the bubble to the ninja emoji and test the ninja to display a quote when it functions. We will create a button to activate the ninja to display a random quote.

11. Create Context Menu to Copy to Clipboard

Here, we will understand how to create image constants and a context menu. We will access the images we have chosen for the app, create a grid, and iterate through the images.

12. Import Images and GridImagesView

Let's learn to import images and create a dedicated SwiftUI view called the "GridImagesView" and add the parameters to the SwiftUI view to adjust the images and display.

13. The Images View

Let's understand how to change the image preview in the image view. We will use the repeat function to define the number of times the image view appears and add scroll views.

14. Completing the GridImagesView

In this video, we will understand how to change the image view. You will learn to create partial views of the images and also be able to scale the text.

15. Updating the Image View

This video demonstrates how we can update the image view. We will use binding variables defining the image, color, and size. We will also adjust the image view based on the device that the app will run.

16. ShareImageView - Part 1

This lesson will teach us to share an image view based on the app's device. You will learn to make the images denser, add spacers, be able to scale the image size and text on display, and modify the text color.

17. ShareImageView - Part 2 - Image and Color Picker section.screenflow

Now, we will focus on learning how to resize the image. You will learn to add a slider that accepts a value, which will be the dimension of the screen display where the image gets displayed. We can resize the image and the font using the slider.

18. ShareImageView - Part 3 - Adding Sliders

In this video, you will learn to apply some modifiers. We will create buttons with action and label with options to save the image to a photo album. We will also create an option for a new renderer to render the image.

19. ShareImageView - Part 4 - Store Image in Photo Album

In this video, we will explore how to make the app store images into a photo album. You will learn to preview the images we want to store or share. We will provide options to copy the image and save it to storage.

20. ShareImageView - Part 5 - Share Image Using ShareLink

In this lesson, we will explore how to create share links to share images with someone. We will create a share image preview and then a share image view and use a button to create a link for the share image option.

21. Updating MainEmojiQuoteView and GridImagesView

Here, you will learn to calibrate the "MainEmojiQuoteView". We will link the emoji to the quotes view and the images to the emoji quotes. When the app is run, we can make the emoji produce a random quote in the bubble and link the image view.

22. The Emoji Quote App in Action

In this video, we will test the quote view model. We will test the app function by making the emoji blink eyes, produce a random quote in the bubble, and display an image. We will check by resizing the image and text color and size. We will also test saving and sharing the link to the images.

Course Images

SwiftUI iOS 16 Crash Course - Emoji Quote App in SwiftUI

By Packt

Booking options

Highlights