使用第三方库PageMenu时ViewController出现初始空白问题

Hey, I’ve run into similar layout quirks with CAPSPageMenu before. From your code and the issue description, that initial blank space is almost certainly tied to either repeated view creation or timing issues with how your layout is calculated. Let’s break down the fixes step by step:

1. Stop Re-creating the PageMenu Every Time #

Right now, you’re calling pager() in viewDidAppear, which means every time your view comes into view, you’re making a new CAPSPageMenu instance and adding it to pagerView. This creates overlapping views and layout chaos. Let’s fix that first:

First, add these properties to your view controller if you haven’t already:

var pageMenu: CAPSPageMenu?
var controllerArray: [UIViewController] = []

Then, split out your controller setup and only initialize the pageMenu once:

override func viewDidLoad() {
    super.viewDidLoad()
    // Set up your child controllers once here, not every time the view appears
    setupChildControllers()
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Only create the pageMenu if it doesn't exist yet
    guard pageMenu == nil else { return }
    setupPageMenu()
}

func setupChildControllers() {
    let buyVC = storyboard?.instantiateViewController(withIdentifier: "BuyMBVCSID") as! BuyMBVC
    buyVC.parentNavigationController = navigationController!
    buyVC.title = "Buy MB"
    // Critical: Prevent the child view from extending under the navigation bar/status bar
    buyVC.edgesForExtendedLayout = .bottom
    controllerArray.append(buyVC)

    let sellVC = storyboard?.instantiateViewController(withIdentifier: "SellMBVCSID") as! SellMBVC
    sellVC.parentNavigationController = navigationController!
    sellVC.title = "Sell MB"
    sellVC.edgesForExtendedLayout = .bottom
    controllerArray.append(sellVC)
}

2. Sync PageMenu Layout with Parent View #

The initial blank often happens because when viewDidAppear runs, pagerView’s final frame isn’t fully set yet. We can fix this by updating the pageMenu’s frame when the layout is finalized:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    // Update the pageMenu's frame to match pagerView's current size
    pageMenu?.view.frame = CGRect(x: 0, y: 0, width: pagerView.frame.width, height: pagerView.frame.height)
}

3. Finalize the PageMenu Setup #

Update your pageMenu setup function (renamed to setupPageMenu here) to force a layout refresh right after adding it to the view:

func setupPageMenu() {
    let parameters: [CAPSPageMenuOption] = [
        .scrollMenuBackgroundColor(UIColor(red: 72/255.0, green: 175/255.0, blue: 230/255.0, alpha: 1.0)),
        .viewBackgroundColor(.white),
        .selectionIndicatorColor(.white),
        .addBottomMenuHairline(false),
        .menuItemFont(UIFont(name: "Times New Roman", size: 16)!),
        .menuItemWidth((pagerView.frame.width - 30)/3),
        .menuHeight(50.0),
        .enableHorizontalBounce(true),
        .menuItemWidthBasedOnTitleTextWidth(false),
        .selectedMenuItemLabelColor(.white),
        .unselectedMenuItemLabelColor(.white),
        .menuItemSeparatorWidth(4.5),
        .useMenuLikeSegmentedControl(false),
        .menuItemSeparatorRoundEdges(true),
        .selectionIndicatorHeight(2.0),
        .menuItemSeparatorPercentageHeight(0.0),
    ]

    pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0, y: 0, width: pagerView.frame.width, height: pagerView.frame.height), pageMenuOptions: parameters)
    
    guard let pageMenuView = pageMenu?.view else { return }
    pagerView.addSubview(pageMenuView)
    
    // Force immediate layout to avoid initial rendering gaps
    pageMenuView.setNeedsLayout()
    pageMenuView.layoutIfNeeded()
}

Quick Check for Child Controller Layout #

Double-check your BuyMBVC to make sure the "Buy MB for BTC" section has a top constraint tied directly to its view’s top (or safe area top, if that’s what you need). A missing or misconfigured constraint here could also cause that initial blank.

Why This Works #

• No more duplicate pageMenu instances cluttering up your view hierarchy
• edgesForExtendedLayout = .bottom stops child views from creeping up under navigation elements
• Updating the frame in viewWillLayoutSubviews ensures we use the most accurate size for pagerView
• Forcing a layout refresh right after adding the pageMenu fixes initial rendering delays that cause blank spaces

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