Improve UX for Audio Track & Subtitle Selection

Summary

This update introduces an improvement on the playback audio track and subtitle selection interface in the VLC iOS app. The Audio Track and Subtitle headers are now "sticky", ensuring that they remain visible at the top of the screen as the user scrolls through the available options. Additionally, the bouncy scroll effect has been disabled to provide a smoother and more consistent scrolling experience.

Changes

• Implemented sticky headers for both Audio Track and Subtitle selection sections.
• Ensured headers remain fixed at the top of the selection list during scrolling, providing a more intuitive navigation experience.
• Disabled the bouncy scroll effect for a smoother and more consistent user interaction while navigating through the options.

Testing

• Verified that the sticky headers behave correctly across different screen sizes and orientations.
• Ensured the scroll behavior is now consistent without the bouncy effect, while maintaining smooth interaction.
• Confirmed no performance regressions or layout issues during scrolling.

## Attachment

Before	After
The Audio Track and Subtitle headers were static, which could make it harder to navigate long lists.	The headers are now sticky, remaining visible at the top during scrolling. Additionally, the bouncy effect has been removed to offer a more consistent scrolling experience.
before_vert	after_vert
before_hor_cut	after_hor

Sources/Playback/Player/VideoPlayer-iOS/TitleSelectionView.swift

@@ -122,18 +122,24 @@ class TitleSelectionView: UIView {
     }()
 
     private lazy var audioTableView: UITableView = {
-        let audioTableView: UITableView = UITableView(frame: .zero, style: .grouped)
+        let audioTableView: UITableView = UITableView(frame: .zero, style: .plain)
         audioTableView.delegate = self
         audioTableView.dataSource = self
         audioTableView.translatesAutoresizingMaskIntoConstraints = false
+        audioTableView.contentInsetAdjustmentBehavior = .never
+        audioTableView.sectionIndexBackgroundColor = .clear
+        audioTableView.bounces = false
         return audioTableView
     }()
 
     private lazy var subtitleTableView: UITableView = {
-        let subtitleTableView: UITableView = UITableView(frame: .zero, style: .grouped)
+        let subtitleTableView: UITableView = UITableView(frame: .zero, style: .plain)
         subtitleTableView.delegate = self
         subtitleTableView.dataSource = self
         subtitleTableView.translatesAutoresizingMaskIntoConstraints = false
+        subtitleTableView.contentInsetAdjustmentBehavior = .never
+        subtitleTableView.sectionIndexBackgroundColor = .clear
+        subtitleTableView.bounces = false
         return subtitleTableView
     }()
 
@@ -214,12 +220,14 @@ private extension TitleSelectionView {
         audioTableView.register(TitleSelectionTableViewCell.self,
                                 forCellReuseIdentifier: TitleSelectionTableViewCell.identifier)
         audioTableView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
+        audioTableView.scrollIndicatorInsets.top = TitleSelectionTableViewCell.size
 
         subtitleTableView.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: subtitleTableView.frame.size.width, height: 1))
         subtitleTableView.delegate = self
         subtitleTableView.register(TitleSelectionTableViewCell.self,
                                    forCellReuseIdentifier: TitleSelectionTableViewCell.identifier)
         subtitleTableView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
+        subtitleTableView.scrollIndicatorInsets.top = TitleSelectionTableViewCell.size
     }
 
     private func setupConstraints() {
@@ -350,32 +358,37 @@ extension TitleSelectionView: UITableViewDelegate, UITableViewDataSource {
         return TitleSelectionTableViewCell.size
     }
 
-    func tableView(_ tableView: UITableView,
-                   titleForHeaderInSection section: Int) -> String? {
-        if tableView == audioTableView {
-            return NSLocalizedString("AUDIO", comment: "")
-        } else {
-            return NSLocalizedString("SUBTITLES", comment: "")
-        }
-    }
-
-    func tableView(_ tableView: UITableView,
-                   willDisplayHeaderView view: UIView, forSection section: Int) {
-        guard let header = view as? UITableViewHeaderFooterView else {
-            return
-        }
-
-        header.tintColor = UIColor.black.withAlphaComponent(0.8)
-        header.textLabel?.textColor = .white
-
-        header.textLabel?.text = header.textLabel?.text?.capitalized
-
-        if #available(iOS 13.0, *) {
-            header.backgroundView?.backgroundColor = UIColor.black.withAlphaComponent(0.8)
-        } else {
-            header.contentView.backgroundColor = UIColor.black.withAlphaComponent(0.8)
-        }
-
-        header.textLabel?.font = UIFont.boldSystemFont(ofSize: 16)
+    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
+        // Create a custom view instead of using UITableViewHeaderFooterView for better control
+        let containerView = UIView()
+        containerView.backgroundColor = UIColor.black.withAlphaComponent(0.95)
+        
+        let titleLabel = UILabel()
+        titleLabel.font = UIFont.boldSystemFont(ofSize: 16)
+        titleLabel.textColor = .white
+        titleLabel.text = tableView == audioTableView ? 
+        NSLocalizedString("AUDIO", comment: "").capitalized :
+        NSLocalizedString("SUBTITLES", comment: "").capitalized
+        
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        containerView.addSubview(titleLabel)
+        
+        // Add a bottom separator to make the header more distinct
+        let separator = UIView()
+        separator.backgroundColor = UIColor.white.withAlphaComponent(0.3)
+        separator.translatesAutoresizingMaskIntoConstraints = false
+        containerView.addSubview(separator)
+        
+        NSLayoutConstraint.activate([
+            titleLabel.leadingAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.leadingAnchor, constant: 5),
+            titleLabel.centerYAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.centerYAnchor),
+            
+            separator.leadingAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.leadingAnchor),
+            separator.trailingAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.trailingAnchor),
+            separator.bottomAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.bottomAnchor),
+            separator.heightAnchor.constraint(equalToConstant: 0.5)
+        ])
+        
+        return containerView
     }
 }

[Craig Reyenga]

Would be nice if this was in a UIView subclass