SwiftUI+Introspect

Introspect

Introspect は SwiftUI のコンポーネントの裏に UIKit がいることを利用して SwiftUI のコードでは直接カスタマイズできないコンポーネントのかゆいところに手を届かせるためのライブラリです。

ScrollView

SwiftUI でScrollViewにはrefreshableが効かないのですが、Introspect を使えば効くようにできます。

UIViewRepresentableを利用する方法などもあるらしいのですが、こちらのほうが圧倒的に楽です。

1
import Introspect
2
import SwiftUI
3

4
extension ScrollView {
5
  /// Marks ScrollView as refreshable.
6
  func refreshable(action: @escaping @Sendable () async -> Void) -> some View {
7
    self
8
      .introspectScrollView(customize: { uiScrollView in
9
        let refreshControl: UIRefreshControl = UIRefreshControl()
10
        let action: UIAction = UIAction(handler: { handler in
11
          let sender = handler.sender as? UIRefreshControl
12
          sender?.endRefreshing()
13
          Task {
14
            await action()
15
          }
16
        })
17
        refreshControl.addAction(action, for: .valueChanged)
18
        uiScrollView.refreshControl = refreshControl
19
      })
20
  }
21
}

なんか@Sendableを書いているとちょっとおかしいこともあるっぽいので要らないなら消していいかもしれない。

UINavigationController

NavigationViewで戻るを好きなボタンに変えたいときに使うライフハック。

1
import Introspect
2
import SwiftUI
3

4
struct CustomBackButton: ViewModifier {
5
  @Environment(\.colorScheme) var colorScheme
6
  @Environment(\.dismiss) var dismiss
7

8
  func body(content: Content) -> some View {
9
    content
10
      .introspectNavigationController(customize: { nvc in
11
        nvc.navigationBar.backIndicatorImage = UIImage()
12
        nvc.navigationBar.backIndicatorTransitionMaskImage = UIImage()
13
        nvc.navigationBar.topItem?.backBarButtonItem = UIBarButtonItem(
14
          title: nil, image: UIImage(named: "ButtonType/BackArrow"), primaryAction: nil, menu: nil)
15
        nvc.navigationBar.tintColor = colorScheme == .dark ? .white : .black
16
      })
17
  }
18
}
19

20
extension View {
21
  func navigationBarBackButtonHidden() -> some View {
22
    self.modifier(CustomBackButton())
23
  }
24
}

で、これ思った人いると思うんですよ、以下のコードで同じことができるんじゃないかって。

1
import SwiftUI
2

3
struct CustomBackButton: ViewModifier {
4
  @Environment(\.colorScheme) var colorScheme
5
  @Environment(\.dismiss) var dismiss
6

7
  func body(content: Content) -> some View {
8
    content
9
      .navigationBarBackButtonHidden(true)
10
      .toolbar {
11
        ToolbarItem(placement: .navigationBarLeading) {
12
          Button(
13
            action: {
14
              dismiss()
15
            },
16
            label: {
17
              Image(name: "ButtonType/BackArrow")
18
            }
19
          ).tint(colorScheme == .dark ? .black : .white)
20
        }
21
      }
22
  }
23
}
24

25
extension View {
26
  func navigationBarBackButtonHidden() -> some View {
27
    self.modifier(CustomBackButton())
28
  }
29
}

で、だいたいこれでも思った通りの挙動をするのですが、標準のスワイプバックが効かなくなるという問題あります。これが困るんですよね。

ちなみに上記の方法でも困る点があって、指定されたNavigationViewよりも下位の階層にあるコンポーネントにも強制的に反映されてしまうという問題があります。ただ、今回はスワイプバックが効かなくなる方が困るので、こちらの案を採用しました。

NavigationHeaderItem

1
import Introspect
2
import SwiftUI
3

4
struct CustomBackButton: ViewModifier {
5
  @Environment(\.colorScheme) var colorScheme
6
  @Environment(\.dismiss) var dismiss
7

8
  func body(content: Content) -> some View {
9
    content
10
      .introspectNavigationController(customize: { nvc in
11
        nvc.navigationBar.titleTextAttributes = [NSAttributedString.Key.font: UIFont(name: "FONT NAME", size: 16)!]
12
      })
13
  }
14
}

また何か便利そうなライフハック見つけたら掲載します。