DEV Community: noah.k

LazyVStack Animation on Appearance and Disappearance

noah.k — Thu, 30 Jan 2025 02:56:29 +0000

How can you fade out LazyVStack or LazyHStack item when it disappears, without animating when it appears?
In JetPack Compose, I'd use Modifier.animateItem() (previously Modifier.animateItemPlacement()), but I didn't know how in SwiftUI, so I tried several patterns.

Implicit Animation

LazyVStack.animation()

animates both on appearance and disappearance
items fade in or out

struct ContentView: View {
    @State private var numbers = Array(0..<3)

    var body: some View {
        VStack {
            LazyVStack {
                Button("Append") {
                    let lastValue = numbers.last ?? -1
                    numbers.append(lastValue+1)
                }
                .padding()

                ForEach(numbers, id: \.self) { number in
                    Text(String(number))
                        .padding()
                        .background(.mint)
                        .onTapGesture {
                            if let index = numbers.firstIndex(where: { $0 == number }) {
                                numbers.remove(at: index)
                            }
                        }
                }
            }
            .animation(.easeIn(duration: 1.0), value: numbers)

            Spacer()
        }
    }
}

Item.animation()

animates only on disappearance, not on appearance
items don't fade out

struct ContentView: View {
    @State private var numbers = Array(0..<3)

    var body: some View {
        VStack {
            LazyVStack {
                Button("Append") {
                    let lastValue = numbers.last ?? -1
                    numbers.append(lastValue+1)
                }
                .padding()

                ForEach(numbers, id: \.self) { number in
                    Text(String(number))
                        .padding()
                        .background(.mint)
                        .onTapGesture {
                            if let index = numbers.firstIndex(where: { $0 == number }) {
                                numbers.remove(at: index)
                            }
                        }
                        .animation(.easeIn(duration: 1.0), value: numbers)
                }
            }

            Spacer()
        }
    }
}

Explicit Animation

Standard Code

this code is enough for most cases
animates only on disappearance, not on appearance
items fade out

struct ContentView: View {
    @State private var numbers = Array(0..<3)

    var body: some View {
        VStack {
            LazyVStack {
                Button("Append") {
                    let lastValue = numbers.last ?? -1
                    numbers.append(lastValue+1)
                }
                .padding()

                ForEach(numbers, id: \.self) { number in
                    Text(String(number))
                        .padding()
                        .background(.mint)
                        .transition(.opacity)
                        .onTapGesture {
                            if let index = numbers.firstIndex(where: { $0 == number }) {
                                _ = withAnimation(.easeIn(duration: 1.0)) {
                                    numbers.remove(at: index)
                                }
                            }
                        }
                }
            }

            Spacer()
        }
    }
}

By Keeping Previous Value

In case you don't have access to update the value to monitor, you need to keep the previous and current value
animates only on disappearance, not on appearance
items fade out

struct ContentView: View {
    @State private var numbers = Array(0..<3)

    var body: some View {
        VStack {
            Button("Append") {
                let lastValue = numbers.last ?? -1
                numbers.append(lastValue+1)
            }
            .padding()

            ListView(
                numbers: $numbers,
                onTapNumber: { number in
                    if let index = numbers.firstIndex(where: { $0 == number }) {
                        numbers.remove(at: index)
                    }
                }
            )

            Spacer()
        }
    }
}

struct ListView: View {
    @Binding var newNumbers: [Int]
    @State private var numbers: [Int]
    let onTapNumber: (Int) -> Void

    init(numbers: Binding<[Int]>, onTapNumber: @escaping (Int) -> Void) {
        self._newNumbers = numbers
        self.numbers = numbers.wrappedValue
        self.onTapNumber = onTapNumber
    }

    var body: some View {
        LazyVStack {
            ForEach(numbers, id: \.self) { number in
                Text(String(number))
                    .padding()
                    .background(.mint)
                    .transition(.opacity)
                    .onTapGesture { onTapNumber(number) }
            }
        }
        .onChange(of: newNumbers) {
            if newNumbers.count < numbers.count {
                withAnimation(.easeInOut(duration: 1.0)) {
                    // Code for a case where only one item can be removed at once
                    if let index = numbers.indices.first(where: {
                        numbers[$0] != newNumbers[safe: $0]
                    }) {
                        numbers.remove(at: index)
                    }
                }
            } else {
                numbers = newNumbers
            }
        }
    }
}

extension Collection {
    subscript (safe index: Index) -> Element? {
        return indices.contains(index) ? self[index] : nil
    }
}

How to migrate your project with Carthage to Xcode 12

noah.k — Sun, 07 Mar 2021 11:40:58 +0000

According to Apple's announcement, you need to build your app with Xcode 12 from April 2021 to submit to the App Store. I really got stuck migrating my project which uses Carthage, so let's see how I managed to do that in this article.

Use XCFramework

XCFramework is necessary to fit to Xcode 12.
This article doesn't refer to the detail of XCFramework, so please check other sources for more information.

Update Carthage to 0.37.0

Carthage 0.37.0 added support for XCFramework.

Add Carthage `--use-xcframeworks` option

E.g. carthage bootstrap --use-xcframeworks --platform iOS --no-use-binaries

Link to XCFrameworks

In TARGETS -> General tab -> Frameworks, Libraries, and Embedded Content,
replace *.framework with *.xcframework.
*.xcframework files are located in Carthage/Build.

Update Framework Search Paths

In TARGETS -> Build Settings tab -> Search Paths -> Framework Search Paths,
Replace *.framework's parent folder path with *.xcframework's.
E.g. $(PROJECT_DIR)/Carthage/Build/iOS -> $(PROJECT_DIR)/Carthage/Build

Update Not to Run Script `copy-frameworks`

In TARGETS -> Build Phases tab,
you no longer need to copy frameworks.

Workaround for Test Target

In my project, steps above enabled main target to work with Xcode 12, but not test target.
I use some libraries only for test target, but building test target failed saying No such module (library name).
Let's see how to fix that.

Update Framework Search Paths

In TARGETS -> Build Settings tab -> Search Paths -> Framework Search Paths,
add architectures where you run.
E.g. Any iOS SDK and Any iOS Simulator SDK

Then add *.framework's parent folder path for each architecture.
*.framework files are located in *.xcframework/(architecture).
E.g. $(PROJECT_DIR)/Carthage/Build/Foo.xcframework/ios-arm64_armv7 for Any iOS SDK,
$(PROJECT_DIR)/Carthage/Build/Foo.xcframework/ios-arm64_i386_x86_64-simulator for Any iOS Simulator SDK

Remove Links to Frameworks, XCFrameworks

I succeeded to build the target without setting links to Frameworks or XCFrameworks.
Remove them from TARGETS -> Build Phases tab -> Link Binary With Libraries.

Copy Frameworks

Copying frameworks is still necessary for this target, otherwise you'll encounter Library not loaded when running the test.
In TARGETS -> Build Phases tab, create (or update if exists) Copy Files Phase specifying *.xcframework, not *.framework.

Reference

Carthage / Building platform-independent XCFrameworks (Xcode 12 and above)

Localize iOS App without Coding, with Storyboard

noah.k — Sun, 24 May 2020 10:09:45 +0000

There are several ways to internationalize your app. In this article, let's check how to achieve localizeation by Storyboard, avoiding coding.

0. Environment

Xcode 11.0

1. Localize the Project

Add Japanese from PROJECT Info - Localications.
*In this article, use English as default language and add Japanse.

Then, .string file will be generated to selected storyboards. By doing the followings, localization is complete!:

.storyboard file: Configure in English
.string file: Configure in Japanse (Refer to "2. Localize after Updaing Storyboards")

Note that keys to configure are different between UI object types. After updating storyboards, it may take time to look up all the keys, so let's take a look at the shortcut in the next section.

2. Localize after Updaing Storyboards

Don't forget to backup the current .string file before the following steps, because it will be removed. Uncheck Japanese. Confirmation dialog may be shown, and select "Remove".

Then, check Japanese again. Select "Replace file" in the dialog shown, and .string file will be re-genereted.

In the sample above, configuration is as following:
"cgO-CO-O4B.text": text of UILabel
"qY6-pH-68Q.normalTitle": text of UIButton
You can set Japanese in the right-hand side (Code below omits auto-generated comments).

"cgO-CO-O4B.text" = "Konnichiwa!";
"qY6-pH-68Q.normalTitle" = "Button label in Japanese";

When you add UI objects you may prefer this way, but of course you can edit .string file directly.

3. Localize after Adding Storyboards

From Localize menu, first add Base, and then add Japanese.

4. Run and Check Localization

Just by switching language setting of simulators (or of course real devices), you can see app's language switch.

Swift Minimal Coding Rules

noah.k — Tue, 10 Sep 2019 11:09:47 +0000

For whom is this?

Entry level developers (or who works with them)
Wants to code quickly but keep the minimum code quality
Already introduced SwiftFormat and SwiftLint

You can find various coding rules, but many of them are long and might be overwhelming. This rule is simple enought to quickly start, easy to understand even for beginners.

Rules

Use Understandable Names

Naming is one of the most important points in code.
Take your time to think of naming.

Segregate Classes from View Controllers

Don't put code unrelated to view into view controllers.
Don't put code unrelated to app status into AppDelegate.
Conform to Single Responsibility Principle.

Separate Storyboards and View Controllers

In team development, you should avoid conflict.

Put Common Code into Protocols

Don't Repeat Yourself.
Adopt Protocol Oriented Programming.
https://dev.to/noahkuwae/protocol-oriented-programming-pop-brief-summary-4i5b

Put Common UI Parts into Xibs

Again, Don't Repeat Yourself.

Conform to Cocoa MVC

This should be determined in each team, but MVC is basic and the most understandble architecture.

Separate Classes (or Structs) by Extensions for each Protocol

This increases readability of the code.

Before:

class SampleViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { ... }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { ... }
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { ... }
...
}

After:

class SampleViewController: UIViewController { ... }

extension SampleViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { ... }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { ... }
}

extension SampleViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { ... }
}

Handle Errors

If you don't handle them now, add some comment like // TODO.

Use assert or fatalError for Unexpected Cases

If you merely use return, you'll have difficulty in fixing it later.

Split Your Code into Methods

If you want to write a comment for a chunk of code, it's a sign for creating a method.

Reference

15 Rules for Writing Quality Code | | InformIT

Note

This is subject to change, because currently I'm running a project using this rule (in 2019).
Some update might occur during the project.

Protocol Oriented Programming (POP) Brief Summary

noah.k — Wed, 01 May 2019 10:52:49 +0000

Protocol Oriented Programming is a powerful approach when using Swift.

Imagine you want to add some functionality to some UIView.

Add a function of 360 degrees rotation with animation
Access borderColor property directly

How can you realize that?

1. Object Oriented Way

extension UIView {
    func rotate(duration: TimeInterval) {
        UIView.animate(withDuration: duration / 2, delay: 0.0, options: [.curveEaseIn], animations: {
            self.transform = self.transform.rotated(by: CGFloat.pi)
        }) { _ in
            UIView.animate(withDuration: duration / 2, delay: 0.0, options: [.curveEaseOut], animations: {
                self.transform = self.transform.rotated(by: CGFloat.pi)
            }, completion: nil)
        }
    }

    var borderColor: CGColor? {
        get {
            return layer.borderColor
        }
        set {
            layer.borderColor = newValue
        }
    }
}

var myView = UIView()
myView.rotate(duration: 1.0)
myView.borderColor = UIColor.green.cgColor

Problem of Object Oriented Way

All UIView subclasses automatically inherit attributes and behaviors, even if you don't need them (code smells "Refused Bequest")
If you want to add more functionality and implement it to the extension, the extention keeps growing

2. Protocol Oriented Way

protocol Rotatable {
    func rotate(duration: TimeInterval)
}

extension Rotatable where Self: UIView {
    func rotate(duration: TimeInterval) {
        UIView.animate(withDuration: duration / 2, delay: 0.0, options: [.curveEaseIn], animations: {
            self.transform = self.transform.rotated(by: CGFloat.pi)
        }) { _ in
            UIView.animate(withDuration: duration / 2, delay: 0.0, options: [.curveEaseOut], animations: {
                self.transform = self.transform.rotated(by: CGFloat.pi)
            }, completion: nil)
        }
    }
}

protocol BorderColorable {
    var borderColor: CGColor? { get set }
}

extension BorderColorable where Self: UIView {
    var borderColor: CGColor? {
        get {
            return layer.borderColor
        }
        set {
            layer.borderColor = newValue
        }
    }
}

class MyView: UIView, Rotatable, BorderColorable {}

var myView = MyView()
myView.rotate(duration: 1.0)
myView.borderColor = UIColor.green.cgColor

Points

Follow Interface Segregation Principle
Implementing multiple protocols is possible
Define default implementation in protocol extension

Benefits of Protocol Oriented Way

Loose coupling : You can avoid inheriting unnecessary attributes or behaviors
Reusability : You can realize necessary and sufficient functionality, by separating protocols and implementing multiple protocols

Reference

LinkedIn Learning Swift 4: Protocol-Oriented Programming

Design Principles for OOP Brief Summary

noah.k — Mon, 29 Apr 2019 09:39:36 +0000

If you are developing software using object oriented programming, design principles help you a lot, by increasing flexibility and reusability.
All design patterns follow design principles below.

Liskov Substitution Principle

Description
- An instance of superclass must be replaceable by an instance of subclass
- Therefore, subclass's functionality should be general enough
Benefit
- It keeps client code away from being impacted
- Open-Closed Principle can also be satisfied

Open-Closed Principle

Description
- Class should be open to extension, and closed to change
- Class is recognized to be closed when design and implementation is completed in the following cases
  - It is tested to function properly
  - All the attributes and behaviors are encapsulated
  - Class and instance do not block the system, and they are confirmed to be stable
Benefit
- It keeps stability by preventing unexpected change
- It allows adding functionality (e.g. by inheritance)

Dependency Inversion Principle

Description
- Access high level generalization
- Do not directly access low level concrete class
Example
- Create an interface which generalizes the concrete class
- Client accesses only the interface
Benefit
- It looses coupling, and realizes flexibility and reusability

Composing Object Principle (Composition over inheritance)

Description
- Extend functionality by composition(aggregation) rather than by inheritance
Example
- When you want to use some class's functionality, add a property of its instance, rather than inheriting it
Benefit
- It looses coupling, by avoiding inheriting all the properties and methods of the superclass

Interface Segregation Principle

Description
- Separate interface, and avoid enforcing to implement unwanted methods
Benefit
- It avoids unnecessary dependency, and looses coupling

Principle of Least Knowledge (Law of Demeter)

Description
- Method can only call other methods of the following
  - In the same object
  - Method parameter
  - Object instantiated within the method
  - Instance variable in the same object
Benefit
- It looses coupling, by avoiding unnecessary interaction over classes

Reference

Coursera Design Patterns

DEV Community: noah.k

LazyVStack Animation on Appearance and Disappearance

Implicit Animation

LazyVStack.animation()

Item.animation()

Explicit Animation

Standard Code

By Keeping Previous Value

How to migrate your project with Carthage to Xcode 12

Use XCFramework

Update Carthage to 0.37.0

Add Carthage --use-xcframeworks option

Link to XCFrameworks

Update Framework Search Paths

Update Not to Run Script copy-frameworks

Workaround for Test Target

Update Framework Search Paths

Remove Links to Frameworks, XCFrameworks

Copy Frameworks

Reference

Localize iOS App without Coding, with Storyboard

0. Environment

1. Localize the Project

2. Localize after Updaing Storyboards

3. Localize after Adding Storyboards

4. Run and Check Localization

Swift Minimal Coding Rules

For whom is this?

Rules

Use Understandable Names

Segregate Classes from View Controllers

Separate Storyboards and View Controllers

Put Common Code into Protocols

Put Common UI Parts into Xibs

Conform to Cocoa MVC

Separate Classes (or Structs) by Extensions for each Protocol

Handle Errors

Use assert or fatalError for Unexpected Cases

Split Your Code into Methods

Reference

Note

Protocol Oriented Programming (POP) Brief Summary

1. Object Oriented Way

Problem of Object Oriented Way

2. Protocol Oriented Way

Points

Benefits of Protocol Oriented Way

Reference

Design Principles for OOP Brief Summary

Liskov Substitution Principle

Open-Closed Principle

Dependency Inversion Principle

Composing Object Principle (Composition over inheritance)

Interface Segregation Principle

Principle of Least Knowledge (Law of Demeter)

Reference

Add Carthage `--use-xcframeworks` option

Update Not to Run Script `copy-frameworks`