iOS: Button
It’s a control that lets the user communicate with the program. It serves as the catalyst for user-performed events. In reaction to user inputs, it runs the customized code.
class UIButton : UIControl
One of the most crucial components of iOS applications are the buttons. When a user interacts with a button, certain actions are connected to that button. The iOS application can have the button added programmatically or through the interface builder.
The button is added to the application, and then the following actions are taken.
1.Locate the button by searching through the object collection, then drag the outcome onto the storyboard.
2.When the button is created, provide its kind.
3.Configure the button’s title string or picture.
4.Determine the button’s dimensions based on its contents.
5.Establish the button’s limits to control its size and placement on various device sizes.
Example
In order to enable the button to respond to touch events, let’s build a very basic example in which we add a button to our project and define its action method in the View Controller class file.
Main.storyboard
In this example, we will add a button to the storyboard and use the attribute inspector’s attributes to give it a background color, font size, and title label.
Action Connection
We must attach an action of the button object in the ViewController class file in order to execute any action on the button tap. In this project, the button touch up inside event will alter the main view’s backdrop color.
ViewController.class
import UIKit
class ViewController: UIViewController {
@IBOutlet var mainView: UIView!
var didTap = true
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func changeBtnTapped(_ sender: Any) {
if(didTap)
{
mainView.backgroundColor = .orange
didTap = false
}
else{
mainView.backgroundColor = .groupTableViewBackground
didTap = true
}
}
}
Output
Configuring Button Appearance
The look and behavior of a button are determined by its kind. The storyboard file or the init(type:) function can be used to define the button type. There are two varieties of buttons: Custom and System.
Button States
Five states are possible for buttons.
Default
Until the user interacts with the button, it stays in its default state after it is first added to the UIView. As the user plays with the button, the status shifts to different values.
Highlighted
The button changes to the highlighted state when the user taps it.
focused
When the user’s focus is applied to the button, it becomes focused. It is possible to alter the focused state button’s appearance so that it looks different from the selected or focused state.
Selected
The button’s look or functionality are unaffected by this status. Nonetheless, other controls, like as the UISegmentedControl class, can alter their appearance by using this state. We may use the isSelected property to acquire and set this value.
Disabled
When we don’t want the user to engage with the button, we might need to disable it. The isEnabled property can be used to set and retrieve this status.
Content
The button’s content tells the user how the button will behave. In iOS applications, a button’s content can be indicated by its title label text or by a background image. In order to control the button’s content, we might need to set up the UILabel and UIImageView classes.
Using the button object’s titleLabel or imageView properties, we may retrieve the button’s content.
Interface Builder Attributes
| SN | Attribute | Description |
|---|---|---|
| 1 | Type | It represents the button type, which cannot be changed at runtime. It can only be set at the time of button creation. It is accessed by using buttonType property. |
| 2 | State Config | It is the state selector of the button. It defines the state of the button so that the changes can be applied to that state only. |
| 3 | Title | It is the title of the button, which can be a plain string or an attributed string. |
| 4 | Tint, font, and attribute | These attributes are applied to the button title string like tint color, font, text color, shadow color, etc. |
| 5 | Image | It is the button’s foreground image. |
| 6 | background | It is the button’s background image. It is displayed behind the title and the foreground image. |
Appearance Attributes
| SN | Attribute | Description |
|---|---|---|
| 1 | Shadow Offset | It is the shadow offset applied to the button title strings. This attribute can be set at runtime by using shadowOffset property on the titleLabel of the button. |
| 2 | Drawing | It represents the drawing behavior of the button. In interface builder, we can set three options i.e., showTouchWhenHighlighted, adjustImageWhenHighlighted, and adjustImageWhenDisabled. |
| 3 | Line Break | It is the line break mode of the button title label. |
Edge Inset Attributes
| SN | Attribute | Description |
|---|---|---|
| 1 | Edge | It is the edge insets to configure. We can set the separate edge insets to the overall content of the button. |
| 2 | Inset | It represents the inset values. These values can be accessed by using contentEdgeInsets, titleEdgeInsets, and imageEdgeInsets property. |
