SwiftUI | How to make Notion-like memo app [2]

Photo by Sigmund on Unsplash

Following the former article, I tried to make memo app like real Notion app. As a matter of fact, what I realized in this project is it is not as easy as it looks and I still have a lot of things to learn. It was almost impossible to be done with shallow knowledge. Anyway, here’s my result.

Another way to make an array containing various types of variables

I used enum to make generic array before but this time changed my data structure to struct. There are some reasons. First, as the codes need more features in it, enum became more tricky to handle. Second, because it couldn’t return view itself without function like view() -> some View, its readability became really horrible. That’s why I decided to change the whole codes.

So here’s what I did:

I added Equatable and Hashable protocol for the cases which use firstIndexOf or ForEach. The rest is quite straightforward. I designed it to have one of Text or UIImage values. If you gave Container struct a text value, it will return TextContainerView when variable view is called. The other case behaves in the same way.

There’s a function named type() . I made it for the further case for which I should do different task depending on the type of Container’s value. And now it seems done with making view for Containers.

Make Document view

There are nothing special. So let’s just look into some features which can be little bit unfamiliar like .onMove .onDelete @FocusState ImagePicker(PHPicker).

You can see .onMove .onDelete method in line 12, 13. They are related to features like reordering and deleting by dragging each block and provided by default in Swift. FYI, it can only be implemented in a list.

If you want to make more elaborate view, You can also use NSItemProvider to implement drag & drop. It’s quite tricky to do though.

@FocusState is newly introduced in iOS 15. It eliminates annoying jobs dealing with the pre-Swift things and make it easier to implement first responder for TextField. It’s pretty simple. If FocusState var is true, your TextField is going to be a first responder. You can find more details in the official document.

PHPicker , which introduced to replace UIImagePicker since iOS 14 released, is a amazing tool to bring photo data from your device’s storage. It offers quite decent features like zoom in/out and definitely seems improved compared to the former one. I didn’t attached the codes I used here but you can see those in my Github repo.

Anyway, now it’s done.

Things to be done

• Drag container without EditButton
• Delete container with backspace key.

someday..

Github

NotionStyleMemo/NotionStyleMemo at main · enebin/NotionStyleMemo