Working With Localization and Internationalization in swift
Working With Localization in swift
Environment
Apple Swift version 2.1.1 (swiftlang-700.1.101.15 clang-700.1.81)
Xode 7.1
iOS 9
Targets
User should be able to use another language from within the app.
Layout should responds to the change (RTL(Right to Left)/LTR(Left to Right)).
Using built in xliff generator.
StoryBoard with Base localization and .String compliments “no multiple story boards” .
simplicity.
I will use English and Arabic here, since English is LTR and arabic isRTL.
Project Setup
STEP ONE
Create new fresh Xcode project. Lets Name it Localization102
New single View Application
figure (1–3)
STEP TWO
Click on project file from the navigation area as in figure(1–3). SelectLocalization102 under PROJECT,figure(2–1).
figure(2–1)
Click on the plus sign under Localizations and add Arabic(ar), you will get screen listing files to be localized. click finish.
STEP THREE (Adding UI)
Lets add some UI elements in the storyboard to test with. We will have a UILabel, UIButton to switch language, UIImageView, UIButton for navigation, 2 UIViewControllers and one UINaviationcontroller.
Go to Main.Storyboard and From Object Library add a navigation controller and another UIViewController, set the UIViewController of class ViewController as the root of the navigation controller. Set the Navigation Controller as Initial View Controller from the Attribute Inspector.
They should look like figure(3–1).
figure(3–1)
figure(3–2)
Then add UILabel, an imageView, two buttons as in figure (3–2).
Its better to use an arrow image to test flipping effect when we go from RTL To LTR and vice versa. I am going to use this ARROWimage.
STEP 4 (Localizing the Storyboard)
Now we have setup up our layout, lets localize it. First Click on the main.storyboard file and in the Utility Area -> file inspector -> Localization,
uncheck the Arabic box, you will get this message
Click remove.Then go to the same box again and check it again, you will get this message.
Click on Replace file, since we need to add the updated UI Objects we added to the storyboard.
Now Take a look at the main.storyboard(Arabic) file. it should look like this.
Before localization
After localization
First View in Arabic
Lets test the arabic version . From the Toolbar -> scheme -> edit Scheme ->Run -> options -> Application language -> chooseArabic.
Run the app
Verify that you get the arabic translation screens.
in order to get back to the english we can revert back and from Application Languagechoose English. Note that System Language means it depends on the language of the OS chosen by the user. but of course instead of going to the setting app and change the language we can always change that from thescheme for testing, as we did.
second View in Arabic (note the back button is on the right)
The text in the label apparently is flipped, because by default it’s TextAlignment is Natural(depends on the direction of the language), so its RTL now.
STEP 5 (Switch language)
Lets implement the switch language button so we changes the language not from theScheme but from our app.
Create a Method and name itswitchLanguage, and connect it to the switch Language button in the MainView.
@IBAction func switchLanguage(sender: UIButton) {
}
Reset the Application Language from Scheme to System Language.
Lets code
To be able to modify the current Language set by the user we need to use the “AppleLanguages” global key.
Add this class
// constants
let APPLE_LANGUAGE_KEY = “AppleLanguages”
/// L102Language
class L102Language {
/// get current Apple language
class func currentAppleLanguage() -> String{
let userdef = NSUserDefaults.standardUserDefaults()
let langArray = userdef.objectForKey(APPLE_LANGUAGE_KEY) as! NSArray
let current = langArray.firstObject as! String
return current
}
/// set @lang to be the first in Applelanguages list
class func setAppleLAnguageTo(lang: String) {
let userdef = NSUserDefaults.standardUserDefaults()
L102Language is responsible for getting/setting language from/in the UserDefaults.
Add these lines into the switchLanguage Method
if L102Language.currentAppleLanguage() == “en” {
L102Language.setAppleLAnguageTo(“ar”)
} else {
L102Language.setAppleLAnguageTo(“en”)
}
We check if the language is english then set it to be arabic and vice versa.
Lets try the app, build and run then tap on the switch language button.
Restart the app and you should be seeing the arabic version of our app.
“ you might not get the language switched in the second run, just try again. don’t worry its not a bug.”
So now we managed to change the language and provide localizable storyboard, but we have 2 main issues .
we need to restart the app.
UI Elements are not flipped to the right when language is Arabic.
ISSUE #1
If you go to the project directory in Finder you will find folders named like this “ar.proj” and inside them the localized resources.
When the app run and the System Language is Arabic(ar) the ar.proj bundle is used whenever the app asks for a localized resources. and so with other languages.
A bundle is a directory with a standardized hierarchical structure that holds executable code and the resources used by that code.[apple]
So we need to switch ‘lproj’ bundle in order to get it it localized without restarting the app.
One way to do that is through Swizzling, in order to use this technique we need to look for the method used to localize any string and change its implementation to consider our language preferences.
Note that bundles have direct effect in localization so we can look at NSBundle methods, we can find now that This method ->
we exchange the implementation of “localizedStringForKey:value:table:” with our “specialLocalizedStringForKey:value:table:”, passing the class which isNSBundle(.self to reference the object type).
we get the preferred language.(e.g. en)
we check if there is a bundle for that language (e.g. en.lproj), if not we user Base.proj, and we get store a reference in bundle var.
we use localizedStringForKey:: method to return the localized method, note in swizzling we exchange the IMPlementation not the reference on the function, hence calling this method will use the original implementation of localizedStringForKey:: Method.
Now add this line in the Appdelegate in the didFinishLaunchingWithOptions delegate method.
L102Localizer.DoTheSwizzling()
OK NOW BUILD AND RUN :)
On the main screen Tap on “Switch button”.
Yeah nothing happened 😂
To solve this we need to reload our viewControllers . to do that add these lines at the end of the “switchLanguage” method, and in the Main.storyboard set the StoryboardId for the navigation controller to be “rootnav” .
let rootviewcontroller: UIWindow = ((UIApplication.sharedApplication().delegate?.window)!)!
Now it should be working , when we switch the language, all the strings are changed with respect to the selected language.
Switching
SUM UP
Now we found a way to localize our storyboard, change the language, and update UI in runtime.
Next
in iOS9 the semantic changes as well depending on the language, but ! it happens only on the entrance of the app Just like bundle in issue#1.
Another issue is textAlignment in UILabel,TextField,TextView do not change automatically.
UIImages do not get flipped Automatically as well.
As you see in our project the UI Elements do not flip as well.
what about numbers!!!
AutoLayout
Autolayout not only help us building our Interface to adapt many screens, but also can help us in positioning the views correctly regarding the Language Direction, it does that by flipping the right and left Attributes of UILayoutConstraint. so what is a left Attribute in english is right attribute in arabic and so.
So Let add some constraints to our UI first.
BUILD AND RUN, tap on switch language button, close the app, run it again. You will see that the layout has been flipped.
ISSUE #2 (Mirroring)
As I mentioned above One of the main issues is the textAlignment, notice that setting the alignment as Natural in the Interface building for our UILabel does not flip the Text!!.
Mirroring User interface is part of internationalizing the app.
To solve that go to ViewController.swift and in switchLanguage Method update the if condition to look like this .
in iOS9 we can force the semantics from the appearance. :) (we will get to how to make it work on iOS8 later )
run and try , you should get a result like this.
After forcing the semantics
So the now the Views are flipping and texts are correctly aligned! and thats all on runtime!!
UIImageView (Mirroring) (1)
You can see that the arrows are not flipping correctly. our custom image is not going to flip even after restarting the app, but the Back Navigation Bar button arrow IS flipped after restarting the app.
First Lets Mirror out own custom arrow image, for that we can use
public init(CGImage cgImage: CGImage, scale: CGFloat, orientation: UIImageOrientation)
initializer.
To make it more dynamic, instead of flipping each image a side, I created a superViewController that loops through its subViews and when it fins an image it flip it if the its tag is less than 0 .
So lets create new UIViewController and Name it MirroringViewController .
And modify our ViewController to be a subClass of MirroringViewController.
2) we call this function recursively to make sure we cover all subView.
This will not work on UITableView cells subViews. So you need to flip the cell images if needed inside the UITableView delegate.
UIImageView (Mirroring) (2)
Now lets solve the navigation back button arrow.
our loop Method did not work because the navbar is not a subView of our ViewController. UIBarbuttonItem /UINavigationItem are not of UIView type so we can’t reach them hierarchaly .
for that we need to use the userInterfaceLayoutDirection computed property in UIAplication class, as we know each app has one single UIApplication instance or a subclass of it , this instance has a big role in any app. one thing that interest us is the userInterfaceLayoutDirection.
This method specifies the general user interface layout flow direction
One way to update its implementation is by subclassing the UIApplication by adding main.swift file , and adding this line
var cstm_userInterfaceLayoutDirection : UIUserInterfaceLayoutDirection {
get {
var direction = UIUserInterfaceLayoutDirection.LeftToRight
if L102Language.currentAppleLanguage() == “ar” {
direction = .RightToLeft
}
return direction
}
}
}
This method simply will check what is the language we are using and if it RTL we return .RightToLeft .
Lets celebrate by a successful run :)
as I noted userInterfaceLayoutDirection is called for every UIView whenever the view is updated or created. so we should not add a big time consuming functionality in it.
from now on we can use UIApplication.sharedApplication().userInterfaceLayoutDirection
to check the direction of the app.
iOS8
As it mentioned above you can’t useUIView.appearance().semanticContentAttribute
in iOS 8, so lets remove those lines and run the app.
switch the app and go to next control and so, you will notice that the UILabel textAlignment is not aligned correctly on one of the languages unless you restart the app of course.
One way to solve it, is by creating Custom UILabel, lets call itMirroringLabel
Set the UILabel Class to be MirroringLabel and the tag to be -1.
inside MirroringLabel class, we need to override the layoutSubViews method , add these lines :-
override func layoutSubviews() {
// check if its already correctly aligned
if self.tag < 0 {
if UIApplication.isRTL() {
if self.textAlignment == .Right {
return
}
} else {
if self.textAlignment == .Left {
return
}}}
// if not align it based on the Direction , check first if the tag is less than 0 (which means we want this label to be directional not for example centered)
if self.tag < 0 {
if UIApplication.isRTL() {
self.textAlignment = .Right
} else {
self.textAlignment = .Left
}}
}
and add this helper method in UIApplication extensions inside L102Localizer.swift
ok now, lets run again. you should be able to get the right behavior.
For UITextField, UITextView its the same story add a superclass for them and update the tags to be less than 0 (btw, this less than 0 thing can be anything you want. its just a criteria to determine if a UIView should flip its content or not)
Localizable.String
So we could localize the storyboard Texts, what about the dynamic strings we add in code/programatically or maybe you don’t even use storyboard.
its simple we need to add a Strings file and name it Localizable.string
Press CMD + N
under iOS -> Resource -> Choose Strings File
Name it Localizable and create
Click on the created file and from File Inspector, click on the Localize… button
When the “Do you want to localize this file?” window shows, click localize.
Check the Arabic option box.
you will get this look
We don’t need to add anything for now, lets do it in a nicer way.
As promised we will use the built in export/import xliff files feature in xcode.
Before that lets create another UILabel and connect it as an outlet in our ViewController, lets call it programmaticallylocalizedLabel (yeah long name but suitable), add this line at the start of ViewController.
@IBOutlet weak var programmaticallylocalizedLabel: UILabel!
Create a UILabel in the storyBoard, name it anything, and connect it to the outlet . Just make sure the tag is less than 0.
In ViewDidLoad() add this line
self.programmaticallylocalizedLabel.text = NSLocalizedString(“localize me please”, comment: “Localize me Label in the main scene”)
Its always a good idea to add a useful comments or Notes so the guy or you later understand what and why this text should be localized.
ok now The fun .
XLIFF Export/Import
Click on the blue project Under the project Navigator and then click onEditor from the Menu
Now Click on Export For Localization .
you can chose an existing Translations or Development Language Only
since we want to translate Arabic lets not change anything and click on save.
In The finder you will find the file named ar.xliff
No comments:
Post a Comment