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

When you develop 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 learnt how to do it programmatically in 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 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 above process visually, you can drag swift button from Xcode UI Library and then drop it to Main.storyboard file’s screen view. You can read 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.

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.

xcode display attributes inspector pane at xcode right side

2.2 Change Button Title Text.

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

display mac os emoji panel to select emoji to input text box

2.3 Change Button Title Text Color.

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

2.4 Change Button Title Text Font.

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

2.5 Change Button Background Color.

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

3. How To Change Swift Button Size & Position.

To change button size and position, you should first open Xcode Size Inspector pane by click View —> Inspectors —> Show Size Inspector menu item at Xcode top menu bar. 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 screen center.

3.1 Change Swift Button Size ( Width & Height ).

xcode size inspector window

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

3.2 Change Swift Button Center Position.

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 locate at screen vertical center.

0 0 votes
Article Rating
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x