Bu yazı da iPhone uygulamalarında farklı çözünürlülüklü cihazlar arasında geçişlerdeki bir sorun tarif edilmekte, buna dair bir çıkarım yapılmakta ve en son bir çözüm tavsiyesi sunulmaktadır.

iOS için yazılım geliştirirken uygulamanın ne yaptığının yanında önemli konulardan birisi de, uygulamanın ekranda nasıl göründüğü, kullanıcının nasıl bir deneyim yaşadığı ile ilgilidir. Apple uygulamalarda kullanılan tasarım öğelerinin kullanıcının en iyi şekilde deneyimlemesi ve insan ergonomisine uygunluğu için İnsan Arayüzü Yönergesi yayınlamaktadır. Renk, boyut, öğeler arası boşluklar gibi bir çok unsur bu yönergede gösterilmekte ve tavsiye değerleri aktarılmaktadır.

Görsel tasarım unsurları için önemli bir değer de ekranın çözünürlüğü ve uygulamanın kullanıcıya gösterdiği öğelerin bu çözünürlükte en doğru şekilde sunulmasıdır. Her ne kadar Apple ilk 29 Haziran 2007 tarihinde pazara sunulan orjinal iPhone çözünürlüğünü baz alıp bir çarpan modeli ile standardizasyona gidip, bunu da ayrıca görsellerin görünüş oranları (aspect ratio) ile desteklese de yine de halen ufak sorunlar bulunmaktadır. Normal uygulamalarda daha az hissedilse de, özellikle oyun yazan geliştiriciler için çözünürlük çok iyi ele alınması gereken bir husustur. Örneğin oyundaki arka plan, piksel pikseline o anki cihaza uyumlu olmalıdır. Ancak bunun yerine genellikle tercih edilen yöntem tek bir arka planı o an uygulamanın çalıştığı cihazın ekran boyutuna göre büyütülüp küçültülmesidir, ancak bu yöntem ya görüntü kaybına neden olur ya da görüntünün bozulmasına.

Apple’ın Çarpan Çözümü @2x

Ekran çözünürlüğü, ekranı oluşturan yatayda ve dikeyde sıralanmış piksel isimli noktaların adedidir. Orjinal iPhone dikeyde 480 yatayda da 320 piksel çözünürlüğe sahipti. Bir başka deyişle toplamda 480×320 = 153,600 pikselden oluşmaktaydı.

Sonrasında 3G ve 3GS modellerinde herhangi bir değişiklik olmadı. Bu cihazlarda örneğin ekrana 480×320 piksel’lik bir geri plan resmi konulduğunda, tam olarak sağdan sola ve yukarıdan aşağıya resmi tam tamına kenarlara değecek şekilde göstermekteydi.

Ancak sonraki yıl sunulan iPhone 4 modeli ile birlikte ekran çözünürlüğü bir anda iki katına çıktı, dikeyde 480 yerine 960, yatayda 320 yerine 640 piksel. Toplamda da 960×640 = 460,800 piksele erişti. Tam dört katı daha fazla piksele Retina ekran denildi.

Bu aşamada uygulamalarda bir sorun oluştu. Bir önceki cihazlarda ekranı tam tamına kaplayan 480×320’lik bir arka plan artık ekranın sadece dörtte birini kapsıyordu. Arka planda olduğu gibi eski cihazlarda örneğin 96×64 lük bir düğme (button) dörtte biri oranında daha küçük görünmekte ve basmak için parmak ucu ile denk getirmek çok zorlaşmıştı. Ya tüm uygulamalar geçersiz olacaktı ya da Apple dahice bir çözüm geliştirecekti. Beklenen oldu ve Apple harika basitlikte bir çözüm geliştirdi. Pikselin yanına bir de nokta yani point koordinat sistemi getirildi. iPhone 3 serisi de iPhone 4 de, 480’e 320 noktadır kabul edildi. iPhone 3 serisinde bir nokta bir pikselden oluşurken iPhone 4 serisinde bir nokta dikeyde 2 yatayda 2 olmak üzere 4 pikselden oluştu. Yazılım geliştiriciler örneğin bir resmin standart halini eski 3 serileri için yüklerlerken, aynı resmin 4 kat daha yüksek halini @2x eklentisi ile yazılıma koydular. Uygulama geliştirme platformu XCode bunları akıllıca ele alarak konuyu çözdü. Uygulama eski 3 serisi cihazlarda normal resimleri gösterirken iPhone 4 de @2x halini göstermekteydi. Örnek vermek gerekirse 3 serisi cihazda mesela 120×94 olarak gösterilen resim, iPhone 4 için 240×188 olarak da yüklendi ve uygulama çalıştığı cihaza göre ilgili resmi gösterdi, bu sayede ekranda aynı boyutta gözüktüler.

Görünüm Oranı : Insta’cılar Bilir

Uygulama içerisinde gösterilecek fotoğraf ve grafikler için belirli alan ayrılır. Örneğin popüler Instagramda fotoğrafların gösterileceği alanın belirli bir büyüklüğü vardır. Siz bir fotoğraf çekip koyacağınızda Instagram size, o alanda fotoğrafınızı gösterirken nasıl göstereceğini sorar. Size fotoğrafı yanlara (veya fotoğrafı yatay çektiyseniz üste ve alta) siyah alanlar ekleyip tam göstermeyi mi ya da fotoğrafın belirli bir kısmını kesip o alana tam doldurmayı mı istediğinizi sorar.

Uygulama geliştirmede bunun adı Görünüm Oranı (Aspect Ratio)’dır. Her resmin yatayda ve dikeyde ekranda gösterilecek hali olmadığından, görünüm oranı ile bu sorun çözüldü. Bu halde görünüm oranı .aspectfill (tam doldurma) veya .aspectfit (siyah alan ekleyip tam uydurma) yapılarak tasarım öğeleri boyutlara yakınlaştırıldı. Örneğin ekranda 200’e 300 olarak gösterilecek bir resim sisteme 900’e 1200 olarak yüklendi ise bu resmi 900’ü 200’e mi ya da 1200 tarafını 300’e mi oranlanacağı konusu bu şekilde çözülmekteydi.

Oyunbozan iPhone 5

Eskilerin deyişi “demir çıktı mertlik bozuldu” gibi iPhone 5 çıktığında Apple’ın @2x çözümü bir anda sorunlu oldu. Çünkü iPhone 5 de çözünürlük yine arttı ancak yatayda 640 piksel 640 piksel olarak kalırken, dikeyde 960 piksel 1136 piksele çıktı. Diğer bir değişle iPhone 3’lerde 480/320 = 1.5 ya da iPhone 4’lerdeki 960/640 = 1.5 oranı bir anda 1136/640 = 1.78’e çıktı.

iPhone 4’de gayet güzel görünen bir üstteki fotoğraf iPhone 5’de aşağıdaki gibi gözükmeye başladı. (Fotoğrafta iPhone 8 vardır, ancak iPhone 5, 6, 7, 8 serilerinde (Plus modelleri dahil) bu oran değişmemiştir

Resimdeki oranlar bozuldu, genişlik aynı kalırken yükseklik uzadı. Aynı çözünürlük gibi. Dolayısıyla resimleri köşesinden tutup büyütme devri bitti. Bu şekilde yapıldığında yukarıda görüntü oranında bahsedilen sorun nedeniyle ya yataydan ya dikeyden görsel içeriği kaybedildi. iPhone 5 çıktığında çoğu uygulama geliştirici, iPhone 4 deki hali değiştirmeyip ilave gelen dikey piksellere ya reklam gösterdiler, ya da boş bıraktılar. Uzun yıllar süresinde yazılım geliştiriciler 6, 7, 8 serilerinde bu yeni orana uyum sağladılar ve fotoğrafların yeni çözünürlüğe uygun halini de yükleyip eski telefonlarda görüntü oranı ile olabildiğince iyi sonuç vermeye çalıştılar. Aynı fotoğrafın 1.78 oran uyumlu hali aşağıda gösterilmiştir. (Sağ tarafında da farkı rahatça görmeniz için bozuk oranlı hali gösterilmiştir).

iPhone 3 ve iPhone 4’de dikey uzunluğun yatay uzunluğa oranı (point veya piksel fark etmeyecek şekilde) 1.5 du. iPhone 5 de bu değer yaklaşık 1.78’e çıktı. Daha sonraki yıllarda iPhone 6, iPhone 7 ve iPhone 8’de hep bu 1.78 değeri korundu. Çözünürlük arttı, daha çok piksel geldi ancak oran hiç değişmedi.

Plus modellerinin çıkması ile birlikte pikseller çok arttığında Apple @3x sürümünü de devreye soktu. Artık büyük telefonlarda kullanıcının en iyi deneyimi yaşaması için fotoğrafların 3 halinin yüklenmesi gerekiyor. Ancak günümüzde 5 öncesi telefonlar artık kullanımda olmadığından sadece @2x ve @3x halleri kullanılıyor.

iPhone X : Apple Çıtayı Tekrar Yükseltti

iPhone X olağanüstü OLED ekranı ile çözünülüğü hem yukarı taşıdı hem de oran tekrar değişti. iPhone 3 ve 4’de 1.5, iPhone 5, 6, 7 ve 8 de 1.78 olan oran iPhone X ile birlikte bu oran 2.17’ye geldi. Bu yazının yazıldığı tarihte en yeni sürüm iPhone 12’lerde halen bu 2.17 oranı geçerli.

Unutmadan bunca yıl içerisinde içerisinde cihazlara iPad katıldı. Uzunca bir süre 1.33 lük oran kullansa da sonrasında 1.43 lük iPad lerde kullanıma girdi. Böylece iPhone’larda 3, iPad’lerde 2 oran olmak üzere toplam da 5 farklı fotoğraf oranı bulunmakta.

Aşağıdaki örnekte solda yeni 2.17 oranında bir fotoğrafın bu orandaki iPhone 12’de, sağda ise 1.78 lik orana sahip iPhone 8 Plus cihazında bu fotoğrafın görünümü yer almakta. Yeni fotoğraf yeni cihazda güzel, eski cihazda güzel görünmemekte bu oranla.

Tersine bakarsak, yani eski 1.78 lik oranlı bir fotoğrafı yanyana iki cihaza koyarsak da bu seferde bir önceki iPhone 5 örneğinde olduğu gibi eski oranlı fotoğraf yeni oranlı cihazda uzamakta. Solda kendi oranındaki bir fotoğrafı gösteren iPhone 8Plus güzel görünürken, sol tarafa bu eski oranlı fotoğrafı gösteren iPhone 12 Pro Max fotoğrafı bozmakta.

Çıkarım

Her farklı orana sahip cihazda, kendi oranındaki fotoğraf en güzel görünür. Uygulama da böyle olmalıdır.

Oranlar ve Cihaz Grupları

Tablo kolonlarında ilk Y ve G Mantıksal nokta sistemindeki yükseklik ve genişlik iken, Oran Yükseklik bölü genişlik oranıdır. Yf ve Gf fiziki, gerçekte cihazın üzerinde bulunan piksellerin yüksekliği ve genişliğidir. PPI bir inç (yaklaşık 2.54 cm) fiziki uzunlukta kaç pikselin yer aldığı anlamına gelir) Son kolon Ç ise kullanılan Çarpan Oranıdır.

İlk kolon G ise bu yazının asıl konusudur. Tüm iOS cihazları Y/G oranına göre gruplanabilir. Aynı gruptaki cihazlar için yazılımcı resmi bir köşesinden tutup büyütebilir, tabi bunu “scale” veya “size” komutlarıyla yapacaktır. Diğer taraftan eğer uygulamanın mükemmel pixel doğruluğunda olmasını istiyor ise bu 5 farklı grup için görselleri hazırlamalıdır. iPhone 5 öncesi cihazlar artık pek kullanımda olmadığı için aslında 3 numaralı grup için uğraşmaya pek gerek kalmaz.

Grup	Cihaz	Y	G	Oran	Yf	Gf	PPI	Ç
1	iPhone 12	844	390	2,16	2532	1170	460	3
1	iPhone 12 Mini	780	360	2,17	2340	1080	576	3
1	iPhone 12 Pro Max	926	428	2,16	2778	1284	458	3
1	iPhone 12 Pro	844	390	2,16	2532	1170	460	3
1	iPhone 11	896	414	2,16	1792	828	326	2
1	iPhone 11 Pro	812	375	2,17	2436	1125	458	3
1	iPhone 11 Pro Max	896	414	2,16	2688	1242	458	3
1	iPhone XR	896	414	2,16	1792	828	326	2
1	iPhone XS Max	896	414	2,16	2688	1242	458	3
1	iPhone XS	812	375	2,17	2436	1125	458	3
1	iPhone X	812	375	2,17	2436	1125	458	3
2	iPhone SE 2nd gen	667	375	1,78	1334	750	326	2
2	iPhone 8 Plus	736	414	1,78	2208	1242	401	3
2	iPhone 8	667	375	1,78	1334	750	326	2
2	iPhone 7 Plus	736	414	1,78	2208	1242	401	3
2	iPhone 7 Plus	667	375	1,78	1334	750	326	2
2	iPhone SE 1st gen	568	320	1,78	1136	640	326	2
2	iPhone 6S Plus	736	414	1,78	2208	1242	401	3
2	iPhone 6S	667	375	1,78	1334	750	326	2
2	iPhone 6 Plus	736	414	1,78	2208	1242	401	3
2	iPhone 6	667	375	1,78	1334	750	326	2
2	iPhone 5C	568	320	1,78	1136	640	326	2
2	iPhone 5S	568	320	1,78	1136	640	326	2
2	iPhone 5	568	320	1,78	1136	640	326	2
3	iPhone 4S	480	320	1,50	960	640	326	2
3	iPhone 4	480	320	1,50	960	640	326	2
3	iPhone 3GS	480	320	1,50	480	320	163	1
3	iPhone 3G	480	320	1,50	480	320	163	1
3	iPhone	480	320	1,50	480	320	163	1
5	iPad Air 4	1180	820	1,44
4	iPad Pro 4 12.9″	1366	1024	1,33	2732	2048	264	2
5	iPad Pro 4 11″	1194	834	1,43	2388	1668	264	2
4	iPad 8	1080	810	1,33	2160	1620	264	2
4	iPad 7	1080	810	1,33	2160	1620	264	2
4	iPad Mini 5	1024	768	1,33	2048	1536	326	2
4	iPad Air 3	1112	834	1,33	2224	1668	264	2
4	iPad Pro 3 12.9″	1366	1024	1,33	2732	2048	264	2
5	iPad Pro 3 11″	1194	834	1,43	2388	1668	264	2
4	iPad 6	1024	768	1,33	2048	1536	264	2
4	iPad Pro 2 12.9″	1366	1024	1,33	2732	2048	264	2
4	iPad Pro 2 10.5″	1112	834	1,33	2224	1668	264	2
4	iPad 5	1024	768	1,33	2048	1536	264	2
4	iPad Pro 12.9″	1366	1024	1,33	2732	2048	264	2
4	iPad Pro 9.7″	1024	768	1,33	2048	1536	264	2
4	iPad Mini 4	1024	768	1,33	2048	1536	326	2
4	iPad Air 2	1024	768	1,33	2048	1536	326	2
4	iPad Mini 3	1024	768	1,33	2048	1536	264	2
4	iPad Mini 2	1024	768	1,33	2048	1536	326	2
4	iPad Air	1024	768	1,33	2048	1536	264	2
4	iPad 4	1024	768	1,33	2048	1536	264	2
4	iPad Mini	1024	768	1,33	1024	768	163	1
4	iPad 3	1024	768	1,33	2048	1536	264	2
4	iPad 2	1024	768	1,33	1024	768	132	1
4	iPad	1024	768	1,33	1024	768	132	1
2	iPod Touch 6	568	320	1,78	1136	640	326	2
2	iPod Touch 5	568	320	1,78	1136	640	326	2
3	iPod Touch 4	480	320	1,50	960	640	326	2
3	iPod Touch 3	480	320	1,50	480	320	163	1
3	iPod Touch 2	480	320	1,50	480	320	163	1
3	iPod Touch	480	320	1,50	480	320	163	1

Bu grupları aslında cihaz tipi olarak belirleyebilir, örneğin şu şekilde isimlendirebiliriz :

• Çok eski iPhone (iPhone 5 öncesi 1.5 oran)
• Eski iPhone (iPhone 5,6,7,8 ve Plus modelleri 1.78 oran)
• Modern iPhone (iPhone X ve sonrası 2.16 oran)
• Standart iPad (1.33 oran)
• Yeni iPad (1.44 oran)

Yazılım Geliştirme

Bu kadar uzun yazıda buraya kadar geldiğiniz için teşekkürler. Şimdi bahsedilen bu sorun uygulamada en az yaşamak için neler yapmak gerek bunun üzerinde duralım.

İlk olarak ekran oran gruplarını Swift kodunda bir enum olarak tanımlayabiliriz.

enum CihazTipi {
    case çokEskiIPhone
    case eskiIPhone
    case modernIPhone
    case standartIPad
    case yeniIPad
    case tanımsız
}

Sonrasında ekranın yüksekliği ve genişliğini alıp oranı kontrol etmeliyiz. Bunun için ilk olarak ekran genişliği ve yüksekliğini şu şekilde öğrenebilir ve bir struct a atayabiliriz.

struct EkranBoyutu {
    static let genişlik = UIScreen.main.bounds.size.width
    static let yükseklik = UIScreen.main.bounds.size.height
}

Uygulamanın üzerinde çalıştığı cihaz tipini anlayıp, buna göre kullanacağımız arka plan ve diğer görseller içinde alttaki kodu kullanabiliriz.

func cihazTipiniAl() -> CihazTipi {

    let ekranOranı: CGFloat = max(EkranBoyutu.yükseklik, EkranBoyutu.genişlik) / min(EkranBoyutu.yükseklik,  EkranBoyutu.genişlik)

    var sonuç: CihazTipi?
    
    switch UIDevice.current.model {
    case "iPhone":
        switch ekranOranı {
            case 0..<1.7 : sonuç = .çokEskiIPhone
            case 1.7..<2 : sonuç = .eskiIPhone
            case 2..<2.8 : sonuç = .modernIPhone
            default: sonuç = .tanımsız
        }
    case "iPad":
        switch ekranOranı {
            case 0..<1.36 : sonuç = .standartIPad
            case 1.37..<2 : sonuç = .yeniIPad
            default: result = .tanımsız
        }
    default:
        sonuç = .tanımsız
    }
    return sonuç ?? .tanımsız
}

Ekran yükseklik bölü genişlik oranı hesaplanırken telefonu dikey de tutabileceğimiz gibi yatay da tutabileceğimiz için yükseklik daima genişlikten büyük olduğundan her iki sayının büyüğünü seçmekteyiz.

Cihaz tipini öğrendiğinizde artık tek yapmanız gereken bu orana uygun fotoğraf ve grafik boyutlarını uygulama içinde kullanmaktır.