With this article, I’m starting a series about all the goodies — useful tools — that can be found in Xcode. Some of these tidbits are tools everyone knows about while others are barely documented to undocumented. For example, how many of you know that you can view, inspect, and debug all your Auto Layout constraints live during app execution using the “Debug View Hierarchy” Xcode feature? I discussed that feature in detail in this article, “Troubleshooting Auto Layout using Xcode’s Debug View Hierarchy.” Today, we’ll discover two editors that ship with Xcode, the “Open As > Hex” and “Open As > Source Code” editors, both only available by right-clicking on files in the “Project Navigator” to reveal a contextual menu.
Category: Auto Layout
Swift 3 segues, unwind segues, storyboards, and view/navigation controllers
[Download Xcode 8.2.1 project with full Swift 3 source from GitHub.]
Today’s tutorial covers transitions — segues — from one source storyboard scene to another destination scene, and unwind segues leading back from destination to source… I created a project to help you follow along with this tutorial, written in Swift 3, against the iOS 10 SDK, and using the Xcode 8.2.1 IDE. Please download the project. The app produced by the project is shown in action in the following video. Please watch before continuing on:
Segues don’t exist in a vacuum. I’ve introduced a UINavigationController into the mix. Of course, you’ll see a few UIViewControllers. I’ve also used a UITableView and managed its complexity by breaking it into logical pieces by using Swift “extensions.” As you proceed, you’ll have to grasp concepts like Auto Layout and managing a table view’s data source.
Continue reading “Swift 3 segues, unwind segues, storyboards, and view/navigation controllers”
Troubleshooting Auto Layout using Xcode’s Debug View Hierarchy
What’s more important when troubleshooting software, 1) what you intended in design or 2) what was materialized by running your code in a production environment? Take Auto Layout for example. Interface Builder may be happy with your constraints, displaying no warnings or errors, but when you run your app, you see problems. I find it much more helpful to see my all my Auto Layout live, while my app is running. I’ve found that using Xcode’s Debug View Hierarchy button is an often over-looked but extremely powerful tool for solving app layout problems, especially when iOS developers have to write app user interfaces that run on differently-sized devices in multiple orientations. The Debug View Hierarchy feature helps you understand how Auto Layout works. You can see all of your app’s:
Continue reading “Troubleshooting Auto Layout using Xcode’s Debug View Hierarchy”
iOS 101 or … Basic animation, Auto Layout, and view geometry – Part 5
[Download the full Xcode project from GitHub.]
Today, I’m going answer all the questions I posed in this series of posts entitled “Basic animation, Auto Layout, and view geometry – Part X” (see parts 1, 2, 3, and 4). I’ll help you understand how how I created the following iPhone animation using Swift 3.0 — and/or how to get started with your first iOS app:
Continue reading “iOS 101 or … Basic animation, Auto Layout, and view geometry – Part 5”
Basic animation, Auto Layout, and view geometry – Part 4
[Download the full Xcode project from GitHub.]
Today, I’m going to push you to understand how how I created the following iPhone animation using Swift 3.0:
I’ll give you everything you need to figure out what I did — but I won’t explain it for you. Explanation will come later (in the next post, I tie all posts in this series, 1, 2, 3, and 4 together). I want you to learn about my design and code, not just copy and paste it. There is a method to my seeming madness. Hang in there with me through this series of posts.
After providing you with diagrams, source code, references, definitions, inline commentary, etc., I want you to be able to answer some questions about building iOS animations, even if it requires you to do some research, before I put all the pieces together in the final chapter (post) in this series. Remember that I started this blog with the intention of helping new/aspiring iOS app developers get started in an exciting, creative, and potentially financially rewarding profession. I don’t want to just provide code for you to copy and paste into your own app projects, I want you to become the best of the best iOS designers and developers. So let me:
Continue reading “Basic animation, Auto Layout, and view geometry – Part 4”
Basic animation, Auto Layout, and view geometry – Part 3
[Download the full Xcode project from GitHub.]
In this series of posts, “Basic animation, Auto Layout, and view geometry – Part X,” we’re learning about basic animation in several steps. In the first post on Monday, “Basic animation, Auto Layout, and view geometry – Part 1,” we covered setting up a storyboard scene using Auto Layout. In yesterday’s post, “Basic animation, Auto Layout, and view geometry – Part 2,” we used some basic UIView geometry to play with shapes and sizes and we drew on the iPhone screen. Today, we’ll be writing the code to explore iOS animation capabilities. I started writing code yesterday in Swift 3.0, but will later be providing Objective-C versions. I’ll make all the source code available to y’all on GitHub as we move forward. Tomorrow, we’ll start tying parts 1, 2, and 3 together and explaining all the details.
NOTE: The iOS skill level required herein is “beginner” to “intermediate.” One of the purposes of this blog is to help aspiring new iOS developers get started on the right foot. For all you seasoned (or “advanced”) developers out there, I encourage you to stick with this blog as we’ll be covering very complex iOS scenarios too. Everyone can benefit from these articles, including myself, by getting your feedback.
Let’s start with some iOS “block animation,” the simplest and easiest (yet very powerful) means of animating UIView objects. The UIKit framework provides a clean infrastructure for animations. According to Apple:
Continue reading “Basic animation, Auto Layout, and view geometry – Part 3”
Basic animation, Auto Layout, and view geometry – Part 2
[Download the full Xcode project from GitHub.]
In this series of posts, “Basic animation, Auto Layout, and view geometry – Part X,” we’re learning about basic animation in several steps. In yesterday’s post, “Basic animation, Auto Layout, and view geometry – Part 1” we covered setting up a storyboard scene using Auto Layout. Today, we’ll be using some basic UIView geometry to play with shapes and sizes. Tomorrow, we’ll be writing the code to explore iOS animation capabilities. I’ll be writing code in Swift 3.0, then later providing Objective-C versions. I’ll make all the source code available to y’all on GitHub as we move forward.
NOTE: The iOS skill level required herein is “beginner” to “intermediate.” One of the purposes of this blog is to help aspiring new iOS developers get started on the right foot. For all you seasoned (or “advanced”) developers out there, I encourage you to stick with this blog as we’ll be covering very complex iOS scenarios too. Everyone can benefit from these articles, including myself, by getting your feedback.
So what’s this stuff I call “basic UIView geometry?” All user interface components, like UIView’s and UIButton’s, must be positioned on an Apple device’s screen. They’re also objects that occupy space, so they have width and height. In order to position user interface components properly on screen, you use Auto Layout, which boils down to a series of geometric equations called “constraints.” According to Apple, “The layout of your view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. Your goal is to declare a series of equations that has one and only one possible solution.” Let’s make this all more concrete and define two terms you’ll always need to know.
Continue reading “Basic animation, Auto Layout, and view geometry – Part 2”
Basic animation, Auto Layout, and view geometry – Part 1
[Download the full Xcode project from GitHub.]
We’re going to learn about basic animation in the next few series of posts, “Basic animation, Auto Layout, and view geometry – Part X.” In order to perform animations, we need to lay the foundation for a simple app. We’ll be 1) setting up a storyboard scene using Auto Layout (this post), 2) using some basic UIView geometry to play with shapes and sizes (Part 2), and 3) writing the code in Swift and Objective-C to explore iOS animation capabilities (Part 3). After Part 3, we’ll start solidifying all the concepts you’ve learned in this series, tie all these concepts together, and come to the realization that these concepts will be indispensable in almost all your iOS development efforts. I’ll make all the source code available to y’all on GitHub as we move forward.
NOTE: The iOS skill level required herein is “beginner” to “intermediate.” One of the purposes of this blog is to help aspiring new iOS developers get started on the right foot. For all you seasoned (or “advanced”) developers out there, I encourage you to stick with this blog as we’ll be covering very complex iOS scenarios too. Everyone can benefit from these articles, including myself, by getting your feedback.
Create a new Xcode 8.x project, selecting a Single View Application, naming the project “Animation Demo,” filing out all the required new project fields, selecting “Swift” as the Language, and setting “iPhone” for Devices.
Continue reading “Basic animation, Auto Layout, and view geometry – Part 1”