When internationalizing, you ask the instance of NSLocale questions. But the NSLocale only has a few region-specific variables. This is where localization comes into play: Localization is the process by which application-specific substitutions are created for different region and language settings.

Localization usually means one of two things:

Any resource, whether it is an image or a XIB file, can be localized. Localizing a resource puts another copy of the resource in the application bundle. These resources are organized into language-specific directories, known as lproj directories. Each one of these directories is the name of the localization suffixed with lproj. For example, the American English localization is en_US: where en is the English language code and US is the United States of America region code. (The region can be omitted if you do not need to make regional distinctions in your resource files.) These language and region codes are standard on all platforms, not just iOS.

When a bundle is asked for the path of a resource file, it first looks at the root level of the bundle for a file of that name. If it does not find one, it looks at the locale and language settings of the device, finds the appropriate lproj directory, and looks for the file there. Thus, just by localizing resource files, your application will automatically load the correct file.

One option is to create separate XIB files and to manually edit each string in this XIB file in Xcode. However, this approach does not scale well if you are planning multiple localizations. What happens when you add a new label or button to your localized XIB? You have to add this view to the XIB for every language. This is not fun.

To simplify the process of localizing XIB files, Xcode has a feature called Base internationalization. When it is enabled for the project, Base internationalization creates the Base.lproj directory which contains the main XIB files. Localizing individual XIB files can then be done by creating just the Localizable.strings files. It is still possible to create the full XIB files, in case localization cannot be done by changing strings alone. However, with the help of Auto Layout, strings replacement may be sufficient for most localization needs.

In this section, you are going to localize one of Homepwner’s interfaces: the BNRDetailViewController.xib file. You will create English and Spanish localizations, which will create two lproj directories, in addition to the base one. Normally, you would first enable Base Internationalization in the project Info settings. However, as of this writing, there is a bug in Xcode that will not let you enable that option until at least one XIB file is localized.

So, start by localizing a XIB file. Select BNRDetailViewController.xib in the project navigator. Then, show the utility area.

Click the tab in the inspector selector to open the file inspector. Find the section in this inspector named Localization and click the Localize... button (Figure 25.4).

Figure 25.4  Localizing BNRDetailViewController.xib, beginning

Select English. This signifies to Xcode that this file can be localized, automatically creates en.lproj, and moves the BNRDetailViewController.xib file to it.

Now you need to enable Base Internationalization. Select the project file as shown in Figure 25.5. Make sure you select the project Homepwner, and not the target Homepwner.

Figure 25.5  Selecting Project Info

In the bottom section of the Info tab of the project, locate the Use Base Internationalization checkbox in the Localizations section and check it. You will see the prompt to select which files will be used to create the Base localization; the table will consist of just BNRDetailViewController.xib and English will be listed as the reference language. Click Finish.

This will create the Base.lproj directory and move BNRDetailViewController.xib to it.

Click the + button under the list of languages and select Spanish. In the dialog, you can uncheck the InfoPlist.strings files and only keep the BNRDetailViewController.xib file checked. Make sure that the reference language is Base and the file type is Localizable Strings. Click Finish. This creates an es.lproj folder and generates the BNRDetailViewController.strings in it that contains all the strings from the base XIB file. The Localizations configuration should look like Figure 25.6.

Figure 25.6  Localizations

Look in the project navigator. Click the disclosure button next to BNRDetailViewController.xib (Figure 25.7). Xcode moved the BNRDetailViewController.xib file to the Base.lproj directory and created the BNRDetailViewController.strings file in the es.lproj directory.

Figure 25.7  Localized XIB in the project navigator

Select the BNRDetailViewController.xib. It does not matter if you select the top level one or the one marked Base. The file inspector should look like Figure 25.8.

Figure 25.8  Localizing BNRDetailViewController.xib, result

In the project navigator, click the Spanish version of BNRDetailViewController.strings. When this file opens, the text is not in Spanish. You have to translate localized files yourself; Xcode is not that smart.

Edit this file according to the following text. The numbers and order may be different in your file, but you can use the text field in the comment to match up the translations.

/​*​ ​C​l​a​s​s​ ​=​ ​"​I​B​U​I​L​a​b​e​l​"​;​ ​t​e​x​t​ ​=​ ​"​S​e​r​i​a​l​"​;​ ​O​b​j​e​c​t​I​D​ ​=​ ​"​J​k​L​-​n​P​-​h​3​R​"​;​ ​*​/​
"​J​k​L​-​n​P​-​h​3​R​.​t​e​x​t​"​ ​=​ ​"​N​u​m​é​r​o​ ​d​e​ ​s​e​r​i​e​"​;​

/​*​ ​C​l​a​s​s​ ​=​ ​"​I​B​U​I​L​a​b​e​l​"​;​ ​t​e​x​t​ ​=​ ​"​L​a​b​e​l​"​;​ ​O​b​j​e​c​t​I​D​ ​=​ ​"​Q​5​n​-​B​c​-​7​I​H​"​;​ ​*​/​
"​Q​5​n​-​B​c​-​7​I​H​.​t​e​x​t​"​ ​=​ ​"​L​a​b​e​l​"​;​

/​*​ ​C​l​a​s​s​ ​=​ ​"​I​B​U​I​L​a​b​e​l​"​;​ ​t​e​x​t​ ​=​ ​"​N​a​m​e​"​;​ ​O​b​j​e​c​t​I​D​ ​=​ ​"​q​z​L​-​F​n​-​q​c​h​"​;​ ​*​/​
"​q​z​L​-​F​n​-​q​c​h​.​t​e​x​t​"​ ​=​ ​"​N​o​m​b​r​e​"​;​

/​*​ ​C​l​a​s​s​ ​=​ ​"​I​B​U​I​L​a​b​e​l​"​;​ ​t​e​x​t​ ​=​ ​"​V​a​l​u​e​"​;​ ​O​b​j​e​c​t​I​D​ ​=​ ​"​r​h​E​-​7​e​-​o​T​E​"​;​ ​*​/​
"​r​h​E​-​7​e​-​o​T​E​.​t​e​x​t​"​ ​=​ ​"​V​a​l​o​r​"​;​

/​*​ ​C​l​a​s​s​ ​=​ ​"​I​B​U​I​B​a​r​B​u​t​t​o​n​I​t​e​m​"​;​ ​t​i​t​l​e​ ​=​ ​"​I​t​e​m​"​;​ ​O​b​j​e​c​t​I​D​ ​=​ ​"​u​N​g​-​w​M​-​Z​c​r​"​;​ ​*​/​
"​u​N​g​-​w​M​-​Z​c​r​.​t​i​t​l​e​"​ ​=​ ​"​I​t​e​m​"​;​

Notice that you did not change the Label and Item text because those strings will be replaced programmatically at runtime. Save this file.

Now that you have finished localizing this XIB file, let’s test it out. First, there is a little Xcode glitch to be aware of: sometimes Xcode just ignores a resource file’s changes when you build an application. To ensure your application is being built from scratch, first delete it from your device or simulator. (Press and hold its icon in the launcher. When it starts to wiggle, tap the delete badge.) Relaunch Xcode (yes, exit and start it again). Then, choose Clean from the Product menu. Finally, to be absolutely sure, press and hold the alt/option button while opening the Product menu and choose Clean Build Folder.... This will force the application to be entirely re-compiled, re-bundled, and re-installed.

Homepwner’s detail view will not appear in Spanish until you change the language settings on the device or simulator. In Settings, change the language settings to Español (General → International → Language) and then relaunch your application. Select an item row, and you will see the interface in Spanish. However, the labels are being cut off (Figure 25.9).

Figure 25.9  Spanish BNRDetailViewController.xib, before and after layout fix

Fortunately, thanks to Auto Layout, this is an easy one to fix. Open the BNRDetailViewController.xib file and select the name label. In the utility area, select the size inspector (the tab) and locate the width constraint. Currently, the width is set to be equal to 55, which is too short for the longer Spanish labels. Click on the drop-down next to the gear button of the width constraint and choose Select and Edit.... Change the relation from Equal to Greater Than or Equal.

Now, you will fix the widths of the serial number and value labels. Select the serial number label and locate its width constraint. Instead of editing it, just delete it. You want the text fields to be of the same size and the way to achieve this is to make the labels the same widths. After you deleted the width constraint, control-click on the serial number label and drag to the name label. In the menu, select the Equal widths item. Repeat the same steps for the value label. Build and run the application. This time, the text fields will resize to make space for the labels, so that they will not be cut off.