Różne wersje językowe Xamarin Forms

Jak pisałem w poście o pierwszej wersji aplikacji Codziennik jedną z rzeczy, którą chciałbym widzieć są różne wersje językowe. Po eksplorowałem trochę temat jak wygląda lokalizacja językowa w Xamarin Forms, czego efektem jest ten wpis.

Okazuje się, że bardzo łatwo jest uzyskać wiele wersji językowych w Xamarin Forms. Na początku obawiałem się, że będzie trzeba robić to dla każdej platformy oddzielnie. Nie ma jednak takiej potrzeby. Wystarczy jeden dodatkowy plik per język. Całość operacji przeprowadziłem w Visual Studio, jednak z tego co się orientuję to w Xamarin Studio nie przebiega to jakoś zupełnie inaczej.

Na razie dodałem obsługę dwóch języków: Polskiego i Angielskiego. Jak cały proces wygląda w praktyce? Już pokazuję.

Utworzenie plików językowych

Na początku musimy utworzyć pliki z rozszerzeniami .resx. Ja do tego celu stworzyłem sobie oddzielny folder, który nazwałem właśnie RESX. W celu stworzenia plików, naciskamy prawym klawiszem myszy na folder/projekt i wybieramy opcję Add a następnie New Item… W otwartym oknie musimy wybrać plik typu Resources File. Ja podstawowy plik nazwałem AppResources. Teraz dla każdego języka tworzymy oddzielny plik z dopiskiem skrótu języka po kropce. U mnie dla języka polskiego będzie to zatem: AppResources.pl.resx. Dla angielskiego byłoby to: AppResources.en.resx. Chyba łapiesz strukturę?

Dodanie kluczy i wartości

Teraz czas na wyedytowanie plików językowych, które przed chwilą stworzyliśmy. Przede wszystkim należy zmienić pole Access Modifier na Public:

Należy dodawać pary klucz-wartość i ewentualnie komentarz. Wartości w kolumnie Name będziemy używać w kodzie. Natomiast kolumna Value zawiera to co pokaże się użytkownikowi. Myślę, że dobrą konwencją dla nazw jest pisanie ich po angielsku. Cały proces niestety musimy powtórzyć tyle razy ile mamy języków.

Wykorzystanie wartości w kodzie

Używanie wartości z plików .resx w kodzie trzeba podzielić na dwie części:

Pliki cs(pisane w C#)

Tutaj sprawa jest prosta. Tam gdzie wcześniej mieliśmy ustawione wartości tekstowe „na twardo” teraz wpisujemy nazwa_pliku_resx.nazwa_pola. Czyli u mnie będzie się to prezentowało dla pola Add tak: AppResources.Add. I już.

Pliki xaml

Z plikami xaml jest trochę inna historia. Najpierw w wartościach opisujących stronę należy dodać linię:

  
xmlns:local="clr-namespace:Codziennik.RESX" 

Oczywiście należy zamienić Codziennik na nazwę swojego projektu, a RESX na nazwę folderu w którym umieściliśmy pliki z tłumaczeniami. W przypadku gdy te pliki znajdują się po prostu w projekcie nie piszemy nazwy folderu w ogóle.

Teraz pod każdą wartość Text każdej kontrolki w której chcemy używać tłumaczeń należy podstawić odpowiedni string. Dla kontrolki Label będzie to wyglądało tak:

<Label Text="{x:Static local:AppResources.ChangeQuestions}" />;

Zamieniając AppResources na nazwę podstawowego pliku .resx z tłumaczeniami i ChangeQuestions na nazwę pola którego wartość chcemy widzieć w tej kontrolce jako tekst.

Wystarczy zamienić wszystkie pola tekstowe, które chcemy żeby były mulit-językowe na wartości z plików resx. Trochę roboty z tym niestety jest.

Zmiana nazwy aplikacji w zależności od języka

Ostatnim tematem jaki chciałem poruszyć w tym wpisie jest zmiana nazwy aplikacji w zależności od języka systemu. To rozwiązanie nie jest uniwersalne i należy zmian dokonać w projekcie każdej platformy. Dodatkowo na każdej z platform realizowane jest to inaczej.

Android

Dla Androida musimy stworzyć dodatkowe foldery i plik dla każdej wersji językowej. Przede wszystkim należy utworzyć plik Strings.xml w folderze Resources/values. Jego zawartość powinna być w tym schemacie:

<?xml version="1.0" encoding="utf-8"?>
<resources>
      <string name="app_name">nazwa_aplikacji</string>
</resources>

Gdzie oczywiście nazwa_aplikacji to nazwa jaką chcemy widzieć na urządzeniu dla „ogólnej wersji językowej, czyli zapewne po angielsku.

Teraz należy utworzyć folder values-skrót_języka w folderze Resources. Skrót_języka to dwie litery reprezentujące wersję językową. Dla języka polskiego nazwa folderu będzie więc taka: values-pl. Teraz należy znowu utworzyć w nim plik Strings.xml o takiej samej zawartości jak powyżej, z tym, że należy zmienić nazwa_aplikacji na nazwę aplikacji w danym języku. Kroki te trzeba wykonać dla wszystkich wersji językowych.

Aby zmiany przyniosły zamierzony skutek należy jeszcze wyedytować plik MainActivity.cs. Pod zmienną Label należy podstawić "@string/app_name" jak to jest przedstawione na poniższym screenie:

 

iOS

W iOS sprawa wygląda podobnie jak w Androidzie. W folderze Resources należy utworzyć foldery dla różnych wersji językowych o nazwie skrót_języka.lproj, gdzie skrót_języka to dwie litery reprezentujące wersję językową. Dla języka polskiego będzie to zatem pl.lproj. W każdym takim folderze należy utworzyć plik InfoPList.strings. Jego zawartość powinna być w takim schemacie:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>CFBundleDisplayName</key>
    <string>nazwa_aplikacji</string>
<key>CFBundleName</key>
    <string>nazwa_aplikacji</string>
  </dict>
</plist>

Gdzie oczywiście nazwa_aplikacji to nazwa jaką chcemy widzieć na urządzeniu dla danej wersji językowej.

Warto też zmienić nazwę aplikacji na „międzynarodową” w pliku Info.plist. Tutaj również należy zmienić wartości propertisów Bundle Name i Display Bundle Name.

To by było na tyle jeśli chodzi o wsparcie dla wielu języków w Xamarin Forms. Jeżeli chcesz wiedzieć więcej o różnych wersjach językowych w Xamarin Forms polecam oficjalną dokumentację. Jest tu bardzo dobrze opisany cały proces.

Jak zawsze kod źródłowy można znaleźć na moim Githubie w tym repozytorium. Ta wersja została oznaczona tagiem 06-app-localization. Przechodząc pod niego można zobaczyć jak wyglądał kod aplikacji Codziennik podczas pisania tego posta.