SwiftUI: Localization

Localization ile uygulamanızla bütün dünyadaki kullanıcılara hitap edin!

👋 Yeniden merhaba sevgili TurkishKit okurları! Bu yazımızda yaptığımız uygulamaların farklı bölge ve diller için nasıl yerelleştirebileceğimizi keşfediyoruz.

App Store bütün dünyada tam 175 farklı bölge ve 40 dilde kullanıcılarına hizmet veriyor. Tam da bu yüzden App Store’da yayınlayacağınız uygulamalara çoklu dil desteği eklemek oldukça önemli. Çoğu insanın kendi ana dilinde çalışan uygulamaları kullanmaktan keyif aldığı aşikar. Uygulamanızın daha fazla indirileceğinden ve App Store da daha iyi kullanıcı değerlendirmeleri alacağından bahsetmiyorum bile. 😄 Hadi artık başlayalım.

Otomatik Yerelleştirme!

Görsel: Apple Developer

İşin büyük bir çoğunluğunu kendimiz yapmamız gerekse de SwiftUI bazı ayarlamaları kendi kendine yapabiliyor!

Mesela hizalama. Uygulamanızda kullandığınız herhangi bir .leading hizalaması Türkçe bir cihazda sağa hizalarken Arapça’da sola hizalıyor. Yukarıdaki göselde fark etmiş olabileceğiniz gibi NavigationView ‘in yönü bile otomatik olarak ayarlanıyor!

Görsel: Apple Developer

Bütün bunlara ek olarak SF Symbols 3 ile birlikte artık semboller de kendilerini otomatik olarak lokalize edebiliyor, hemde siz hiçbir şey yapmadan. Oldukça havalı. 😎

Bu yıl macOS Monterey de lokalize edilmiş klavye kısayollarıyla geliyor. Eminim birçoğunuzun başına gelmiştir, eskiden Safari’de bir web sayfasını Türkçe Q klavye kullanırken klavye kısayolu ile büyütemiyordunuz. Çünkü büyütme kısayolu olan Command + kısayolunu kullanmak klavyede ayrı bir + tuşu olmadığında maalesef mümkün değildi. Artık klavye kısayolları da yine siz hiçbir şey yapmadan farklı klavye dizimleri için yerelleştiriliyor! Yani güncelleme ile artık Command : kısayolu ile Safari’de web sayfalarını büyütebileceksiniz.

Metin Yerelleştirmesi

Giriş ve Ayarlamalar

İlk adım Xcode’a uygulamanızın hangi dilleri desteklediğini söylemek. Bunun için proje dosyalarından en üst sıradaki projenizi seçin, yine hemen proje dosyalarının yanındaki listeden projenizin seçili olduğundan emin olun. Ardından yukarıdan Info seçeneğine tıklayıp Localizations listesine istediğiniz dilleri ekleyin.

Şimdiyse de bir .strings dosyası oluşturuyoruz. Bu dosya her dil için kullanacağımız metinleri ve string anahtarlarını içerecek. Sonraki adımlarda kodumuzda kullandığımız metinleri bu string anahtarlarıyla değiştireceğiz.

Her zaman olduğu gibi Command N kısayolunu kullanarak yeni dosya menüsünü açın. Strings File seçeceğini belirleyin ve dosyaya “Localizable” ismini verip kaydedin.

Ardından sağdaki kenar çubuğunu açın ve Localization başlığı altındaki Localize butonuna tıklayın. Açılan pencereden İngilizce’yi seçip onaylayın. Bu işlemin ardından Localization butonunun yerini alan listede eklediğiniz bütün dillerin yanındaki kutucukları onaylayın. Proje dosyaları listesinde Localizable.strings dosyanızı aynı bir klasör gibi genişletebiliyor ve her dil için ayrı bir versiyon görebiliyor olmalısınız.

String Anahtarları Oluşturmak

Dosyamızı oluşturduk. Şimdiyse de içine anahtarlarımızı eklememiz gerekiyor. Dosyanın İngilizce versiyonunu seçip, içine aşağıdaki gibi ilk anahtarınızı ekleyin.

“Hello” = “Hello”;

Biraz garipsemiş olabilirsiniz, ancak yukarıdakinin anlamı olduçka basit: “Hello” isminde bir anahtar oluştur ve cihaz dili İngilizceyken anahtarın değerini “Hello” yap. Anahtarın ve değerinin aynı olması Xcode projemizin İngilice olması ve kodumuzun okunabilirliğini artırmak. Başka anahtarlar eklemek isteseydik yukarıdaki formda alt satırlara ekleyebilirdik— sadece sondaki noktalı virgülü unutmayın. 🙂

Şimdi de sıra Türkçe versiyonda! Dosyanın Türkçe versiyonunu açın ve aynı anahtarı “Hello” yerine “Merhaba” değeri ile ekleyin.

“Hello” = “Merhaba”;

Bu yöntemin biraz uğraşlı olduğunu düşünüyorsanız kesinlike haklısınız! Anahtarlarınızı kodumuz içinde nasıl kullanacağımızı gördükten sonra eminim ki çok hoşunuza gidecek başka bir yönteme göz atacağız. 😉

LocalizedStringKey

LocalizedStringKey tek kelimeyle muhteşem bir veri tipi. İsminden de anlaşılacağı üzere, bu bir string anahtarı! SwiftUI görünümleri boyunca desteklenen bu veri tipi, kendisine atanılan string anahtarını alıp cihaz diline göre kullanılması gereken doğru metne çeviriyor.

Text(“Hello”)

Text görünümü LocalizedStirngKey ‘i parametre olarak kabul ettiğinden ve “Hello” bir string anahtarı olduğundan, SwiftUI .strings dosyasını tarıyor ve cihaz diline göre doğru metni Text görünümü içerisinde görüntülüyor. Yani artık bu Text , sistem dili İngilizce olan bir cihazda “Hello” metnini görüntülerken Türkçe olan bir cihazda “Merhaba” metnini görüntüleyecek.

Bazı kelimelerin farklı dillere kullanıldığı yerlere göre farklı farklı çevrilmeleri gerekebilir. Böyle durumlarda çevirmenlerin hayatını kolaylaştırmak ve yanlış çevirilerden kaçınmak için bütün anahtarlarınızın yanına aşağıdaki gibi açıklayıcı yorumlar eklemelisiniz.

Text("Welcome", comment: "Greets the user on the onboarding screen”)

Kendi oluşturduğunuz özel SwiftUI görünümlerini deLocalizedStringKey ile uyumlu hale getirmek aşırı basit! Tek yapmanız gereken String veri tipine sahip parametrelerin veri tipini LocalizedStringKey ile değiştirmek.

// Bunun yerine;
struct MyView: View {
    let textInput: String
    var body: some View { ... }
}
// Bu:
struct MyView: View {
    let textInput: LocalizedStringKey
    var body: some View {...}
}

LocalizedStringKey Olmadığında

Maalesef LocalizedStringKey SwiftUI dışında desteklenmiyor. Bunun gibi durumlarda aşağıdaki iki metodu kullanarak string anahtarlarınızı String parametresi kabul eden her yerde kullanabilirsiniz.

NSLocalizedString(“Hello”, comment: “...”)
String(localized: “Hello”) // Daha yeni!

Eş anlamlılara dikkat!

Uygulamanızda “Turkey” kelimesini kullanmanız gerektiğini düşünün. İngilizce’den başka bir dile çeviren bir çevirmen, Türkiye’den mi yoksa bir hindiden mi bahsettiğinizi bilemeyebilir. 😅

Bunu sorunu daha önceki gibi yorumlar ile çözebileceğiniz gibi “Turkey” kelimesini hem Türkiye hem de hindi anlamıyla kullanıyorsanız, aşağıdaki gibi iki ayrı anahtar oluşturmalısınız.

İngilizcede Turkey eş sesli olduğu için .string dosyamızın İngilizce versiyonu bu şekilde gözükürken;

“Turkey.country” = “Turkey”;
"Turkey.animal”  = “Turkey”;

Türkçe versiyonu bu şekilde olmalı.

“Turkey.country” = “Türkiye”;
"Turkey.animal”  = “Hindi”;

Formatlama

Standard Swift String formatlaması lokalize edilmiş metinlerde de çalışıyor! Ayrıca artık string interpolation kullanark kolayca formatlama yapılabiliyor. Aşağıdaki örnekte pil yüzdesini nasıl formatlanacağını görmekteyiz.

Localized.strings dosyası aşağıdaki gibi olmalı:

// İngilizce versiyon: “%d%%Charged” = “%d%% Charged”;
// Türkçe versiyon:    "%d%%Charged” = “%%d% Dolu”;

SwiftUI kodu da bu şekilde:

struct ContentView: View {
    @State private var bettaryPercentage = 42
    var body: some View {
        Text(“%d%%Charged”, cahrgePercentage)
    }
}

Text görünümü İngilizce bir cihazda “42% Charged” iken Türkçe bir cihazda “%42 Dolu” metnini görüntüleyecektir. “%” Sembolünün yerine dikkat edin! 😄

Yerelleştirmeleri İçe ve Dışa Aktarma

Şimdiye kadar sizden bir sır saklıyordum, artık açığa çıkarmanın vakti geldi.😄 Swift derleyicisi artık kodunuzda kullandığınız string anahtarlarını — formatlanmış olanlar dahil — derleyiciyi kullanarak tespit edip siz hiç .strings dosyası oluşturmadan her dil için çeviriye hazır birer dosya oluşturabiliyor. Çeviri bittikten sonra dosyaları içeri aktarmanız yeterli. Yine oldukça havalı, değil mi? 😎

Hadi minik bir örnekle deneyelim! Bunun için Xcode 13 ya da üstüne ihtiyacınız olacak.

Aşağıdaki aşırı basit görünümü yazarak başlayalım.

struct ContentView: View {
    var body: some View {
        VStack {
            Text(“Hello World”, comment: "Ordinary Hello World :)")
            Text(“Hello TurkishKit”, comment: "TurkishKit will not be translated.")
            Text(verbatim: "TurkishKit") // Bu çeviriye dahil değil!
        }
    }
}

Text(verbatim: "...") şeklinde yazdıklarınız çeviriye dahil edilmeyecektir. Kullanıcı arayüzlerinize eklemek istediğiniz örnek veriler için oldukça kullanışlı.

Şimdi menü çubuğundaki Product menüsünden Export Localizations komutunu kullanarak yerelleştirme dosyalarınızı dışarı aktarabilirsiniz!

Dışarı aktarılan klasörün içine baktığınızda her dil için .xloc uzantılı bir dosya bulacaksınız. Metinlerimiz zaten İngilizce olduğundan şimdilik o dosya üzerinde düzenleme yapmaya ihtiyacımız yok. Şimdi tr.xloc dosyasını açıp çeviri yapalım.

Dosyayı ilk açtığınızca CFBundleName anahtarı ile karşılaşacaksınız. Türkçe çevirisini “Turkish” sütununun altına yazdıktan sonra sağdaki dosya listesinden Localizable.strings dosyasını açın.

Turkish.xloc

Tabloda yine “Turkish” yazan sütunu çevirilerimiz ile doldurup dosyayı kaydetmemiz gerek. Sağ kısımda ise kodda eklediğimiz yorumları görüyoruz — bu siz ve çevirmenleriniz için oldukça kullanışlı.

Turkish.xloc — Çeviri Sonrası

Çeviri işlemi tamamlandıktan sonra Product menüsünden hemen Export Localizations komutunun altındaki Import Localizations komutunu kullanarak .xloc doyalarınızı içeri aktarın. Xcode size değişiklikleri ve varsa hataları incelemeniz için fırsat tanıyacaktır. Dosyalarınızı onayladıktan sonra işlem tamamlanıyor.

Ölçü Birimleri

Measurement veri tipi ile oluşturduğunuz ölçüm değişkenleri, kullanıcının cihazının bölgesine göre otomatik olarak formatlanıyor. Ölçü birimi formatlaması eskiden oldukça karmaşık hale gelebiliyordu, neyseki iOS 15 ile artık çok daha kolay. Aşağıda kullanıcının tercihine göre formatlanmış bir hava sıcaklığı metni örneği yapıyoruz.

struct ContentView: View {
    // 32 Celcius değerine sahip hava sıcaklığı değişkeni:
    let temperature = Measurement<UnitTemperature>(
    value: 32, unit: .celsius)
    var body: some View {
        VStack {
            Label(“Temperature: \(temperature, format: .measurement(width: .abbreviated, usage: .weather))”, systemImage: “thermometer”)
        }
    }
}

Benim Scheme konfigürasyonumun bölgesi ABD olduğundan gördüğünüz üzere sıcaklık Fahrenheit cinsinden gösteriliyor. Bir sonraki adımda bunu nasıl düzenleyeceğimizi göreceğiz.

Uygulamanızı Başka Bölge ve Dillerde Test Etmek

Şimdiye kadar uygulamalarımız fakrlı dil ve bölgeler için yerelleştirmek edebilmek için birçok şey yaptık, ama bunları hiç test etmedik. Uygulamanızın yerelleştirmelerinde herhangi bir sorun olmadığından emin olmak için mutlaka farklı dil ve bölgelerde test etmelisiniz.

SwiftUI Önizlemeleri

SwiftUI önizlemelerini farklı bölgelerde çalıştırarak arayüzünün her dilde iyi göründüğünden emin olmak gerçekten oldukça pratik. Ancak eklemeliyim ki bu yöntem bir sonraki adımda yapacağımız Scheme düzenlemesinin yerine geçemez. Bunu daha basit bir ek yöntem olarak düşünün. 🙂

İhtiyacımız olan tek şey önizlemelerimize basit bir niteleyici ile istediğimiz dil/bölge kodunu uygulamak.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.locale, .init(identifier: “en_US”))
    }
}

Yukarıda en_US kodu ile “İngilizce, ABD” yerelleştirmesini uyguladık. Eğer “İngilizce, Bükük Britanya” yerelleştirmesini isteseydik en_GB kodunu kullanırdık. Türkçe için de tabii ki de tr. 🙂 Bu bölge kodlarının tam listesine buradan ulaşabilirsiniz.

Scheme Düzenlemesi

Scheme düzenlemesi ile projenizi Simulator ya da kendi cihazınız üzerinde test ederken sistem ayarlarının aksine sizin belirlediğiniz bölge/dil ayarlarını kullanmasını sağlayabilirsiniz.

Mesela “İngilizce, ABD” lokalini kullanan bir Scheme ekleyelim. Sıklıkla kullandığımız Simulator seçim menüsünün sağında uygulamanızın isminin üstüne tıklayın ve açılan menüden New Scheme komutunu seçin. Varsayılan ismin yanına “ — English, United States” metnini ekleyin ve onaylayın.

Şimdi de Scheme ayarlarını düzenlemeliyiz. Az önce oluşturduğumuz Scheme’in ismine tıklayıp yine az önceki menüyü açın, ve bu sefer Edit Scheme komutuna tıklayın. Yukarıdan Options seçeneğini belirleyin. Ardından listede App Language ve App Region değerlerini uygun şekilde düzenleyin.

İhtiyacınız olduğunda yeni “Scheme” ekleyip, bu menüden uygulamanızı çalıştırmak istediğiniz “Scheme”i seçebilirsiniz.

Bizden şimdilik bu kadar! Burada öğrendiklerinizle bütün dünyanın kolayca kullanabileceği uygulamalar geliştirmeniz dileğiyle… 🙂

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook