Strange scrolling behavior - all content of the FloatingPanel is scrolling

[Ilya Kozar]

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

• The tableView’s content (scroll view) scrolls
• Header (not subview of the table view) doesn’t scroll

⚠️ Actual behavior

• The tableView’s content (scroll view) scrolls
• Header (not subview of the table view) scrolls

🧑🏻‍💻 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()
    }
}

2. 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)
    }
} 

3. The MyFloatingPanelController which implements the FloatingPanelController. With basic realization.

Code of the MyFloatingPanelController

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)
        ]
    }
}

4. The PanelContentViewController with basic tableView and header arranged by StackView.

Code of the PanelContentViewController

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)?

• Add as child view controllers

❓ How many panels do you displays?

• 1

Screenshots

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

🧰 Environment

🔢 Library version

⛏️ Installation methods

• Swift Package Manager

Note

Also checked when adding locally

📱 iOS version(s)

• iOS 15.0-17.4

💻 Xcode version(s)

• Xcode 15.2-15.3

[Shin Yamamoto]

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

[Ilya Kozar]

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

[Shin Yamamoto]

@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
     }
 }