Setting Images for UIButton in Code: From Basic Methods to iOS 15 Configuration

Fundamental Methods for UIButton Image Setup

In iOS application development, UIButton serves as a core component for user interaction, with image configuration being a common development requirement. The traditional approach to image setting relies on the setImage:forState: method, which accepts a UIImage object and control state as parameters.

In Objective-C, you first need to create a UIImage instance:

UIImage *btnImage = [UIImage imageNamed:@"image.png"];
[btnTwo setImage:btnImage forState:UIControlStateNormal];

The equivalent implementation in Swift 5.1 is:

let btnImage = UIImage(named: "image")
btnTwo.setImage(btnImage, for: .normal)

The essence of this method lies in understanding image resource management and control state handling. The imageNamed: method loads the specified image from the application's main bundle or asset catalog, requiring developers to ensure image files are properly added to the project.

The UIButton.Configuration Revolution in iOS 15

With the release of iOS 15, Apple introduced the UIButton.Configuration structure, fundamentally transforming button styling approaches. This new API provides a more unified and flexible solution for button configuration.

Configuration Style Initialization

UIButton.Configuration offers four predefined styles:

// Transparent background style
let plainConfig = UIButton.Configuration.plain()

// Gray background style  
let grayConfig = UIButton.Configuration.gray()

// Tinted background style
let tintedConfig = UIButton.Configuration.tinted()

// Filled background style
let filledConfig = UIButton.Configuration.filled()

Example of creating a button using configuration:

var configuration = UIButton.Configuration.filled()
configuration.title = "Action Button"
configuration.image = UIImage(systemName: "star.fill")
let button = UIButton(configuration: configuration, primaryAction: nil)

Image Customization Options

The new configuration system provides extensive image control capabilities:

var configuration = UIButton.Configuration.tinted()

// Set basic image
configuration.image = UIImage(named: "custom_icon")

// Control image placement
configuration.imagePlacement = .leading  // Image before text
configuration.imagePlacement = .top      // Image above text
configuration.imagePlacement = .trailing // Image after text
configuration.imagePlacement = .bottom   // Image below text

// Set image padding
configuration.imagePadding = 8.0

// Configure SF Symbols image
configuration.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(pointSize: 20)

Advanced Content Layout

iOS 15 also introduces subtitle support, enabling richer content layouts:

var configuration = UIButton.Configuration.filled()
configuration.title = "Main Title"
configuration.subtitle = "Subtitle Text"
configuration.image = UIImage(systemName: "gear")

// Control title alignment
configuration.titleAlignment = .leading   // Left alignment
configuration.titleAlignment = .center    // Center alignment
configuration.titleAlignment = .trailing  // Right alignment

// Set content insets
configuration.contentInsets = NSDirectionalEdgeInsets(
    top: 12, 
    leading: 20, 
    bottom: 12, 
    trailing: 20
)

Style and Appearance Customization

UIButton.Configuration offers comprehensive style control options:

Button Size Control

var configuration = UIButton.Configuration.filled()

// Predefined size options
configuration.buttonSize = .large    // Large size
configuration.buttonSize = .medium   // Medium size  
configuration.buttonSize = .small    // Small size
configuration.buttonSize = .mini     // Mini size

Corner Style Configuration

var configuration = UIButton.Configuration.gray()

// Use predefined corner styles
configuration.cornerStyle = .capsule  // Capsule style
configuration.cornerStyle = .large    // Large corners
configuration.cornerStyle = .medium   // Medium corners
configuration.cornerStyle = .small    // Small corners

// Or set specific corner radius
configuration.background.cornerRadius = 8.0
configuration.cornerStyle = .fixed    // Use fixed value

Color Configuration

var configuration = UIButton.Configuration.filled()

// Set base colors
configuration.baseBackgroundColor = .systemBlue     // Background color
configuration.baseForegroundColor = .white          // Foreground color (text and image)

Method Comparison and Selection Guidelines

The traditional setImage:forState: method suits simple image setup requirements, particularly when supporting older iOS versions. This approach is straightforward but offers limited customization capabilities.

UIButton.Configuration provides a modern solution, especially suitable for:

• Projects requiring complex button styles
• Applications supporting iOS 15 and above
• Scenarios needing unified design systems
• Buttons containing advanced content like subtitles

In practical development, consider the target audience's iOS version distribution and project design requirements when selecting the appropriate method. For new projects, prioritize UIButton.Configuration for better maintainability and extensibility.

Both methods can integrate with other button functionalities (such as target-action patterns) to ensure complete user interaction. Regardless of the chosen approach, pay attention to optimized image resource management to avoid memory issues and performance bottlenecks.