A control that executes your custom code in response to user interactions.
- iOS 2.0+
- Mac Catalyst 13.0+
- tvOS 9.0+
When you tap a button, or select a button that has focus, the button performs any actions attached to it. You communicate the purpose of a button using a text label, an image, or both. The appearance of buttons is configurable, so you can tint buttons or format titles to match the design of your app. You can add buttons to your interface programmatically or using Interface Builder.
When adding a button to your interface, perform the following steps:
Set the type of the button at creation time.
Supply a title string or image; size the button appropriately for your content.
Connect one or more action methods to the button.
Set up Auto Layout rules to govern the size and position of the button in your interface.
Provide accessibility information and localized strings.
Responding to Button Taps
Buttons use the Target-Action design pattern to notify your app when the user taps the button. Rather than handle touch events directly, you assign action methods to the button and designate which events trigger calls to your methods. At runtime, the button handles all incoming touch events and calls your methods in response.
You connect a button to your action method using the
add method or by creating a connection in Interface Builder. The signature of an action method takes one of three forms, which are listed in Listing 1. Choose the form that provides the information that you need to respond to the button tap.
Configuring a Button’s Appearance
A button’s type defines its basic appearance and behavior. You specify the type of a button at creation time using the
init(type:) method or in your storyboard file. After creating a button, you cannot change its type. The most commonly used button types are the Custom and System types, but use the other types when appropriate.
Buttons have five states that define their appearance: default, highlighted, focused, selected, and disabled. When you add a button to your interface, it is in the default state initially, which means the button is enabled and the user is not interacting with it. As the user interacts with the button, its state changes to the other values. For example, when the user taps a button with a title, the button moves to the highlighted state.
When configuring a button either programmatically or in Interface Builder, you specify attributes for each state separately. In Interface Builder, use the State Config control in the Attributes inspector to choose the appropriate state and then configure the other attributes. If you do not specify attributes for a particular state, the
UIButton class provides a reasonable default behavior. For example, a disabled button is normally dimmed and does not display a highlight when tapped. Other properties of this class, such as the
adjusts properties, let you alter the default behavior in specific cases.
The content of a button consists of a title string or image that you specify. The content you specify is used to configure the
UIImage object managed by the button itself. You can access these objects using the
image properties and modify their values directly. The methods of this class also provide a convenient shortcut for configuring the appearance of your string or image.
Normally, you configure a button using either a title or an image and size the button accordingly. Buttons can also have a background image, which is positioned behind the content you specify. It is possible to specify both an image and a title for buttons, which results in the appearance shown in Figure 2. You can access the current content of a button using the indicated properties.
When setting the content of a button, you must specify the title, image, and appearance attributes for each state separately. If you do not customize the content for a particular state, the button uses the values associated with the Default state and adds any appropriate customizations. For example, in the highlighted state, an image-based button draws a highlight on top of the default image if no custom image is provided.
You can specify a custom button tint using the
tint property. This property sets the color of the button image and text. If you do not explicitly set a tint color, the button uses its superview’s tint color.
Use insets to add or remove space around the content in your custom or system buttons. You can specify separate insets for your button’s title (
title), image (
image), and both the title and image together (
content). When applied, insets affect the corresponding content rectangle of the button, which is used by the Auto Layout engine to determine the button’s position.
There should be no reason for you to adjust the edge insets for info, contact, or disclosure buttons.
Interface Builder Attributes
Table 1 lists the core attributes that you configure for buttons in Interface Builder.
The button type. This attribute determines the default settings for many other button attributes. The value of this attribute cannot be changed at runtime, but you can access it using the
The state selector. After selecting a value in this control, changes to the button’s attributes apply to the specified state.
The button’s title. You can specify a button’s title as a plain string or attributed string.
(Title Font and Attributes)
The font and other attributes to apply to the button’s title string. The specific configuration options depends on whether you specified a plain string or attributed string for the button’s title. For a plain string, you can customize the font, text color, and shadow color. For an attributed string, you can specify alignment, text direction, indentation, hyphenation, and many other options.
The button’s foreground image. Typically, you use template images for a button’s foreground, but you may specify any image in your Xcode project.
The button’s background image. The background image is displayed behind its title and foreground image.
Table 2 lists attributes that affect the button’s appearance.
The offsets and behavior of the button’s shadow. Shadows affect title strings only. Enable the Reverses on Highlight option to change the highlighting of the shadow when the button state changes to or from the highlighted state.
The drawing behavior of the button.
When the Shows Touch On Highlight (
When the Highlighted Adjusts Image (
When the Disabled Adjusts Image (
The line breaking options for the button’s text. Use this attribute to define how the button’s title is modified to fit the available space.
Table 3 lists the edge inset attributes for buttons. Use edge inset buttons to alter the rectangle for the button’s content.
The edge insets to configure. You can specify separate edge insets for the button’s overall content, its title, and its image.
The inset values. Positive values shrink the corresponding edge, moving it closer to the center of the button. Negative values expand the edge, moving it away from the center of the button. Access these values at runtime using the
To internationalize a button, specify a localized string for the button’s title text. (You may also localize a button’s image as appropriate.)
When using storyboards to build your interface, use Xcode’s base internationalization feature to configure the localizations your project supports. When you add a localization, Xcode creates a strings file for that localization. When configuring your interface programmatically, use the system’s built-in support for loading localized strings and resources. For more information about internationalizing your interface, see Internationalization and Localization Guide.
Buttons are accessible by default. The default accessibility traits for a button are Button and User Interaction Enabled.
The accessibility label, traits, and hint are spoken back to the user when VoiceOver is enabled on a device. The button’s title overwrites its accessibility label; even if you set a custom value for the label, VoiceOver speaks the value of the title. VoiceOver speaks this information when a user taps the button once. For example, when a user taps the Options button in Camera, VoiceOver speaks the following:
"Options. Button. Shows additional camera options."
For more information about making iOS controls accessible, see the accessibility information in
UIControl. For general information about making your interface accessible, see Accessibility Programming Guide for iOS.