Swift 4背景无限滚动实现问题：滚动时出现黑边

Hey there! Let’s figure out how to fix that black background gap when doing infinite background scrolling in Swift 4. That issue usually pops up from either a non-seamless image, incorrect tiling setup, or scroll offset logic that isn’t looping smoothly. Here’s how to tackle it step by step:

First, Verify Your Background Image #

• Make sure your image is seamlessly tileable. If the left/right (or top/bottom for vertical scroll) edges don’t line up perfectly, you’ll get gaps or black spaces when scrolling. Double-check that the edges match exactly so the image repeats without visible breaks.

Use Tiled Resizing for Smooth Repeats #

Instead of stretching the image, configure it to tile automatically across the scroll view. This ensures the image repeats naturally instead of distorting:

guard let originalBackground = UIImage(named: "your-background-image") else { return }
// Create a resizable version that tiles instead of stretching
let tiledBackground = originalBackground.resizableImage(withCapInsets: .zero, resizingMode: .tile)

// Set up the image view and add it to your scroll view
let backgroundImageView = UIImageView(image: tiledBackground)
backgroundImageView.frame = scrollView.bounds
backgroundImageView.contentMode = .center // Preserves the tiling behavior
scrollView.addSubview(backgroundImageView)
scrollView.sendSubviewToBack(backgroundImageView) // Ensure it's behind other content

Fix Scroll Offset Logic for Infinite Looping #

If you’re using a UIScrollView to simulate infinite scroll, you need to reset the offset before the user reaches the edge to avoid empty space. Here’s a reliable approach for horizontal scrolling:

First, set up duplicate background views to create the loop illusion:

// Add two identical background views to the scroll view
let bgView1 = UIImageView(image: tiledBackground)
bgView1.frame = scrollView.bounds
let bgView2 = UIImageView(image: tiledBackground)
bgView2.frame = CGRect(x: scrollView.bounds.width, y: 0, width: scrollView.bounds.width, height: scrollView.bounds.height)

scrollView.addSubview(bgView1)
scrollView.addSubview(bgView2)
scrollView.contentSize = CGSize(width: scrollView.bounds.width * 2, height: scrollView.bounds.height)
scrollView.delegate = self

Then implement the scroll view delegate to loop the offset seamlessly:

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let halfContentWidth = scrollView.contentSize.width / 2
        // Reset offset when approaching the edge of the second image
        if scrollView.contentOffset.x >= halfContentWidth - 50 {
            scrollView.contentOffset.x = 0
        }
        // Handle scrolling back to the start
        else if scrollView.contentOffset.x <= 50 {
            scrollView.contentOffset.x = halfContentWidth
        }
    }
}

Double-Check Scroll View Background Color #

Make sure your scroll view’s backgroundColor isn’t black! Set it to match your background image’s dominant color or clear it entirely:

scrollView.backgroundColor = UIColor.clear // Or use your image's background color

That should eliminate the black gaps and give you a smooth, infinite background scroll. Test it out—if you still run into issues, double-check that your image is truly seamless and that all frames are sized correctly to match the scroll view bounds.

内容的提问来源于stack exchange，提问作者DamsoJilo