Ekran Yönlendirmesinde Uzmanlaşma: Cihaz Döndürme Yönetimi İçin Kapsamlı Bir Rehber

Günümüzün çok cihazlı dünyasında, olumlu bir kullanıcı deneyimi sağlamak için ekran yönlendirmesini zarif bir şekilde yönetmek çok önemlidir. Akıllı telefon, tablet ve hatta katlanabilir bir cihaz olsun, kullanıcılar cihazlarını döndürdüklerinde uygulamaların sorunsuz bir şekilde adapte olmasını bekler. Bu rehber, uygulamalarınızın duyarlı ve kullanıcı dostu olmasını sağlamak için çeşitli platformları ve teknikleri kapsayan, cihaz döndürme yönetimine kapsamlı bir genel bakış sunar.

Ekran Yönlendirmesini Anlamak

Ekran yönlendirmesi, içeriğin bir cihazın ekranında görüntülendiği yönü ifade eder. İki ana yönlendirme şunlardır:

• Dikey (Portrait): Ekran, genişliğinden daha uzundur. Bu, akıllı telefonlar için tipik yönlendirmedir.
• Yatay (Landscape): Ekran, uzunluğundan daha geniştir. Bu genellikle video izlemek veya oyun oynamak için tercih edilir.

Bazı cihazlar ve uygulamalar ayrıca şunları da destekler:

• Ters Dikey (Reverse Portrait): Cihazın 180 derece döndürüldüğü dikey yönlendirme.
• Ters Yatay (Reverse Landscape): Cihazın 180 derece döndürüldüğü yatay yönlendirme.

Ekran Yönlendirme Değişiklikleri Neden Yönetilmelidir?

Ekran yönlendirme değişikliklerini yönetememek, aşağıdakiler de dahil olmak üzere çeşitli sorunlara yol açabilir:

• Yerleşim sorunları: Öğeler yanlış hizalanabilir, kesilebilir veya birbirinin üzerine binebilir.
• Veri kaybı: Bazı durumlarda, ekran döndürüldüğünde activity veya uygulama durumu kaybolabilir.
• Kötü kullanıcı deneyimi: Sarsıcı veya bozuk bir deneyim kullanıcıları hayal kırıklığına uğratabilir ve uygulamanızın itibarına zarar verebilir.
• Performans sorunları: Sık sık yeniden oluşturma ve yerleşim hesaplamaları, özellikle eski cihazlarda performansı etkileyebilir.

Farklı Platformlarda Ekran Yönlendirmesini Yönetme

Ekran yönlendirmesini yönetmek için kullanılan özel teknikler, geliştirdiğiniz platforma bağlı olarak değişir. En popüler platformlardan bazılarını inceleyelim:

1. Android

Android, ekran yönlendirme değişikliklerini yönetmek için birkaç mekanizma sunar. En yaygın yaklaşımlar şunlardır:

a. Yapılandırma Değişiklikleri

Varsayılan olarak, Android ekran yönü değiştiğinde Activity'yi yeniden oluşturur. Bu, `onCreate()` metodunun tekrar çağrıldığı ve tüm yerleşimin yeniden şişirildiği (re-inflated) anlamına gelir. Bu, yönlendirmeye göre kullanıcı arayüzünü tamamen yeniden yapılandırmak için yararlı olabilse de, yalnızca yerleşimi biraz ayarlamanız gerekiyorsa verimsiz olabilir.

Activity'nin yeniden oluşturulmasını önlemek için, Activity'nizin `AndroidManifest.xml` dosyasında `orientation` yapılandırma değişikliğini yönettiğini bildirebilirsiniz:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

`orientation` ve `screenSize` (API seviyesi 13 ve üstü için önemlidir) ekleyerek, sisteme Activity'nizin yönlendirme değişikliklerini kendisinin yöneteceğini söylersiniz. Ekran döndüğünde, `onConfigurationChanged()` metodu çağrılacaktır.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Ekranın yönünü kontrol et
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

`onConfigurationChanged()` içinde, kullanıcı arayüzünü yeni yönlendirmeye göre güncelleyebilirsiniz. Bu yaklaşım, gereksiz kaynak yüklemesini ve yerleşim şişirmesini önlediği için Activity'yi yeniden oluşturmaktan daha verimlidir.

b. Activity Durumunu Kaydetme ve Geri Yükleme

Yapılandırma değişikliğini kendiniz yönetiyor olsanız bile, Activity'nin durumunu kaydetmeniz ve geri yüklemeniz gerekebilir. Örneğin, Activity'nizde bir metin alanı varsa, ekran döndüğünde kullanıcının girdiği metni korumak istersiniz.

Activity'nin durumunu kaydetmek için `onSaveInstanceState()` metodunu ve geri yüklemek için `onRestoreInstanceState()` metodunu kullanabilirsiniz.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternatif olarak, yapılandırma değişiklikleri boyunca UI ile ilgili verileri yönetmek ve kalıcı kılmak için SavedStateHandle ile ViewModels kullanabilirsiniz; bu daha modern ve önerilen bir yaklaşımdır.

c. Alternatif Yerleşimler

Android, farklı ekran yönlendirmeleri için farklı yerleşim dosyaları sağlamanıza olanak tanır. `res/layout-land/` ve `res/layout-port/` dizinlerinde ayrı yerleşim dosyaları oluşturabilirsiniz. Ekran döndüğünde, Android uygun yerleşim dosyasını otomatik olarak yükleyecektir.

Bu yaklaşım, kullanıcı arayüzünün yatay ve dikey yönlendirmelerde önemli ölçüde farklı olması gerektiğinde kullanışlıdır. Örneğin, yatayda iki bölmeli bir yerleşim ve dikeyde tek bölmeli bir yerleşim görüntülemek isteyebilirsiniz.

d. ConstraintLayout Kullanımı

ConstraintLayout, esnek ve uyarlanabilir yerleşimler oluşturmanıza olanak tanıyan güçlü bir yerleşim yöneticisidir. ConstraintLayout ile, görünümlerin birbirine ve üst yerleşime göre nasıl konumlandırılması gerektiğini belirten kısıtlamalar tanımlayabilirsiniz. Bu, farklı ekran boyutlarına ve yönlendirmelerine uyum sağlayan yerleşimler oluşturmayı kolaylaştırır.

2. iOS

iOS ayrıca ekran yönlendirme değişikliklerini yönetmek için mekanizmalar sunar. İşte bazı yaygın yaklaşımlar:

a. Auto Layout

Auto Layout, görünümlerin nasıl konumlandırılması ve boyutlandırılması gerektiğine ilişkin kurallar tanımlamanıza olanak tanıyan kısıtlama tabanlı bir yerleşim sistemidir. Auto Layout kısıtlamaları, kullanıcı arayüzünüzün farklı ekran boyutlarına ve yönlendirmelerine uyum sağlamasını sağlar.

Auto Layout kullanırken, genellikle görünümler arasındaki ilişkileri belirten kısıtlamalar tanımlarsınız. Örneğin, bir düğmenin üst görünümü içinde yatay ve dikey olarak ortalanmasını kısıtlayabilirsiniz. Ekran döndüğünde, Auto Layout motoru kısıtlamaları karşılamak için görünümlerin konumlarını ve boyutlarını otomatik olarak yeniden hesaplar.

b. Size Classes (Boyut Sınıfları)

Boyut sınıfları, ekran boyutlarını ve yönlendirmelerini kategorize etmenin bir yoludur. iOS iki boyut sınıfı tanımlar: `Compact` ve `Regular`. Bir cihazın genişliği ve yüksekliği için farklı boyut sınıfları olabilir. Örneğin, dikey yöndeki bir iPhone'un genişlik boyut sınıfı `Compact`, yükseklik boyut sınıfı `Regular`'dır. Yatayda ise genellikle yüksekliği `Compact`, genişliği ise modele bağlı olarak `Compact` veya `Regular` olur.

Kullanıcı arayüzünüzü ekran boyutuna ve yönlendirmesine göre özelleştirmek için boyut sınıflarını kullanabilirsiniz. Örneğin, farklı boyut sınıfları için farklı bir görünüm seti görüntülemek veya farklı yazı tipleri kullanmak isteyebilirsiniz.

Doğrudan Interface Builder'da veya programatik olarak boyut sınıflarına göre farklı kısıtlamalar yapılandırabilir ve hatta görünümleri yükleyebilir/kaldırabilirsiniz.

c. View Controller Döndürme Metotları

iOS, cihaz döndüğünde çağrılan UIViewController sınıfında birkaç metot sunar:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Bir geçiş için view controller'ın görünümü yeniden boyutlandırılmadan önce çağrılır.
• viewWillLayoutSubviews(): View controller'ın görünümü alt görünümlerini düzenlemeden hemen önce çağrılır.
• viewDidLayoutSubviews(): View controller'ın görünümü alt görünümlerini düzenledikten hemen sonra çağrılır.

Ekran döndüğünde özel yerleşim ayarlamaları yapmak için bu metotları geçersiz kılabilirsiniz.

d. Notification Center

Notification Center'ı kullanarak yönlendirme değişikliği bildirimlerini dinleyebilirsiniz:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Web Geliştirme (HTML, CSS, JavaScript)

Web geliştirmede, ekran yönlendirme değişikliklerini yönetmek için CSS medya sorguları ve JavaScript kullanabilirsiniz.

a. CSS Medya Sorguları

Medya sorguları, ekran boyutuna, yönlendirmesine ve diğer özelliklere göre farklı stiller uygulamanıza olanak tanır. Belirli yönlendirmeleri hedeflemek için `orientation` medya özelliğini kullanabilirsiniz.

/* Dikey yönlendirme */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Yatay yönlendirme */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Yerleşimi, yazı tiplerini ve diğer stilleri yönlendirmeye göre ayarlamak için medya sorgularını kullanabilirsiniz.

b. JavaScript

Ekran yönlendirme değişikliklerini tespit etmek ve özel eylemler gerçekleştirmek için JavaScript kullanabilirsiniz. `screen.orientation` API'si mevcut yönlendirme hakkında bilgi sağlar.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternatif olarak, medya sorguları ile `matchMedia` API'sini kullanabilirsiniz:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript, yerleşimi dinamik olarak ayarlamak, farklı kaynakları yüklemek veya yönlendirmeye göre başka eylemler gerçekleştirmek için kullanılabilir.

c. Duyarlı Tasarım Çerçeveleri

Bootstrap, Foundation ve Materialize CSS gibi çerçeveler, duyarlı tasarım için yerleşik destek sağlayarak farklı ekran boyutlarına ve yönlendirmelerine uyum sağlayan yerleşimler oluşturmayı kolaylaştırır. Bu çerçeveler genellikle esnek ve duyarlı kullanıcı arayüzleri oluşturmak için bir ızgara sistemi ve medya sorguları kullanır.

Ekran Yönlendirmesini Yönetmek İçin En İyi Uygulamalar

Ekran yönlendirme değişikliklerini yönetirken akılda tutulması gereken bazı en iyi uygulamalar şunlardır:

• Gereksiz Activity/ViewController yeniden oluşturmaktan kaçının: Mümkünse, Activity veya ViewController'ı yeniden oluşturma yükünden kaçınmak için yapılandırma değişikliğini kendiniz yönetin.
• Durumu kaydedin ve geri yükleyin: Veri kaybını önlemek için her zaman Activity/ViewController'ın durumunu kaydedin ve geri yükleyin. Daha sağlam durum yönetimi için ViewModel'leri kullanın.
• Auto Layout veya ConstraintLayout kullanın: Bu yerleşim sistemleri esnek ve uyarlanabilir yerleşimler oluşturmayı kolaylaştırır.
• Birden çok cihazda test edin: Uygulamanızın doğru çalıştığından emin olmak için farklı ekran boyutlarına ve yönlendirmelerine sahip çeşitli cihazlarda test edin.
• Erişilebilirliği göz önünde bulundurun: Ekran döndüğünde uygulamanızın engelli kullanıcılar için erişilebilir kaldığından emin olun.
• Net görsel ipuçları sağlayın: Ekran döndüğünde kullanıcı arayüzü önemli ölçüde değişiyorsa, kullanıcıların değişiklikleri anlamasına yardımcı olmak için net görsel ipuçları sağlayın.
• Belirli bir yönlendirmeyi zorlamaktan kaçının (gerekli olmadıkça): Kullanıcıların cihazlarını tercih ettikleri yönde kullanmalarına mümkün olduğunca izin verin. Bir yönlendirmeyi zorlamak sinir bozucu ve sakıncalı olabilir. Yalnızca uygulamanın işlevselliği için çok önemliyse (örneğin, yatay mod gerektiren bir oyun) yönlendirmeyi kilitleyin. Yönlendirmeyi kilitlerseniz, nedenini kullanıcıya açıkça bildirin.
• Performans için optimize edin: Performans sorunlarından kaçınmak için ekran döndüğünde yapılması gereken iş miktarını en aza indirin.
• Göreceli birimler kullanın: Yerleşiminizdeki boyutları ve konumları tanımlarken, kullanıcı arayüzünüzün farklı ekran boyutlarında düzgün ölçeklenmesini sağlamak için mutlak birimler (ör. pikseller) yerine göreceli birimler (ör. yüzdeler, `dp`, `sp`) kullanın.
• Mevcut kütüphanelerden ve çerçevelerden yararlanın: Duyarlı tasarım ve ekran yönlendirme yönetimi için destek sağlayan mevcut kütüphanelerden ve çerçevelerden yararlanın.

Yönlendirme Kilitleme ve Kullanıcı Deneyimi

Genellikle kullanıcıların cihazlarını serbestçe döndürmelerine izin vermek en iyisi olsa da, ekran yönlendirmesini kilitlemek isteyebileceğiniz durumlar vardır. Örneğin, tam ekran bir video oynatıcı, en iyi görüntüleme için yönlendirmeyi yatay moda kilitleyebilir.

Ancak, yönlendirme kilidini idareli kullanmak ve kullanıcıya net bir neden sunmak önemlidir. Bir yönlendirmeyi zorlamak sinir bozucu olabilir ve uygulamanızı daha az erişilebilir hale getirebilir.

Ekran Yönlendirmesi Nasıl Kilitlenir

Android

Android'de ekran yönlendirmesini `AndroidManifest.xml` dosyasındaki `screenOrientation` özniteliğini ayarlayarak kilitleyebilirsiniz:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Yönlendirmeyi programatik olarak da kilitleyebilirsiniz:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS'ta, desteklenen yönlendirmeleri `Info.plist` dosyasında belirtebilirsiniz. Ayrıca view controller'ınızdaki `supportedInterfaceOrientations` metodunu geçersiz kılabilirsiniz:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Küresel Hususlar

Küresel bir kitle için tasarım yaparken, ekran yönlendirmesiyle ilgili olarak aşağıdakileri aklınızda bulundurun:

• Sağdan Sola (RTL) Yerleşimler: Kullanıcı arayüzünüzün RTL dillerine nasıl uyum sağlayacağını düşünün. Arapça ve İbranice gibi bazı diller sağdan sola yazılır. Yerleşiminizin RTL modunda doğru şekilde yansıtıldığından emin olun. Auto Layout ve ConstraintLayout genellikle RTL yerleşimleri için yerleşik destek sağlar.
• Kültürel Tercihler: Cihaz kullanımıyla ilgili kültürel tercihlerin farkında olun. Çoğu kullanıcı hem dikey hem de yatay modlara alışkın olsa da, bazı kültürlerin ince tercihleri olabilir. Farklı bölgelerden kullanıcılarla test yapmak değerli bilgiler sağlayabilir.
• Farklı Kullanıcılar için Erişilebilirlik: Her zaman erişilebilirliğe öncelik verin. Ekran yönlendirmesinden bağımsız olarak uygulamanızın engelli kişiler tarafından kullanılabilir olduğundan emin olun. Bu, resimler için alternatif metin sağlamayı, yeterli renk kontrastı sağlamayı ve yardımcı teknolojileri desteklemeyi içerir.

Ekran Yönlendirme Yönetimini Test Etme

Uygulamanızın ekran yönlendirme değişikliklerini doğru bir şekilde yönettiğinden emin olmak için kapsamlı testler yapmak çok önemlidir. İşte test için bazı ipuçları:

• Emülatörler ve gerçek cihazlar kullanın: Daha geniş bir ekran boyutu ve donanım yapılandırması yelpazesini kapsamak için uygulamanızı hem emülatörlerde hem de gerçek cihazlarda test edin.
• Farklı yönlendirmelerde test edin: Uygulamanızı hem dikey hem de yatay yönlendirmelerde, ayrıca destekleniyorsa ters dikey ve ters yatayda test edin.
• Farklı ekran boyutlarıyla test edin: Kullanıcı arayüzünün düzgün ölçeklendiğinden emin olmak için uygulamanızı farklı ekran boyutlarına sahip cihazlarda test edin.
• Farklı yazı tipi boyutlarıyla test edin: Metnin okunabilir kaldığından emin olmak için uygulamanızı farklı yazı tipi boyutlarıyla test edin.
• Erişilebilirlik özellikleri etkinken test edin: Engelli kullanıcılar için erişilebilir kaldığından emin olmak için uygulamanızı ekran okuyucular gibi erişilebilirlik özellikleri etkinken test edin.
• Otomatik Test: Ekran yönlendirme değişikliklerini kapsayan otomatik kullanıcı arayüzü testleri uygulayın. Bu, regresyonları yakalamaya ve sürümler arasında tutarlı davranış sağlamaya yardımcı olabilir.

Sonuç

Ekran yönlendirmesini etkili bir şekilde yönetmek, mobil ve web geliştirmenin kritik bir yönüdür. Her platformda mevcut olan farklı teknikleri anlayarak ve en iyi uygulamaları takip ederek, kullanıcının cihazını nasıl tuttuğuna bakılmaksızın sorunsuz ve keyifli bir kullanıcı deneyimi sağlayan uygulamalar oluşturabilirsiniz. Uygulamanızın çeşitli bir kitle için erişilebilir ve kullanıcı dostu olmasını sağlamak için test etmeye öncelik vermeyi ve tasarım seçimlerinizin küresel etkilerini göz önünde bulundurmayı unutmayın.