UIButton内Image四边内边距设置：Storyboard与代码实现咨询

Hey there, I’ve dealt with this exact headache before—nothing’s more frustrating than setting symmetric insets on a UIButton’s image only to watch it ignore you when a custom-shaped background image is in play! Let’s break down why this happens and how to fix it both in Storyboard and code.

Why Symmetric Insets Aren’t Working #

The default imageEdgeInsets on a UIButton adjusts the image’s position relative to the button’s content rect, not its size. When you set symmetric insets, the button automatically expands its content area to fit the original image size plus insets—so the image never actually shrinks. Asymmetric insets shift the image, making it look like it’s contained, but that’s just a visual trick, not a real fix.

Fix 1: Storyboard Implementation #

Option A: Using Button Configuration (iOS 15+) #

This is the cleanest approach if you’re targeting iOS 15 or later:

1. Select your UIButton in Storyboard, go to the Attributes Inspector, and set its Type to Custom (skip System style to avoid default layout interference).
2. Scroll down to the Configuration section, pick Plain or Gray (any non-system configuration works).
3. Set your background image under Configuration > Background > Image.
4. Add your foreground image under Configuration > Image.
5. To add inner padding to the foreground image:
   • Expand the Image section in Configuration, then set Image Insets to your desired symmetric values (e.g., 10 for top/left/bottom/right).
   • Set the image’s Content Mode to Aspect Fit to ensure it scales down without distortion.
6. Adjust the button’s size to match your background image (use Size To Fit in the Editor menu if needed).

Option B: Traditional Insets + Auto Layout (Older iOS Versions) #

If you need to support iOS 14 or earlier:

1. Set your button’s Type to Custom in the Attributes Inspector.
2. Add your background image, then use Size To Fit to make the button match the background image’s dimensions.
3. Select the button, go to the Size Inspector:
   • Under Edge Insets, set Image to your desired symmetric values (e.g., 10 all around).
   • Set the button’s Content Hugging Priority for both Horizontal and Vertical to 251 (higher than default) to prevent it from expanding.
4. Select the button’s imageView (you can find it in the Document Outline under the button), set its Content Mode to Aspect Fit in the Attributes Inspector.
5. Add Auto Layout constraints to fix the button’s size to match the background image (e.g., fixed width/height equal to the image’s dimensions).

Fix 2: Code Implementation #

Option A: UIButton.Configuration (iOS 15+) #

This method is straightforward and avoids layout headaches:

// Initialize or reference your button
let customButton = UIButton(type: .custom)

// Configure background image
customButton.configuration = .plain()
customButton.configuration?.background.image = UIImage(named: "yourBackgroundImage")

// Configure foreground image with padding
customButton.configuration?.image = UIImage(named: "yourForegroundImage")
customButton.configuration?.imageInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
customButton.configuration?.imageContentMode = .scaleAspectFit

// Optional: Fix button size to background image
customButton.sizeToFit()

Option B: Auto Layout Constraints (All iOS Versions) #

For maximum control, directly constrain the imageView to the button’s edges with padding:

let customButton = UIButton(type: .custom)
customButton.setBackgroundImage(UIImage(named: "yourBackgroundImage"), for: .normal)
customButton.setImage(UIImage(named: "yourForegroundImage"), for: .normal)
customButton.sizeToFit()

// Disable auto-resizing masks for proper Auto Layout
customButton.translatesAutoresizingMaskIntoConstraints = false
guard let imageView = customButton.imageView else { return }
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit

// Add padding constraints to the imageView
NSLayoutConstraint.activate([
    imageView.topAnchor.constraint(equalTo: customButton.topAnchor, constant: 10),
    imageView.leadingAnchor.constraint(equalTo: customButton.leadingAnchor, constant: 10),
    imageView.trailingAnchor.constraint(equalTo: customButton.trailingAnchor, constant: -10),
    imageView.bottomAnchor.constraint(equalTo: customButton.bottomAnchor, constant: -10)
])

This forces the imageView to stay within the button’s bounds minus your padding, ensuring it scales down to fit perfectly inside the background image.

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