Layout Tasarlıyoruz

Kendi projelerimde çalıştığım zaman, herhangi bir projeye başlamanın en kolay yolunu kullanıcı arayüzü tasarlamak olarak buluyorum – eğlenceli, bu yol fikrinizin anlaşılır olup olmadığını ve size kullanıcı yolculuğunu düşünmeye zorlar. Bu proje karmaşık değil, ama yine de Interface Builder(Arayüz Oluşturucu) ile başlayacağız.

Proje 1'de olduğu gibi, Single View App(Tek Arayüzlü Uygulama) şablonu sana bir UIViewController verir, ViewController adında ve bir Main.storyboard adında, tekli view controller'ımız için layout(Düzenleme) içerir. Şimdi, Interface Builder(Arayüz Oluşturucu) açmak için bu storyboard'u seç ve büyük beyaz bir boşluk, dahiyane bir başlangıç için hazır.

Oyunumuzda, üstteki navigation bar(Navigasyn Barı)'da kullanıcının hangi bayrağın hangi ülkeye ait olduğunu tahmin etmesi için ülke isimleriyle birlikte 3 adet bayrak göstereceğiz. Navigation bar(Navigasyon Barı) nedir? Burada henüz yok! Önceki projede olduğu gibi buraya da bir tane eklememiz gerekecek.

Proje 1'de çok şey öğrendik, ama muhtemelen nasıl yapılacağını unuttun, sorun yok: Single View App(Tek Görünümlü Uygulama) projeleri standart olarak navigation controller ile birlikte açılmaz, ama bu kolayca eklenebilecek kadar önemsiz: view controller(görüntü denetleyicisi)ne tıkla, ve Editor menüsünden Embed In > Navigation Controller'ı seç.

Yeni navigation controller(navigasyon denetleyicisi) yerinde, aşağıda boş view controller(görüntü denetleyicisi)'ımızı tekrar göreceksin ve canvas üzerine 3 adet UIButton koy. Bu yeni bir view(görüntü) tipi, ama bu tahmin edebileceğiniz gibi kullanıcıların dokunabildiği basit bir buton. Her biri 200 genişliğinde ve 100 yüksekliğinde olmalı. Bu değerleri sağ-üst köşedeki Xcode penceresinden size inspector(boyut denetçisi) ile ayarlayabilirsin.

iOS 6 ve öncesinde ki eski günlerde, UIButtons beyaz arka plan ve yuvarlak kenarlı dokunabilirdi, ancak iOS 7 ve sonrası itibariyle butonlar tamamen düz ve yazılı hale geldi. Sorun yok, buna rağmen butonları daha enteresan hale getireceğiz.

size inspector(boyut denetçisi)a direkt olarak Alt+Cmd+5 kısayolu ile veya View menüsünden Utilities > Show Size Inspector'a tıklayarak gidebilirsin. X pozisyonu hakkında endişelenme, ancak Y posisyonları ilk bayrak için 100 olmalı, ikinci bayrak 230 ve üçüncü bayrak 360 olmalı. Bu view controller(görüntü denetleyicisi)'da tam olarak az veya çok boşluk olmasını sağlar.

Aşağıdaki resimde size inspector(boyut denetçisi)ı görebilirsin, bu görüntünün pozisyon ve boyutlarının tam olarak nerede olacağını gösteren en basit ve çabuk yol.

Sonraki adım Auto Layout(Oto Düzenleme)u getirmek. Böylece düzenimizi, kullanıcının sahip olduğu herhangi bir cihaza göre uyarlanabilecek kurallar olarak ortaya koyarız. Bu kurallar şu an için karışık değil, ancak umarım Auto Layout'un ne kadar akıllı olduğunu göstermeye başlayacağım.

Proje 1'den farklı oarak Auto Layout kurallarımızı yaratmaya başlıyoruz. Bu, bir yolun diğerinden daha iyi olmasından değil, bunun yerine çeşitli olasılıkları görebilmeniz ve hangisinin size en uygun olduğuna karar vermeniz için.

Üstte ki butonu seç, sonra Ctrl-sürükle ile butonun üzerinden buton dışına yani view controller üzerindeki beyaz alana sürükle bırak. Bununla birlikte, beyaz alan, Auto Layout kullanabilmek için maviye dönüşecek.

Fare düğmesini bıraktığınızda, oluşturmak için olası kısıtlamaların bir listesi sunulur. Bu listede iki şeyi önemsiyoruz: “Top Space to Safe Area(Güvenli Alana En Üst Düzey)" ve “Güvenli Alanda Yatay Olarak Ortala(Center Horizontally in Safe Area)”

Bunun gibi birden fazla constraint(kısıtlama) oluştururken iki seçeneğin var: birini seçebilir, sonra tekrar Ctrl-drag ve diğerini seçebilirsin veya menüde bir öğe seçmeden önce Shift-click ve daha fazlasını seçebilirsin. Her seferinde bir seçim.

Yani, buton üzerinde Ctrl-sürükle ile beyaz boşluğa kadar Ctrl tuşunu basılı tutup bırak, mouse düğmesini ve Ctrl ile menünün görünmesini sağlayın, ardından Shift tuşunu basılı tutun ve “Top Space to Safe Area(Güvenli Alana En İyi Yer)” ve Güvenli alanda “Center Horizontally in Safe Area(Yatay Olarak Ortala)” yı seçin. Bu yapıldığında, seçimi onaylamak için Add Constraint(Kısıtlama Ekle)'yi tıklayın.

Bu tamamlanan ilk bayrak, daha fazla ilerlemeden önce, nasıl göründüğünü görebilmeniz için bazı örnek içerikler ekleyerek onu hayata geçirelim.

Proje 1'de, Content(İçerik) adında resim dosyalarını içeren klasörü Xcode projemize sürükleyip bıraktık. Diğer projelerinde de bunu uygulayabilirsin, ancak asset catalogs isminde bir diğer yöntemi de belirtmek isterim. iOS projelerinde resimleri eklemek ve kullanmak için optimize yöntem, ve içerik dosyası olarak kullanmaya da uygun.

Xcode projende, Assets.xcassets isimli dosyayı seç. Bu gerçek bir dosya değil, bizim birincil Xcode asset catalog yerine. Bu proje için hala dosyaları indirmediysen, lütfen şimdi GitHub'dan indir (https://github.com/twostraws/HackingWithSwift).

Proje dosyasından 36 bayrağın hepsini seç ve Xcode içindeki "AppIcon" asset catalog(resim kataloğu) içerisine sürükle. Bu işlem asset catalog içerisine 12 yeni girdi yaratacak ve her bir ülke için bir tane olacak.

Çeşitlemelerden nefret etsemde, burası önemli: iOS assets(varlıklar) 2x ve 3x boyutlarında gelir, Interface Builder(Arayüz Oluşturucu)da yaratıldığında 2 veya 3 kere düzenlenir. Biraz tuhaf gelebilir, ama bu geliştiricilerin büyük oranda yükünü hafifleten iOS büyüsüdür.

iOS cihazlar Retina ekrana sahip olmadan önce. Bu demek oluyordu ki ekran çözünürlüğü 320X480 piksel ve onları istediğin yere yerleştirebilirsin - soldan 10, üstten 10 piksel istersen, sahip olduğun şey bu olurdu.

iPhone 4 ile birlikte Apple, önceki ekranlara göre piksel sayısını iki katına çıkaran retina ekranlarını tanıttı. Tüm arayüzlerinizi iki kez tasarlamanızı sağlamak yerine, Apple otomatik olarak boyutları piksellerden “points(puan)” a çevirdi. – sanal pikseller. Retinasız cihazlarda, 10 point(puan)lı bir genişlik 10 piksel olurken, retina cihazlarla birlikte bu 20 piksel oldu. Bu demek oluyor ki tek bir layout(düzen) ile tüm cihazlarda her şey aynı boyut ve şekilde gözüküyor.

Tabii, retina ekranların tüm noktaları daha fazla piksele sahip oldu, her şey daha keskin gözükmeye başladı – her şeyi tekrardan boyutlandırmak tek başına yeterli olmamaya başladı. Apple işleri daha ileriye götürerek: 200X100 ölçeğinde hello.png yaratırsan, 400x200 boyutuda hello@2x.png isminde bir dosya daha eklersen – evet çift katı – iOS doğru olanı yükleyecektir. Böylece, kodunda hello.png yazdığında, iOS retina cihazlarda hello@2x.png'yi arayıp yükleyeceğini bilir.

Son zamanlarda Apple, 3x çözünürlüğe sahip retina HD ekranlarını tanıttı. Bunlar aynı adlandırma kuralını izler: hello.png retina olmayan cihazlar içindir, retina cihazları için hello@2x.png ve retina HD cihazları için hello@3x.png. Hala kodunuzda ve kullanıcı arayüzlerinde “hello.png” yazıyorsunuz ve geri kalanını iOS yapıyor.

Bunun kulağa çok ağır geldiğini düşünebilirsiniz - retina olmayan bir cihaz, gösteremediği @ 2x ve @ 3x içerik içeren uygulamaları neden indirmek zorundadır? Neyse ki App Store, her cihazın gösterebileceği içeriği otomatik olarak sunan uygulama incelemesi adı verilen bir teknoloji kullanıyor. Uygulama indirilirken diğer varlıkları kaldırıyor, böylece boşa alan kalmıyor.

Kurnazca, iOS 10'dan itibaren retina olmayan cihazlar desteklenmez, bu yüzden yalnızca iOS 10 veya sonraki aygıtları destekliyorsanız, yalnızca @ 2x ve @ 3x görüntülerini eklemeniz gerekir. Eski iOS sürümlerinde de kullanmak istiyorsanız, bu projenin 1x görüntülerini ekledim.

Şimdi, tüm bunlar önemlidir çünkü görüntüleri asset catalog(varlık kataloğumuza) aktardığımızda, otomatik olarak 1x, 2x ve 3x karelere yerleştirdik. Bunun nedeni, dosyaları doğru bir şekilde adlandırmış olmamızdır: france.png, france@2x.png, france@3x.png vb. Xcode bu isimleri tanıdı ve tüm görüntüleri doğru şekilde düzenledi.

Görüntüler içe aktarıldığında, bir içerik klasörünün içinde gevşek dosyalar olsaydı yapacağınız gibi, ister kodda, isterse de Interface Builder(Arayüz Oluşturucu)'da kullanabilirsiniz. Öyleyse, Storyboard(hikaye tahtanıza) geri dönün, ilk butonu ve attributes inspector(öznitelik denetçisini) seçin (Alt + Cmd + 4). Şu anda "Button" başlığı olduğunu göreceksiniz (bu, "Title: Plain" yazısının hemen altındaki bir metin alanındadır), bu nedenle lütfen bu metni silin. Şimdi, Resim açılır menüsünün yanındaki oku tıklayın ve "us(bizi)" seçin.

Butonun içinde bir resim belirledikten sonra, buton için kısıtlamalarımız tamamlanmıştır: bir kısıtlama yerleştirdiğimiz için bir Y pozisyonu ve bir X pozisyonu vardır çünkü biz yatay olarak ortalıyoruz ve bir genişlik ve bir yükseklik atadığımız görüntüden okuyor. Devam edin ve oradayken diğer iki butonu ABD bayrağı olarak seçin.

Auto Layout(Otomatik Düzen) kısıtlamalarımızı tamamlamak için, orta ve alt düğmeler için Otomatik Düzen kısıtlamaları atamamız gerekiyor. Orta düğmeyi seçin, ardından ilk düğmeye Ctrl-drag(sürükleyin) - view controller(görünüm denetleyicisine) değil. Bırakın, "Vertical Spacing(Dikey Aralık)" ve "To complete our Auto Layout constraints, we need to assign Auto Layout constraints for the middle and bottom buttons. Select the middle button, then Ctrl-drag to the first button – not to the view controller. Let go, and you'll see "Vertical Spacing" and "Center Horizontally.” Choose both of these. Now choose the third button and Ctrl-drag to the second button, and again choose "Vertical Spacing(Dikey Aralık)" and "Center Horizontally(Yatay Merkez)" göreceksiniz. İkisini de seçin. Şimdi üçüncü butonu seçin ve ikinci buton için Ctrl tuşuna basıp tekrar "Vertical Spacing(Dikey Aralık)" ve "Center Horizontally(Yatay Merkez)" seçin.

Bu noktada, Otomatik Düzenlememiz neredeyse tamamlandı, ancak bayrakları yatay olarak ortalamayı seçmemize rağmen, bunların yerleştirildikleri yerde sıkışıp kaldıklarını göreceksiniz. Bunun nedeni, Arayüz Oluşturucu'ya, oluşturduğunuz Otomatik Düzenleme kurallarına uyacak şekilde butonlarınızın tüm çerçevelerini güncellemesini söylemeniz gerektiğidir.

Bunu yapmak için yeterince kolay: üç image view(görüntü görünümünü) seçin, sonra Editor(Düzenleyici) menüsüne gidin ve Resolve Auto Layout Issues(Otomatik Düzen Sorunlarını Çöz) > Update Frames(Kareleri Güncelleştir)'i seçin. Yine, bu seçeneğin menüde iki kez göründüğünü göreceksiniz, ancak ikisini de burada yapabilirsiniz. Bu komut, her görüntü görüntüsünün çerçevelerini - konumlarını ve boyutlarını - ayarladığımız Otomatik Düzen kısıtlamalarıyla eşleşecek şekilde güncelleyecektir.

Şu an için Interface Builder ile bitirdiğimiz son adım, üç bayrak butonlarımız için bazı çıkış noktaları eklemek, böylece bunları kodda referans gösterebiliriz. Asistan düzenleyiciyi Alt + Cmd + Return tuşlarına basarak veya Görünüm> Asistan Editörü> Gösteri Yardımcısı Düzenleyicisine giderek etkinleştirin. Şimdi 'button1' adında bir çıkış oluşturmak için ilk bayraktan kodunuzu Ctrl-tuşuna, ikinci düğmeden button2 oluşturmak için ve üçüncü düğmeden` ​​button3 'oluşturmak için sürükleyin.

Daha sonra tekrar geri döneceğiz, ancak şimdilik Interface Builder ile işimiz bitti. ViewController.swift'i seçin ve standart düzenleyiciye geri dönün (diğer bir deyişle, asistan düzenleyiciyi kapatmak için Cmd + enter basın), böylece bazı kodlamalarla meşgul olabiliriz.

Sponsor Hacking with Swift and reach the world's largest Swift community!