iOS UIButton 添加到子視圖不顯示：masksToBounds 導致裁剪問題解析

問題現象

代碼邏輯正確，UIButton 已 addSubview 到 popUp 視圖，但按鈕不顯示。

根本原因

popUp.layer.masksToBounds = YES; // 關鍵問題行

masksToBounds = YES 會裁剪超出父視圖 bounds 範圍的子視圖。按鈕 frame 為 CGRectMake(0, 0, 100, 30)，而 popUp 的 frame 為 CGRectMake(x, y, 125, 75)，按鈕理應在範圍內，但：

• popUp 可能有 cornerRadius 導致邊緣圓角裁剪
• 按鈕位置 (0,0) 在左上角，可能被圓角遮擋
• 自動佈局未生效時 frame 可能為零

修正方案

方案一：關閉裁剪 + 調整按鈕位置 (最簡單)

-(void)popUpWithX:(int)x andY:(int)y {
    CGRect popUpRect = CGRectMake(x, y, 125, 75);
    popUp = [[UIView alloc] initWithFrame:popUpRect];
    popUp.backgroundColor = [UIColor whiteColor];
    popUp.layer.cornerRadius = 7.5f;
    popUp.layer.masksToBounds = NO; // 關鍵修改：關閉裁剪
    
    [self.view addSubview:popUp];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(12.5f, 22.5f, 100, 30); // 居中偏移
    [button setTitle:@"Click me!" forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:16];
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [popUp addSubview:button];
}

方案二：保持裁剪 + 正確佈局 (規範做法)

-(void)popUpWithX:(int)x andY:(int)y {
    popUp = [[UIView alloc] initWithFrame:CGRectMake(x, y, 125, 75)];
    popUp.backgroundColor = [UIColor whiteColor];
    popUp.layer.cornerRadius = 7.5f;
    popUp.layer.masksToBounds = YES; // 保持圓角裁剪
    
    [self.view addSubview:popUp];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    // 使用 AutoLayout 確保按鈕在安全區域內
    button.translatesAutoresizingMaskIntoConstraints = NO;
    [button setTitle:@"Click me!" forState:UIControlStateNormal];
    [popUp addSubview:button];
    
    // 約束：按鈕居中，邊距 10pt
    [NSLayoutConstraint activateConstraints:@[
        [button.centerXAnchor constraintEqualToAnchor:popUp.centerXAnchor],
        [button.centerYAnchor constraintEqualToAnchor:popUp.centerYAnchor],
        [button.leadingAnchor constraintGreaterThanOrEqualToAnchor:popUp.leadingAnchor constant:10],
        [button.trailingAnchor constraintLessThanOrEqualToAnchor:popUp.trailingAnchor constant:-10]
    ]];
}

核心概念對比

進階：同時實現圓角 + 陰影 + 子視圖不裁剪

// 父視圖：負責陰影，不裁剪
popUp.layer.cornerRadius = 7.5f;
popUp.layer.masksToBounds = NO;
popUp.layer.shadowColor = [UIColor blackColor].CGColor;
popUp.layer.shadowOpacity = 0.3;
popUp.layer.shadowOffset = CGSizeMake(0, 2);
popUp.layer.shadowRadius = 4;
popUp.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:popUp.bounds cornerRadius:7.5f].CGPath;

// 子容器：負責圓角裁剪內容
UIView *contentContainer = [[UIView alloc] initWithFrame:popUp.bounds];
contentContainer.layer.cornerRadius = 7.5f;
contentContainer.layer.masksToBounds = YES;
contentContainer.backgroundColor = [UIColor whiteColor];
[popUp addSubview:contentContainer];

// 按鈕添加到 contentContainer
[contentContainer addSubview:button];

調試技巧

1. 可視化邊界：popUp.layer.borderWidth = 1; popUp.layer.borderColor = [UIColor redColor].CGColor;
2. 檢查 Frame：斷點打印 NSLog(@"popUp: %@, button: %@", NSStringFromCGRect(popUp.frame), NSStringFromCGRect(button.frame));
3. 視圖調試器：Xcode → Debug View Hierarchy (⌘⇧Y) 檢查層級關係
4. 顏色標識：button.backgroundColor = [UIColor redColor]; 確認位置大小

避坑清單

• ❌ masksToBounds=YES 且 shadowXxx 同時設置 → 陰影消失
• ❌ 子視圖 frame 為 CGRectZero → AutoLayout 未生效或未設置 frame
• ❌ button.titleLabel.text = @\"Title\" → 錯誤寫法，必須用 setTitle:forState:
• ❌ 忽略 translatesAutoresizingMaskIntoConstraints → 手動 frame 與 AutoLayout 衝突