Time to spice up the app, add functionality, and make it look good.
Starting with my favorite thing to do in Swift UI. Animations! SwiftUI is the best UI framework i’ve ever used. Making simple animations is extremely simple. We can easily make our cats expand and contract with a couple lines of code.
SwiftUI is so powerful that we already have a fairly complex UI animated with just that small change. But there is is a problem. Actually a lot of problems.
The first bug
We have a ton of bugs. Clicking one cat is expanding other cats and sometimes it’s making the cells wider than the screen and wow. Lot of work. Let’s do it.
Challenge mode: Getting this UI to work right involves squashing two bugs. If you wanna stretch your brain, try em out. It might even take a couple days. Getting the clicking to work correctly is particularly tricky but once you solve it, you’ll straight up be a better programmer.
I don’t yet have the writing prowess to make fixing this UI entertaining to you so here’s the code with no ado.
Take note: Because clipping a view doesn’t actually remove it, when we click the cats we are actually hitting an invisible image half the time. ‘.allowsHitTesting(false)’ on the ImageView is turning off the hit detection on the image and making this UI possible.
This is not bad. And Swift UI does 99.99 percent of the amazing work. The ScrollView automatically expands and animates. We can expand the cat image even more and surface more info to the user by adding some text at the bottom of this view. Or add remove/edits buttons.
The second bug
When we click one of the cells, there is a significant delay until the animation starts. Some of the images take longer than others. Why is this happening? I did some tests.
For whatever reason (ask Jesus), Image views that are loaded from data are animated differently. This is a big problem because this is happening on the main thread and when you have really big images it can take up to a second or two for them to load. It also is not the behaviour we want. We want sexy scaling cat views. There is no reason the cat pictures need to be redrawing like that.
If we create the UIImage when the view initializes instead, the animation works. Let’s take that and plop it into the cat app.
The UI is now responsive and looking halfway okay. You can see how insanely powerful and flexible Swift UI is. Now let’s make the app do something.
Navigation
Let’s add a simple navigation stack to our app.
Now our app can use navigation links and I think it looks a little better.
Edit Button
Let’s add a button to the cats take will take you to a place where we can edit them and play around with more Core Data.
RoundedCorner
Wait. Don’t run the app yet. What is RoundedCorner? We want our button to be rounded as is convention. This makes the sharp corners on our text labels stand out. Going to stackoverflow for a second, someone has solved this problem very elegantly. Let’s take a look.
Now we can update our labels.
Once that is updated, we can enjoy the results.
Now let’s add the ability to edit our cats. Make a new view called CatDetailView.
Then we want to handle editing our cat. For this, we are going to share the state of our detail view and our edit view. Let’s set up the CatEditViewModel.
This code is super hard to read so lets go through it.
First, we have an optional catEntity. This means, the View Model will be initialized without a cat at first. That is because we want to get the CatEntity object from the CatView but we can’t use that until the view is initialized.
Once the VM has the cat, we setup a bunch of bindings. Binding lets these two views share the same state. We are using them so that the cat string in the navigation title changes as soon as we edit it. Otherwise, it wouldn’t change until we refetch the cat from Core Data all over again.
Lastly, we have a willSet that saves Core Data. This willSet is triggered every time the CatDetailView pops on screen. That means, we can use the back button on the edit screen to save the cat.
Last Problem
This is mostly a pretty good app. But there is one last annoyance. After we edit a cat, and go back to the ContentView with the list of all the cats, nothing is updated. This is unacceptable. This means our state isn’t synced and we need to fix it.
The fix to this is to make sure that our CatView is responding to a state. We change the view to have those variables (name, food, age) as state objects. Then, when the view is shown, we reload them from the entity to make sure they are up to date.
Annnnd…
We are done with part 2. We learned how to
- Connect to an API
- Save / Edit things to Core Data
- Create a UI with a consistant state that reflects the most recent data from Core Data
Here is the source code for anyone who wants to check out the completed project.
If anyone likes this tutorial, give it some claps so I know and I’ll make a part 3 adding a lot more features. Thanks for reading!
P.S.
I’m broke, jobless and starting from zero trying to get a job as a iOS developer. Subscribe to my blog if you wanna root on, or if you’re in the same boat and wanna pursue this goal together.
Thanks so much for reading. 🐶🇯🇵 ライキより
