XCode 12.4 日本語化計画：Swift Tutorials

セクション 104

ビューの移行をカスタマイズする




デフォルトでは、ビューはフェードインおよびフェードアウトすることで画面上と画面外に移行します。この移行は、transition(_:) 修飾子を使用してカスタマイズできます。







ステップ 1

条件付きで表示される HikeView に transition(_:) 修飾子を追加します。




---




これで、グラフが表示されたり、隠れたりして見えたり見えなくなったりします。





    HikeView.swiftt



34. if showDetail {
35. HikeDetail(hike: hike)
.transition(.slide)
36. }
37. }





ステップ 2

今追加したトランジションを AnyTransition の静的プロパティとして抽出し、ビューのトランジション修飾子で新しいプロパティにアクセスします。




---




これにより、カスタムトランジションを展開するときにコードがクリーンに保たれます。





    HikeView.swiftt



1. import SwiftUI
extension AnyTransition {
static var moveAndFade: AnyTransition {
AnyTransition.slide
}
}
3. struct HikeView: View {
4. var hike: Hike




---



40. if showDetail {
41. HikeDetail(hike: hike)
.transition(.moveAndFade)
42. }
43. }




ステップ 3

move(edge:) の移行を使用に切り替えて、グラフが同じ側から入ったり出たりするようにします。





    HikeView.swiftt



3. extension AnyTransition {
4. static var moveAndFade: AnyTransition {
AnyTransition.move(edge: .trailing)
5. }
6. }





ステップ 4

asymmetric(insertion:removal:) 修飾子を使用して、ビューが表示されたり隠れたりするときのさまざまな移行を提供します。




    HikeView.swiftt



3. extension AnyTransition {
4. static var moveAndFade: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
.combined(with: .opacity)
let removal = AnyTransition.scale
.combined(with: .opacity)
return .asymmetric(insertion: insertion, removal: removal)
5. }
6. }





セクション 1	セクション 2	セクション 3
セクション 4	セクション 5
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105