1

So I'm trying to mimic the Apple Podcasts app expanding audio player.

enter image description here

So far I've added an overlay to my TabView and it works like a charm, se below:

TabView {
    ...
}.overlay(
    PlayerView()
)

Now I want to achieve the expanding view/sheet similar to the gif above for my PlayerView(), how would I go about doing that in SwiftUI?

2
  • What have you tried so far and where are you running into a problem? Stack Overflow is best for specific questions: How to Ask, minimal reproducible example
    – jtbandes
    Feb 25, 2020 at 7:28
  • @jtbandes I manged to solve it so will posting the answer here shortly.
    – Ismailp
    Feb 25, 2020 at 7:47

1 Answer 1

1

So I solved this issue after some time researching, was a bit of hassle getting the animation working smoothly but I think I got it in the end. See code below:

App.swift

TabView {
    ...
}.overlay(
    FloatingPlayer()
        .edgesIgnoringSafeArea(.all)
)

FloatingPlayer.swift

struct FloatingPlayer: View {
    @State var viewState = CGSize.zero
    @State var playerExpanded = false

    var body: some View {
        GeometryReader { geometry in
            VStack {
                if self.playerExpanded {
                    Spacer()
                }
                ZStack {
                    VisualEffectView(effect: UIBlurEffect(style: self.settings.playerExpanded ? .systemThickMaterialDark : .dark))
                            .frame(
                                width: geometry.size.width,
                                height: self.playerExpanded ? geometry.size.height + 10 : 60
                            )
                }
                     .offset(y: self.viewState.height)
                     .gesture(DragGesture()
                     .onChanged { value in
                         if (self.playerExpanded) {
                             self.viewState = value.translation
                             if (value.translation.height > 200) {
                                 self.playerExpanded = false
                                 self.simpleSuccess()
                             }
                         }
                     }
                     .onEnded { value in
                          self.viewState = CGSize.zero
                     })
                     .onTapGesture {
                         if !self.playerExpanded {
                             self.playerExpanded.toggle()
                         }
                     }
            }
                .animation(.interactiveSpring(response: 0.5, dampingFraction: 0.9, blendDuration: 0.3))
                .statusBar(hidden: true)
        }
    }
}

You would also need to play with some paddings in order for it to work perfectly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.