scenee / FloatingPanel

A clean and easy-to-use floating panel UI component for iOS
MIT License
5.53k stars 494 forks source link

Strange scrolling behavior - all content of the FloatingPanel is scrolling #633

Open JelliedFish opened 1 month ago

JelliedFish commented 1 month ago

Introduction

First of all, thank you for your library - it's a huge work that deserves respect 💪🏻 I will be glad if you help me figure out the problem ❤️

📓 Description

During the migration from v1.x to v2.8.2 I've found a strange behavior. When I scroll through the tableView, which is in the FloatingPanel's content VC, the elements not related to the tableView are scrolled too and its animation differs from the contents of the tableView.

[!NOTE] An interesting thing: if you set the absoluteInset to not to unequal to zero, then everything works fine.

[!NOTE] If you scroll the FloatingPanel when the move animation has not ended, then the same behavior. But even it breaks the solution with absoluteInset > 0.

ℹ️ Expected behavior

⚠️ Actual behavior

🧑🏻‍💻 Steps to reproduce

I've created the simple app for testing, which includes:

  1. The RootViewController.
    Code of the RootViewController

class RootViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

  1. The EmbeddedViewController which stored in the RootViewController and have all constraints as zero to safeArea. It also stores the FloatingPanelController.
    Code of the EmbeddedViewController

class EmbeddedViewController: UIViewController {

    private var floatingPanelController: TestFloatingPanelController!

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .purple

        floatingPanelController = MyFloatingPanelController()

        floatingPanelController.addPanel(toParent: self)
    }
} 

  1. The MyFloatingPanelController which implements the FloatingPanelController. With basic realization.
Code of the MyFloatingPanelController

``` swift private enum Constants { enum PositionInset { static let full: CGFloat = 0 static let tip: CGFloat = 53 } } final class MyFloatingPanelController: FloatingPanelController { let contentVC: PanelContentViewController init() { self.contentVC = PanelContentViewController() super.init(delegate: nil) delegate = self setUpPanel() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setUpPanel() { contentMode = .fitToBounds self.set(contentViewController: contentVC) self.track(scrollView: contentVC.tableView) } } extension MyFloatingPanelController: FloatingPanelControllerDelegate { func floatingPanel( _ vc: FloatingPanelController, layoutFor newCollection: UITraitCollection ) -> FloatingPanelLayout { return MyPanelLayout() } } final class MyPanelLayout: FloatingPanelLayout { var position: FloatingPanelPosition { return .bottom } var initialState: FloatingPanelState { return .tip } var anchors: [FloatingPanelState: FloatingPanelLayoutAnchoring] { return [ .full: FloatingPanelLayoutAnchor( absoluteInset: Constants.PositionInset.full, edge: .top, referenceGuide: .safeArea), .tip: FloatingPanelLayoutAnchor( absoluteInset: Constants.PositionInset.tip, edge: .bottom, referenceGuide: .safeArea) ] } } ```

  1. The PanelContentViewController with basic tableView and header arranged by StackView.
Code of the PanelContentViewController

```swift class PanelContentViewController: UIViewController { let tableView: UITableView = { let tableView = UITableView() tableView.backgroundColor = .yellow tableView.translatesAutoresizingMaskIntoConstraints = false return tableView }() private let headerLabel: UILabel = { let label = UILabel() label.text = "Table Header" label.textAlignment = .center label.backgroundColor = .lightGray label.translatesAutoresizingMaskIntoConstraints = false return label }() private let data = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12", "Item 12" ] override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .green tableView.delegate = self tableView.dataSource = self tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell") let stackView = UIStackView(arrangedSubviews: [headerLabel, tableView]) stackView.axis = .vertical stackView.spacing = 8 stackView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stackView) NSLayoutConstraint.activate([ stackView.topAnchor.constraint(equalTo: view.topAnchor), stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor), stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor), stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor) ]) headerLabel.heightAnchor.constraint(equalToConstant: 60).isActive = true } } extension PanelContentViewController: UITableViewDelegate, UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return data.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) cell.textLabel?.text = data[indexPath.row] return cell } func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return UITableView.automaticDimension } } ```

🧑🏻‍💻 Source code

You can test this app manually:

With version 2.8.2 TestFloatingPanel.zip

With version 1.7.6 TestFloatingPanel.zip

❓How do you display panel(s)?

❓ How many panels do you displays?

Screenshots

Now (v2.8.2) Was (v1.7.6)

Fixed `grabberView` behavior

Fixed animations

🧰 Environment

🔢 Library version

⛏️ Installation methods

📱 iOS version(s)

💻 Xcode version(s)

scenee commented 3 weeks ago

Thank you for your report and comment :) I'll check this with the attached source code.

JelliedFish commented 3 weeks ago

Hi ! Thank you very much for the reply 🥹 We are really looking forward it with our team 🫂

scenee commented 1 day ago

@JelliedFish Thanks to your sample projects, I could fix this issue. The fix has been merged into the master branch already. I'm going to release it in version 2.8.4.

Additionally, I found the problem in TestFloatingPanel is that the animation around .tip state is choppy. I’ve also encountered this same issue before, but it was not on the library side. This can be fixed with the following patch to change the AutoLayout priority. Thanks.

diff --git a/TestFloatingPanel/PanelContentViewController.swift b/TestFloatingPanel/PanelContentViewController.swift
index b218448..ec56cf4 100644
--- a/TestFloatingPanel/PanelContentViewController.swift
+++ b/TestFloatingPanel/PanelContentViewController.swift
@@ -73,8 +73,9 @@ class PanelContentViewController: UIViewController {
             stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
         ])

-        headerLabel.heightAnchor.constraint(equalToConstant: 60).isActive = true
-
+        let const = headerLabel.heightAnchor.constraint(equalToConstant: 60)
+        const.priority = .defaultLow
+        const.isActive = true
     }
 }