iOS 開發：擴大 UIView 點擊響應區域提升用戶體驗

痛點場景

在 iOS 界面開發中，小尺寸控件（如關閉按鈕、圖標按鈕）常因點擊區域過小導致用戶操作困難，特別是單手操作大屏手機時。Apple 人機交互指南建議最小點擊區域為 44×44 pt，但設計稿往往要求更小的視覺尺寸。

核心解決方案：重寫 hitTest:withEvent:

通過重寫 UIView 的 hitTest:withEvent: 方法，可在不改變視圖視覺大小的前提下，擴大其觸摸響應區域。此方法是觸摸事件分發的入口，返回非 nil 視圖即表示該視圖可處理事件。

實現代碼

@interface ExpandedHitTestView : UIView
@property (nonatomic) UIEdgeInsets hitTestEdgeInsets; // 擴展邊距：正值向外擴大
@end

@implementation ExpandedHitTestView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _hitTestEdgeInsets = UIEdgeInsetsZero;
    }
    return self;
}

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    // 如果視圖不可見、隱藏、透明度極低或禁用交互，直接返回 nil
    if (!self.isUserInteractionEnabled || self.isHidden || self.alpha < 0.01) {
        return nil;
    }
    
    // 計算擴展後的邊界框
    CGRect expandedBounds = CGRectInset(self.bounds, 
                                        -self.hitTestEdgeInsets.left, 
                                        -self.hitTestEdgeInsets.top);
    expandedBounds = CGRectInset(expandedBounds, 
                                 -self.hitTestEdgeInsets.right, 
                                 -self.hitTestEdgeInsets.bottom);
    
    // 判斷觸摸點是否在擴展區域內
    if (CGRectContainsPoint(expandedBounds, point)) {
        // 遞歸檢查子視圖（從後往前，上層優先）
        for (UIView *subview in self.subviews.reverseObjectEnumerator) {
            CGPoint convertedPoint = [subview convertPoint:point fromView:self];
            UIView *hitView = [subview hitTest:convertedPoint withEvent:event];
            if (hitView) return hitView;
        }
        return self;
    }
    return nil;
}

@end

使用示例

// 為關閉按鈕擴大 20pt 點擊區域
UIButton *closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
closeButton.frame = CGRectMake(0, 0, 24, 24); // 視覺尺寸 24×24
[closeButton setImage:[UIImage imageNamed:@"icon_close"] forState:UIControlStateNormal];

// 關鍵：設置擴展邊距（上下左右各擴展 20pt）
closeButton.hitTestEdgeInsets = UIEdgeInsetsMake(-20, -20, -20, -20);

替代方案對比

最佳實踐建議

• 封裝為 UIButton 分類或基類 ExpandedHitTestButton，項目中統一使用。
• 設置 hitTestEdgeInsets 為負值表示向外擴展（如 UIEdgeInsetsMake(-20, -20, -20, -20)）。
• 配合 UIEdgeInsetsZero 默認值，不影響無需擴展的控件。
• 注意：擴展區域不應超出父視圖邊界，否則可能攔截兄弟視圖事件。