How To Change Swift Button Title Text, Background Color, Size, Position In Main Storyboard Use Xcode Attributes Inspector

When you develop the iOS app in swift, you can create and set UI component’s attributes both in swift source code and use Xcode attributes inspector. We have learned how to do it programmatically in the article How To Create Multiple Button And Add Button Action Function Programmatically In iOS Swift, this article will tell you how to do it visually with Xcode Attributes Inspector. To make things simple, we choose the swift button as an example.

1. How To Add Swift Button From Xcode Library.

1. When you add a swift button programmatically, you need to create an instance of UIKit.UIButton class and then set it’s properties ( such as title text, text color, text font, button background color, etc ) in source code also.

   let btn = UIButton(type: UIButton.ButtonType.system)

2. To make the above process visually, you can drag the swift button from Xcode UI Library and then drop it to the Main.storyboard file’s screen view. You can read the article How To Display Xcode Library, Assistant Editor, Inspectors Window to learn more.

2. How To Change Swift Button Attribute In Attributes Inspector.

2.1 Display Xcode Attributes Inspector Pane.

1. Before start, select the button component, then click View —> Inspectors —> Show Attributes Inspector menu item at Xcode top menu bar to display the Attributes Inspector pane at Xcode project right side.
2. Then you can change the iOS button attributes ( such as title text, text color, text font, button background color, etc ) in the Xcode Attributes Inspector pane.

2.2 Change Button Title Text.

1. In the Button area, input button text in the text box under Title attribute. You can see the button text is changed immediately in the screen view.
2. You can also input mac os emoji text in the input text box. To do this, press Control + Command + Space key at the same time to popup mac os emoji select panel, then select one emoji to input it in the button title text box.

2.3 Change Button Title Text Color.

1. In the Button area,  select the text color in the Text Color drop-down list. You can select a customized color in the popup color pane.

2.4 Change Button Title Text Font.

1. In the Button area, click the T icon after Font field, then you can select text font and size.

2.5 Change Button Background Color.

1. In the View area, select the button’s background color from the Background drop-down list.

3. How To Change Swift Button Size & Position.

1. To change button size and position, you should first open the Xcode Size Inspector pane by click View —> Inspectors —> Show Size Inspector menu item at Xcode top menu bar.
2. In this example, we want to make the button width full fill the screen width, make the button height as 30, and make the button center located at the screen center.

3.1 Change Swift Button Size ( Width & Height ).

1. Input button Width & Height value in View area, the X & Y value is the button top left point’s location.
2. If you want to make the button’s width fully fill the screen width, please click Fill Container Horizontally drop-down item in Arrange —> Position View drop-down list.
3. If you want to make the button’s height fully fill the screen height, click Fill Container Vertically in Arrange —> Position View drop-down list.

3.2 Change Swift Button Center Position.

1. You can make the button’s center locate at the screen center, to do this, just click Arrange —> Position View —> Center Horizontally In Container drop-down menu item, this will make the button center locate at screen horizontal center. Click the Center Vertically In Container drop-down item to make it’s center position located at screen vertical center.