PhoneGap’te Portrait ve Landscape görünümlerini kullanmak

4 Mart 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

PhoneGap uygulamalarınızda hazırladığınız tasarımları doğru şekilde görüntülemek için Portrait ve Landscape durumlarının nasıl tespit edeceğini ve yönetileceğini bilmek oldukça önemli. Bunu durumu nasıl kullanacağımıza bir göz atalım.

 

Mobil cihazın 4 farklı yöndeki orientation değeri bulunur. Dikey görünüme sahip olanlar Portrait, yatay görünüme sahip olanlar Landscape olarak adlandırılır. Bunu aşağıdaki gibi belirtebiliriz. (Not: Bu durum Android cihazlar için 3 farklı yönde çalışır. 180 değeri kullanılmaz.)

Cihazların yön değişimlerini addEventListener olay dinleyicisi ile “orientationchange” olayını kullanarak tespit etmemiz mümkün. Detaylar için W3C spec’lerini inceleyebilirsiniz.

orientationchange” olayı ile aşağıdaki gibi yön tespiti işlemini gerçekleştirebiliriz.

Kod   
document.addEventListener("deviceready", onDeviceReady, false);
 
function onDeviceReady() {
	console.log("Cihaz hazır..");
	window.addEventListener("orientationchange", orientationChange, false);
}
 
function orientationChange() {
	if (window.orientation == 0) {
		console.log("orientation: " + window.orientation + " - portrait");
	}
	else if (window.orientation == 90) {
		console.log("orientation: " + window.orientation + " - landscape");
	}
	else if (window.orientation == -90) {
		console.log("orientation: " + window.orientation + " - landscape");
	}
	else if (window.orientation == 180) {
		console.log("orientation: " + window.orientation + " - portrait");
	}
}

PhoneGap kısmında orientation işlemi bu şekilde yönetilirken Android kısmında ise şu ayarlamaları yapabiliriz. Eğer AndroidManifest.xml dosyasında orientation işlemi ile ilgili bir ayar yapmamış iseniz varsayılan olarak her yön için değişim sağlanır. Dilerseniz bunu aşağıdaki gibi kısıtlayabilirsiniz.

AndroidManifest.xml içerisindeki Activity ayarlarına android:screenOrientation=”portrait” kodunu ekleyerek uygulamanızın yalnızca portrait, android:screenOrientation=”landscape” kodunu ekleyerek yalnızca landscape olarak çalışmasını sağlayabilirsiniz.

Bunun yanında android:configChanges=”orientation|screenSize” kodu da Portrait ve Landscape görünümleri için önemlidir. Cihazınızın yönü değiştiğinde Android Native içerisindeki “onCreate” metodu yeniden çağrılır. Dolayısıyla biz tam da bu metot içerisinde “super.loadUrl(Config.getStartUrl());” kodumuzla “index.html” dosyamızı çağırdığımızda yeniden yüklenir. Bu durumun gerçekleşmemesini istiyorsak, yani index.html sayfamızın tekrar yüklenmesini istemiyorsak AndroidManifest.xml içerisindeki Activity ayarlarına android:configChanges=”orientation|screenSize” kodunu da eklemeliyiz. Bu durumda yalnızca yön değiştirme işlemi gerçekleşir. Bu durumu Eclipse içerisindeki LogCat üzerinden şu şekilde izleyebiliriz.

android:configChanges=”orientation|screenSize” kodunu kullandığımızda LogCat üzerine düşen loglar şu şekildeyken,

Kullanmadığımızda ise aşağıdaki loglardan Activity’nin yeniden başlatıldığını görebiliriz.

Bu sebeple Portrait ve Landscape görünümleri arasında geçiş yaptığınızda sayfanızın yeniden yüklenmesini gerektirecek bir işlem yoksa bu kodu kullanmanızı öneririm.

Bir sonraki yazıda görüşmek üzere..

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.