Browse By

iPhone: Customize the Text of UILabel Programmatically

Hello, friends…

We have created Displaying Text in iPhone App in the previous article. Now we are going to  customize the Text of UILabel Programmatically in iPhone App.

iPhone: Customize the Text of UILabel Programmatically

We use labels to display text. Now we are going to use labels to change properties of the text we are displaying.

We can predefine text attributes such as color, font, size, alignment, background etc. Within the attribute inspector over the selected object. These attributes are ready when the application is launched. But sometimes not all the properties you want to load up. Sometimes we want to change attributes of text depending on what the user is doing in the application.


iPhone:  Customize the text of UILabel Programmatically

Following steps illustrates how to change some properties of text such as color, font, size, shadow, and alignment. Follow below steps to change text properties into iPhone app.

1. First create interface as below image by finding objects button and label.

Change Text Properties in iPhone App

2. Bring Assistant editor by pressing the button located at the upper right corner. Make sure to set it within ViewController.h

3. We need only one outlet of the label. So Ctrl + click on UILabel and drag it on the ViewController.h file. Give name as “label” to it and connect.

Change Text Properties in iPhone App

4. Perform the same operation as step 3 and make following connections by given names. Before pressing connect button make sure to set the type of the connection as Action.

  • Set Color -> setColor,
  • Set Size Font ->setSizeFont,Set Shadow -> setShadow,
  • Align Left -> alignLeft,
  • Align Center -> alignCenter and
  • Align Right -> alignRight

5. Navigate to ViewController.m file and type following line of code within the braces {code} of the action method named “setColor”

self.label.textColor = [UIColor redColor];

Here we bring textColor property of the outlet “label” and set it to red. To select a color within Xcode we use [UIColor colorname].

6. Now we are going to set size and font type that is being used. Type following line of code in the action method named “setSizeFont”.

[self.label setFont:[UIFont fontWithName: @"Verdana" size: 25]];

We type code between [] because this time we are creating UIFont and using string to set the font. The font name is written in @””. We are using system font here. A custom font can also be used. After self.label we use space because this time we set instead of adjusting the property. To bring font, we use UIFont in []. Size can be in a number. 7. To add shadow type following code of snippet in the action method named “setShadow”.

self.Label.layer.shadowColor = [[UIColor blackColor] CGColor];
self.Label.layer.shadowOpacity = 0.5;
self.Label.layer.shadowRadius = 1.0f;
self.Label.layer.shadowOffset = CGSizeMake(0, 2);

The reason we write layer after the label is because while adding shadow to the label we actually set shadow to the layer of the label.

Shadow color is same as text color except shadow works with CGColor. Shadow opacity indicates how strong the shadow appears. We can give float value according to our requirement.

The weakest is 0 and strongest is 1

How big or how much of the shadow is going to be displayed is set using radius.In shadow 0 is being the smallest but 1 is not the biggest. You can go as big as you want. The offset indicates where is the shadow is being displayed. It can be top left, underneath, bottom right etc. You can set it wherever you want it to.

CGMake is used to give it width and height respectively in the float. 0 is the center so you can use –ve or +ve values for height and width.

We can now move on to set the alignment of the text.

8. To align text type code in all alignment action methods and change left, right and center accordingly.

self.Label.textAlignment = NSTextAlignmentLeft;

We are now going to set our custom font for our label. To add a custom font we have import custom font into our project and make our project aware of it.

Following steps illustrates how to set custom fonts on UILabel.

9. Download custom font that you want to set on the UILabel and not available in the system.

Make sure that the format of the font is either .ttf or .otf. Just like we install the fonts into our system and use it in a word, we will have to import it into our project.

10. Drag and drop the font file in the folder named supporting files in our project.

11. You can see a window with options. Make sure that Add to target is selected to our project name, create groups is selected in Added folders and Copy items if needed is checked in the destination.

We check Copy  items if needed because we want the project to copy the file and paste it in the project. If it is not checked, the project will take the reference only and won’t be available when the project is out of the system.

window with options for adding files


12. Navigate to info.plist file displayed in the Project navigator. Hit enter at the last line to add new information property.

13. Type “Fonts provided by application” in the highlighted section and make sure to set the type of the property to Array.

14. Expand the property and add the new item with “string” type. Set value of the item to the imported font name with a format. This will make our project aware of the fonts from information property list. Property list should look like shown in the below image.

Property list

15. Navigate to Project Name -> Build Phases -> Copy Bundle Resources where we can verify that the font is added in the project.

When we select our label, in the Attribute inspector we can notice that the default font for the label is system 17. You can set directly by selecting the font to custom and family to our newly added custom font or perform the following step to add it manually.16: Navigate to ViewController.m file and type following lines of code in the viewDidLoad method.

16. Navigate to ViewController.m file and type following lines of code in the viewDidLoad method.

self.label.font = [UIFont fontWithName: @”BebasNeue” size: 50];

This code will be performed when the view loads up the first time. This is a great way to make application of your own and make it different from others with custom fonts.

The project is ready to build and run. It can be tested on the simulator. The output is:

iPhone: Method for Change Text Properties in iPhone App


I hope you like this article. Share your views to improve content. Please stay tune with us. In next article, we will learn how to create Tapping Game programmatically using Object C. Happy Coding !!!

Subscribe for more articles!!