UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Bir detay ekranı oluşturma

Uygulamamızın bu noktasında, içinden seçim yapabileceğimiz bir listemiz var, ama üzerlerine tıklamamıza rağmen hiçbir şey olmuyor. Sonraki amacımız, kullanıcı herhangi bir satıra tıkladığında gösterilecek olan yeni ekranı tasarlamak olacak. Bunu, seçilen görseli tam ekran göstererek yapacağız ve bir görselin üzerine tıklandığında ekran otomatik olarak kayacak.

Bu görev, daha küçük iki göreve ayrılabilir. İlk olarak, bu detay ekranını tutacak olan yeni bir kod oluşturmamız gerekli. İkincisi olarak da, Interface Builder'da bu ekran için kullanıcı arayüzü çizmeliyiz.

Kolay olanıyla başlayalım: Detay ekranını tutacak olan yeni kodu oluşturalım. Menü çubuğundan, File menüsüne gidin ve New > File seçimini yapın. Birçok seçenek içeren bir pencere belirecek. Bu listeden, iOS > Cocoa Touch Class seçimini yapın ve Next'e tıklayın.

Oluşturduğunuz yeni ekrana bir isim vermeniz istenecek; bu aynı zamanda ne üzerine inşa ettiğini iOS'a söyleyecek. Lütfen name (isim) kısmı için "DetailViewController" ve "Subclass Of" (alt sınıf) kısmı için de “UIViewController” girin. “Also create XIB file” (XIB dosyasını da oluştur) kutucuğunun seçili olmadığından emin olun. Ardından Next butonuna ve yeni bir dosya eklemek için Create butonuna tıklayın.

Böylece ilk işimiz tamamlanmış oldu. Detay ekranı için gereken kodu içeren yeni bir dosyaya sahibiz artık.

İkinci görev biraz daha düşünmeyi gerektirecek. Main.storyboard'a geri dönün. Orada iki ekran denetleyicimiz olduğunu göreceksiniz: Soldaki kılavuz ekran denetleyicisi ve sağdaki tablo ekranı denetleyicisidir. Yeni bir ekran denetleyicisi ekleyeceğiz. Bu, bizim detay ekranımız olacak.

Önce, nesne kütüphanesini açın ve "View Controller"ı bulun. Hali hazırda bulunan ekran denetleyicisinin sağındaki boşluğa doğru sürükleyin. Herhangi bir yere yerleştirebilirsiniz aslında, ama mantıksal bir şekilde soldan sağa doğru ekranlarınızı düzenlemeniz daha iyi olur.

Şimdi document outlines'a bakın. ikinci bir "View Controller scene" (Ekran Denetleyici sahnesi) belirdiğini göreceksiniz: Bir tanesi tablo ekranı için, bir tane de detay ekranı için. Hangisinin hangisi olduğundan emin değilseniz, yeni ekrana –az önce oluşturduğunuz büyük beyaz boşluğa– tıklayın. Document outlines'da doğru sahne seçilmiş olacaktır.

Tablo ekranı hücremizi oluşturduğumuz zaman, kod içinde çağırabilmemiz için ona bir tanımlayıcı vermiştik. Aynı şeyi bu yeni ekran için de yapmamız gerekiyor. Onu seçtiğimiz anın hemen öncesinde, document outlines'da "View" yazısı belirginleşir. Bunun üzerinde, hemen yanındaki sarı ikonuyla "View Controller" olacak. Şimdi lütfen, tüm ekran denetleyicisini seçebilmek için ona tıklayın.

Bu ekran denetleyicisine bir isim vermek için, Cmd+Alt+3 tuşlarına basarak veya menüyü kullanarak identity inspector'a gidin. “Storyboard ID” yazan yere şimdi "Detail" yazısını girin. Hepsi bu: Kod içerisinde bu ekran denetleyicisini "Detail" olarak kullanabiliriz. Hazır oradayken, lütfen Class kutusunun yanındaki oka tıklayın ve “DetailViewController” seçin. Böylece, daha önceden yazmış olduğumuz yeni kodla kullanıcı arayüzümüz birbirine bağlanmış oldu.

Şimdi ilginç kısmı geliyor: Biz bu ekranın, kullanıcının seçtiği görseli güzel ve büyük göstermesini istiyoruz. Dolayısıyla UIImageView adında yeni bir kullanıcı arayüz bileşeni kullanmamız gerekiyor. İsminden de anlayabileceğiniz gibi, bu UIKit'in bir parçasıdır ("UI" olduğu için) ve görsellerin görüntülenmesinden sorumludur; mükemmel!

Nesne kütüphanesinde Image View (Görsel Ekranı) bileşenini arayın; bulmanın en kolay yolu olarak filtre kutusunu tekrar kullanmayı deneyebilirsiniz. Nesne kütüphanesinden görsel ekranına tıklayıp, detay ekranı denetleyicisinin üzerine sürükle ve bırak. Tüm ekran denetleyicisini kaplayacak şekilde görsel ekranının kenarlarını çekiştir şimdi.

Bataryayı simgeleyen ikonun altına kadar detay ekranı denetleyicisini köşeden köşeye kaplayacak şekilde görsel ekranını çekiştir.

Bu görsel ekranının şimdilik herhangi bir içeriği yok, o yüzden soluk mavi bir arkaplan ve UIImageView sözcüğü ile doldurulmuştur. Şu anda ona herhangi bir içerik atamayacağız; zaten bu, program çalıştığında yapacağımız bir şey. Bunun yerine, ister iPhone olsun ister iPad, ekranın nasıl kendi kendine ölçüsünü değiştireceğini görsel ekranına söylememiz gerekiyor.

Bu, ilk başta tuhaf görünebilir; nasıl olsa ekran denetleyicisini kaplaması için onu yerleştirdiniz ve ekran denetleyicisi ile aynı ölçüye getirdiniz, dolayısıyla olması gerekiyor, değil mi? Evet, ama tam olarak değil. Şöyle düşünün: Uygulamanızın üzerinde çalışacağı hepsi farklı ölçülerde olan bir çok cihaz var. O zaman, görsel ekranının bir 6 Plus veya hatta bir iPad üzerinde nasıl cevap vermesi gerekiyor?

iOS'un bunun için bir cevabı var ve bu, çeşitli yollarla istediğinizi yapmanızı sağlayan bir sihir gibi işe yarayan zekice bir cevap. Auto Layout (Otomatik Yerleşim) olarak biliniyor: Ekranınıza nasıl yerleşeceği konusunda kurallar tanımlamanızı sağlıyor ve bu kuralların takip edilmesini otomatik olarak garantiliyor.

Ama –bu büyük bir "ama" olacak!– kendisinin iki kuralı var ve ikisini de takip etmek zorundasınız:

  • Yerleşim kurallarınız tamamlanmış olmalı. Yani, bir şey için sadece bir X konumu belirleyemezsiniz, aynı zamanda Y konumu da belirlemek zorundasınız. Eğer okul biteli uzun zaman olduysa, şöyle açıklayayım: "X", ekranın solundan itibaren olan konum, "Y" ise ekranın üstünden itibaren olan konumdur.
  • Yerleşim kurallarınız çakışmamalı. Bu şu anlama gelir: Bir ekranı, sol kenara 10 piksel uzaklıkta, sağ kenara 10 piksel uzaklıkta ve 1000 piksel genişliğinde belirleyemezsiniz. Bir iPhone 5 ekranı sadece 320 piksel genişliğindedir, dolayısıyla yerleşiminiz matematiksel olarak imkansızdır. Otomatik Yerleşim, bir çözüm bulana kadar kuralları bozan bu sorunlardan kurtarmaya çalışacak, ama sonuç asla istediğiniz gibi olmayacaktır.

Tamamıyla Interface Builder içinde Otomatik Yerleşim kuralları –koşullar (constraint) olarak bilinirler– oluşturabilirsiniz ve siz bu iki kuralı takip etmezseniz sizi uyaracaklardır. Hatta size düzeltmeler önererek, hataları düzeltmenize yardımcı bile olacaklardır. Not: Önereceği düzeltmeler doğru olabilir, ama olmayabilir de; o yüzden adımlarınızı dikkatli atın.

Şimdi dört tane koşul oluşturacağız: Görsel ekranının üstü, altı, sağı ve solu için birer tane. Böylece ekran ölçüsü ne olursa olsun, detay ekranı denetleyicisini dolduracak şekilde genişleyecektir. Otomatik Yerleşim koşulları eklemenin bir çok yolu var, ama en kolay yolu şimdilik görsel ekranını seçip, ardından Editor menüsüne giderek choose > Resolve Auto Layout Issues > Reset To Suggested Constraints seçeneğine tıklamak olacaktır.

Menüde bu seçeneğin iki kez listelendiğini göreceksiniz, çünkü iki zekice farklı seçenek var. Ama bu örnekte hangisini seçtiğinizin bir önemi yok. Eğer tuştakımı kestirmesi tercih ederseniz, Shift+Alt+Cmd+= tuşlarına basarak aynı şeyi yapabilirsiniz.

Yerleşiminiz görsel olarak, koşulları bir kez eklediğinizde birşey değişmemiş gibi görünecek, ama aslında pek göze çarpmayan iki fark var. İlki, detay ekranı denetleyicisi üzerindeki UIImageView çevreleyen ince mavi bir çizgi var şimdi. Bu, Interface Builder'ın görsel ekranının doğru Otomatik Düzenleme tanımlarına sahip olduğunu gösterme şeklidir.

İkincisi, document outlines panelinde, görsel ekranının altında "Constraints" adında yeni bir girdi göreceksiniz. 4 koşulun tamamı, bu Constraints elemanının altında gizlenmiş bir şekilde eklidir ve eğer merak ediyorsanız, her birini görüntülemek için bu elemanı genişletebilirsiniz.

Eklenen koşullarla, Interface Builder'da işimizi bitirmeden önce burada yapılması gereken bir şey daha var ve o da yeni görsel ekranımızı biraz kodla birbirine bağlamak. Görüyorsunuz, yerleşim içindeki görsel ekranına sahip olmak yeterli olmuyor; eğer aslında görsel ekranını kod içerisinde kullanmak istiyorsak, yerleşime iliştirilecek bir özellik oluşturmamız gerekiyor.

Bu özellik daha önceden yaptığımız pictures dizisi gibi, ama kullanmamız gereken biraz daha fazla "ilginç" Swift sözdizimine sahip. Daha da zeki bir şekilde, eğer başka grafiksel IDE'ler kullandıysanız, beyninizi döngüye sokacak olan kullanıcı arayüz tasarımının gerçekten tuhaf bir parçası kullanılarak yaratılıyor.

Bir giriş yapalım ve ben de açıklamaya çalışayım. Xcode, Assistant Editor (Yardımcı Düzenleyici) adında, Xcode düzenleyicisini ikiye ayıran özel bir ekran düzenlemesine sahip: Yukarıda önceden sahip olduğunuz görünüş ve altta da ilgili görünüş. Bu durumda, üstte Interface Builder gösterilecek, altında da detay ekranı denetleyicisinin kodu.

Xcode, Interface Builder'da seçili olan elemana göre hangi kodun gösterileceğine karar verir. O yüzden, görsel ekranının seçili olduğundan emin olun ve menüden View > Assistant Editor > Show Assistant Editor seçeneğini tıklayın. Tabi isterseniz, Alt+Cmd+Return kısayol tuşlarını da kullanabilirsiniz.

Xcode, yardımcı düzenleyiciyi iki yatay panel yerine, iki dikey panel olarak da görüntüleyebilir. Biri diğerinin üstünde olan, yatay panelleri daha kullanışlı buluyorum. View > Assistant Editor menüsüne gidip, Assistant Editors On Right (Yardımcı Düzenleyici Sağda) veya Assistant Editors on Bottom (Yardımcı Düzenleyici Altta) seçenekleri arasında geçiş yapabilirsiniz.

Hangisini seçtiğinizden bağımsız olarak, Interface Builder'ın bir panelinde detay ekranı denetleyicisini, diğer panelde ise DetailViewController.swift dosyasının kaynak kodunu görüyor olmalısınız. Xcode, DetailViewController.swift dosyasının yüklendiğini biliyor, çünkü storyboard ID'sini değiştirdikten sonra, bu ekranın class'ını “DetailViewController” olarak değiştirdiniz.

Şimdi, UI'ın tuhaf parçasında sıra. Bununla yapmak istediğim şey şudur:

  1. Görsel ekranının seçili olduğundan emin ol.
  2. Tuştakımındaki Ctrl tuşuna basılı tut.
  3. Görsel ekranı üzerinde farenin tuşuna bas ve sakın bırakma.
  4. Ctrl tuşuna ve fare tuşuna basmaya devam ederken, görsel ekranından koduna doğru çek; yardımcı düzenleyicinin diğer panelinin içine doğru.
  5. Fare imlecini hareket ettirirken, görsel ekranından kodunuza doğru büyüyen mavi bir çizgi görmelisiniz. Bu çizgiyi, class DetailViewController: UIViewController { ve override func viewDidLoad() { arasına gelene kadar çekin.
  6. Bu ikisi arasındayken, yatay mavi bir çizginin ucunda Insert Outlet (Ekleme Çıkışı) veya Outlet Connection (Ekleme Bağlantısı) yazan bir araç kutusu görünmesi gerekli. Bunu gördüğünüzde, hem Ctrl tuşunu, hem de farenin tuşunu bırakın (hangisini önce bıraktığınızın önemi yok).

Bu adımları takip ettiyseniz, beş tane alanı olan bir balon görünecek: Connection (Bağlantı), Object (Nesne), Name (İsim), Type (Tip) ve Storage (Bellek).

Interface Builder'dan kodunuza doğru Ctrl-sürükle yaptığınızda, sizin için bir çıkış oluşturmak için bir baloncuk görünecek.

Varsayılan olarak seçenekler connection için "Outlet", Object için "Detail View Controler", isim için boşluk, type için "UIImageView" ve storage için de "Strong" (Güçlü) olmalı. Eğer storage için "Weak" (Zayıf) seçeneğini görüyorsanız, bunu "Strong" ile değiştirin lütfen. Xcode bu ayarları buradan itibaren unutmayacaktır.

Name dışında hepsini yalnız bırakın; oraya "imageView" girmek istiyorum. Bunu yaptığınızda, Connect butonuna tıklayın ve Xcode, DetailViewController.swift dosyasındaki koda bir satır eklesin. Şu şekilde görüyor olmalısınız:

class DetailViewController: UIViewController {
    @IBOutlet var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

Koddaki yeni satırın solunda, satır numarasının yanındaki payın içinde, etrafında bir çizgi ile gri bir daire var. Eğer farenizin imlecini onun üzerinde hareket ettirirseniz, görsel ekranınız yanıp sönecek. Bu küçük daire Xcode'un, storyboard'ınızdaki görsel ekranına kod çizgisinin bağlı olduğunu size bildirme şekli.

Dolayısıyla, Interface Builder'dan doğruca Swift dosyamızın içine Ctrl tuşuna basılı tutarak fare imlecini çektik ve sonucunda Xcode bizim için birkaç satır kod yazdı:

  • @IBOutlet: Bu nitelik Xcode'a, bu kod satırı ile Interface Builder arasında bir bağlantı olduğunu söyler.
  • var: Bu, yeni bir değişken veya değişken özelliği tanımlar.
  • imageView: Bu, UIImageViewe atanan özelliğin adıydı. Büyük harf kullanım şekline dikkat edin: Değişkenler ve sabitler küçük harfle başlamalı, ardından herhangi bir müteakip sözcüğün baş harfi büyük olur. Örneğin myAwesomeVariable. Bazen camel case adıyla da anılır (devenin –camel– hörgücüne benzetilerek bu ad verilmiştir).
  • UIImageView!: Bu, UIImageView tipinde bir özellik tanımlar. Ardından da yine implicitly unwrapped optional (dolaylı olarak açılan optional) sembolü görüyoruz: !. Bunun anlamı, UIImageView orada olabilir de, olmayabilir de; ama biz onu kullanmak istediğimiz zaman orada olacağından kesinlikle eminiz.

Eğer dolaylı olarak açılan optional'ları anlamaya çabalıyorsanız (dert etmeyin, çünkü çok karışıklar!), bu kod biraz daha konuyu netleştirebilir. Görüyorsunuz, detay ekranı denetleyicisi oluşturulduğunda, onun ekranı henüz yüklenmemişti; CPU üzerinde çalışan kod parçası sadece.

Temel işler yapıldığı zaman (örneğin, onları saklayacak yeteri kadar hafıza ayrıldığında), iOS doğruca gider ve storyboard'tan şablonu yükler. Ardından storyboard'tan kodlara olan tüm çıkışları bağlar.

Detay denetleyicisi ilk yapıldığında, UIImageView yoktu, çünkü henüz oluşturulmamıştı; ama hafızada onun için biraz boşluğa hala ihtiyacımız var. İşte bu noktada, özellik nil olur veya sadece hafızada bir boşluk olur. Ama ekran yüklendiğinde ve çıkış bağlantısı yapıldığında, UIImageView gerçek bir UIImageView işaret edecektir; nil değerini değil. Dolayısıyla biz de onu kullanmaya başlayabiliriz.

Uzun lafın kısası: Hayatına nil olarak başlıyor, ardından biz onu kullanmadan önce bir değer veriliyor; böylece onu kullanmak isteyinceye kadar asla nil olmayacağından emin oluyoruz (dolaylı olarak açılan optional'ların ders kitabı konusu). Eğer yine de dolaylı olarak açılan optional'ları anlamadıysanız, hiçbir sorun yok; devam edin lütfen, çünkü zaman içinde netleşecek.

Böylece detay ekranımız tamamlanmış oluyor; şimdilik Interface Builder ile işimiz bitti; kod dosyasına dönebiliriz. Bu aynı zamanda yardımcı düzenleyici ile de işimizin bittiği anlamına geliyor. Dolayısıyla, View > Standard Editor > Show Standard Editor'a giderek düzenleyiciyi tam ekran olarak kullanmaya dönebilirsiniz.

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

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

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.