2 Sep 2018

iOS App Localization: Change app language and app design layout from inside of the app without changing device language




iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

iOS App Localization

iOS app localization, the term is almost self explanatory to most of the mobile developers. If you are not aware of app localization then with app localization, it means that an app ability to support multiple languages. Since the majority of people in this world speaks and understand their country native language and English is not their primary language. So in order to reach more audience we need to localize the app to different languages and this can be achieved using app localization. In this 
tutorial, we will earn how to localize iOS app.


Two ways to change app language 

There are two ways with which we can allow app user's to change app language

1) App language will be same as the device language(This is the default system on which iOS works). The main limitation of this approach is that if someone is not interested to change device language but he wants to change a particular app language. 

2) Change app language from inside of the app. With this technique, we can allow users of our app to switch to different languages without changing or interfering with device language. 

If you are interested in first option then please visit this post 
http://www.iostutorialjunction.com/2015/03/How-to-add-localization-to-your-IOS-app-Tutorial.html

In this tutorial, we are going to cover second option for app localization in iOS app. Please follow below steps

Steps to change app language and user interface design of the app from inside of the app, without changing device language

Step 1: Open Xcode, and create a single view application project, name it "Localization-Tutorial".

Step 2: Adding another language, English language is default development language. Follow steps as shown in images below to add other language support for the iOS app


 As we click on '+' icon a pop up will comes up with the listing of different languages, we will select 'Arabic language'. We are covering Arabic localization in this tutorial 

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

After  selecting 'Arabic' as second language that our app supports, Xcode prompts with a popup showing that its going to create Localizable.strings files for Main.storyboard and LaunchScreen,storyboard. Click on finish button.

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

At this point we have localized our app for Arabic and English languages.

Step 3: We will design a user interface for the app, our user interface for the app will look like as shown in below image.

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial


The UI(User interface) has a header label, current language label, and change language button at center of the screen.

Open main.storyboard and in ViewController's view drag a UILabel (acts as header label) and give it constraints as shown below

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial


Drag another UILabel ( acts as change language label ) just below header label  and give it constraints as shown below

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial


Finally drag a UIButton, so that we can change app language on clicking or tapping on it. Give it constraints as shown below


iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

 Step 4: Open ViewController.swift and create IBOutlet for UILabel's, UIButton we added to main.storyboard and an IBAction that will trigger language change. 



Step 5: Open Main.storyboard and connect the IBOutlet's and IBAction to respective UIControl's i.e. UILabel's and UIButton

Now we also developed user interface for the app, but there is one doubt how can we get different text for UILabel's and UIButton for both Arabic and English languages. Here come's localizable.string file for the rescue.


Localizable.strings file 

Localizable.strings files is a file where we placed translation data as a Key-value pair. To add Localizable.strings file, go to File->New->File , choose Strings File under Resource section of iOS, click Next and name it "Localizable", press Finish.

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

This will add localizable.string file to the project but this is one file and we have two languages. So, we need to localize this string file too. To localize the strings file, select Localizable.Strings file (left side pane of xcode ) and on the right side pane of xcode under "File Inspector", click localize button under Localization tab

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

On pressing Localize button, xcode will prompt with a popup, select 'Arabic' from dropdown menu  and click Localize. Now on your right hand side pane instead of Localize button you will see the image as shown below (Check mark the English checkbox if not checkmarked)

iOS App Localization: Change app language and app design layout from inside of the app without changing device language swift tutorial

 


Adding different languages strings in Localizable.strings file (English and Arabic strings)

Format supported by strings file is a "Key" : "Value" format. Key should be same in both files (i.e. in Arabic strings and in English strings file). Let us populate both strings files


Localizable.strings (English)

"header_text" = "Current Language";
"change_language" = "Change Language";


Localizable.strings (Arabic)

"header_text" = "اللغة الحالية";
"change_language" = "غير اللغة"; 


Accessing values from Localizable strings file

To access values from our localizable strings file, we can use below syntax 


Using NSLocalizedString function we can get the values for the keys  added in localizable.strings file. NSLocalizedString function requires two input parameters 
1) Key: The key for which we are  looking for the value in our localizable.strings file
2) Comment: This is for our own reference, here we can mention the key related info, mostly we left it blank. 


At this moment. if you change the language of the device to Arabic and add the above code to your ViewController.Swift file viewDidLoad function. In your console you will see that app is picking up the text from Localizable.strings file.


Changing app language from inside of the app

In order to change app language only without changing the device language, or language will changed from inside the app via providing an user language options. We have to override the default language preferences for our app and then load the app bundle as per the language in app prefrences and thus loading the correct localized values.

For changing the app language from inside of the app and reflecting the language change we will use 
"LocalizationSystem.swift" file. In this file we have different methods that set language preference for our app and load the bundle as per our language preference. Also we will get new methods for fetching the localized text from our localizable.strings file.

Step 6: Open ViewController.swift file, and add the below code



In above code, we used "LocalizationSystem" file in order to get the localized text from teh "Localizable.strings" file. In the "changeLanguage" IBAction, we will change the language as per teh current langauage. If app language is "English", we will set app language to "Arabic" and vice versa.
Finally, we reset the rootViewController of our app using a new instance of "ViewController", this is required in order to reflect the UI(user interface) changes.

Run your app and see you can now change app language form inside of the app, without changing the device language.


Where to go from here

In this tutorial, we learned about localization in iOS app and how can we change the app language from inside of the app without changing the iPhone device language form settings app of the iPhone.
You can also download the source code used in this tutorial from here Source-Code


No comments:

Post a Comment