Swift ile Kaydırma Görünümü Oluşturun: 9 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

Birkaç ay önce Swift ve Xcode'un varlığını bilmiyordum. Bugün oluşturmak istediğim uygulamanın küçük bir bölümünü geliştirebildim. Sizinle paylaşmak istediğim harika bir şey yaratabildim.

Bu eğitimde, yeni bir hesap açmak istediklerinde kullanıcıların yeniden yönlendirileceği bir kaydırma görünümü sahnesi oluşturma sürecinde size yol göstereceğim. Bu arada, yaptığımız şeylerin aslında ne olduğunu anlayabilmeniz için size yaptığımız şeylerin bazı teorik açıklamalarını sağlayacağımdan emin olacağım.

Bunu yapmadan önce Swift ve Xcode'un ne olduğundan bahsedelim:

1. Swift, macOS, iOS, watchOS ve tvOS için güçlü ve sezgisel bir programlama dilidir. Swift kodu yazmak etkileşimli ve eğlencelidir, sözdizimi kısa ama etkileyicidir ve Swift, geliştiricilerin sevdiği modern özellikleri içerir. Swift kodu tasarımı gereği güvenlidir, ancak aynı zamanda ışık hızında çalışan yazılımlar üretir. Apple'ın Kakao ve Kakao Dokunma çerçeveleri ve Apple ürünleri için yazılmış mevcut Objective-C kodunun büyük gövdesi ile çalışmak üzere tasarlanmıştır. Açık kaynaklı LLVM derleyici çerçevesi ile oluşturulmuştur ve 2014'te yayınlanan 6. sürümden beri Xcode'a dahil edilmiştir. Apple platformlarında, C, Objective-C, C++ ve Swift kodunun çalışmasına izin veren Objective-C çalışma zamanı kitaplığını kullanır. tek bir program içinde.

2. Xcode, macOS, iOS, watchOS ve tvOS için yazılım geliştirmek üzere Apple tarafından geliştirilen bir dizi yazılım geliştirme aracı içeren macOS için entegre bir geliştirme ortamıdır (IDE).

Adım 1: Xcode'u indirin

Xcode 10, tüm Apple platformları için harika uygulamalar oluşturmak için ihtiyacınız olan her şeyi içerir. Artık Xcode ve Instruments, macOS Mojave'deki yeni Dark Mode'da harika görünüyor. Kaynak kodu düzenleyicisi, kodu daha kolay dönüştürmenize veya yeniden düzenlemenize, ilgili satırın yanında kaynak denetimi değişikliklerini görmenize ve yukarı akış kodu farklılıklarıyla ilgili ayrıntıları hızla almanıza olanak tanır. Özel görselleştirme ve veri analizi ile kendi enstrümanınızı oluşturabilirsiniz. Swift, yazılımı daha hızlı derler, daha hızlı uygulamalar sunmanıza yardımcı olur ve daha da küçük ikili dosyalar oluşturur. Test paketleri birçok kez daha hızlı tamamlanır, bir ekiple çalışmak daha basit, daha güvenli ve çok daha fazlasıdır.

Xcode 10, yazılımınızı daha hızlı derleyen, daha hızlı uygulamalar sunmanıza yardımcı olan ve daha da küçük ikili dosyalar oluşturan Swift 4.2'yi içerir. Swift 4.0 ile karşılaştırıldığında, en yeni Swift derleyicisi büyük uygulamaları iki kattan daha hızlı oluşturabilir.* Yeni Xcode yeni derleme sistemiyle birlikte günlük düzenleme, derleme ve test iş akışınız çok daha hızlıdır. En yeni çok çekirdekli Mac donanımı için optimize edilen Xcode ve Swift, ışık hızında bir geliştirme platformu oluşturur.

2. Adım: Başlayalım

Yani yapacağımız şey Xcode'a gidip yeni bir proje oluşturmak. Yeni bir projeye tıkladığımızda uygulamamız tek bir görünüm uygulaması olacaktır. Bilmeyenler için, tek bir görünüm uygulaması, her şeye sıfırdan başlamanız gerekeceği ve programlayabileceğimiz tek bir görünüm olacağı anlamına gelir.

Ürününüzü TutorialApp olarak adlandırın. App Store'da uygulama yayınlayan deneyimli bir geliştiriciyseniz, muhtemelen bir ekibiniz olacaktır, ancak yeniyseniz ve yayınlanmış herhangi bir uygulamanız yoksa bu alanı atlayabilirsiniz. Kuruluş adına, varsa şirketin adını yazabilirsiniz, benim durumumda sadece MacBook Pro'yu tutacağım. Ardından, Organizasyon Tanımlayıcısı projenizin benzersiz tanımlayıcısı gibi bir şey olarak kabul edilir, bu nedenle istediğinizi yazabilirsiniz. Dil kesinlikle hızlı olacaktır.

Öyleyse, ileri'ye basın ve projeyi masaüstüne kaydedelim, böylece erişimi kolay olsun.

Yeni proje, AppDelegate.swift, ViewController.swift ve bu öğreticinin yıldızı olmak üzere üç dosyadan oluşur: Main.storyboard. Dağıtım Bilgileri > Cihaz Oryantasyonu altında Genel proje ayarlarında Cihazları iPhone olarak ayarlayın. Bu yalnızca dikey bir uygulama olduğundan, Yatay Sol ve Yatay Sağ seçeneklerinin işaretini kaldırın. Arayüz Oluşturucu'da görüntülemek için proje gezgininde Main.storyboard'u açın:

Yapılandırmada herhangi bir değişiklik yapmayacağız ve doğrudan ana storyboard'a gideceğiz. Tek bir görünüm uygulaması yaptığımızdan, basit bir tek, boş görünüm oluşturduk. Bu üzerinde çalışmamız gereken bir şey.

3. Adım: Kullanıcı Arayüzünde Çalışmak

Bir görünüm denetleyicisi için resmi storyboard terminolojisi "sahne" dir, ancak terimleri birbirinin yerine kullanabilirsiniz. Bir sahne, film şeridinde bir görünüm denetleyicisini temsil eder.

Burada boş bir görünüm içeren tek bir görünüm denetleyicisi görüyorsunuz. Soldan görünüm denetleyicisini gösteren ok, bu film şeridi için görüntülenecek ilk görünüm denetleyicisi olduğunu gösterir. Film şeridi düzenleyicisinde bir düzen tasarlamak, denetimleri Nesne Kitaplığından (sağ üst köşeye bakın) görünüm denetleyicinize sürükleyerek yapılır.

Film şeridi düzenleyicisinin nasıl çalıştığına dair bir fikir edinmek için, videoda görüldüğü gibi Nesne Kitaplığından bazı kontrolleri boş görünüm denetleyicisine sürükleyin.

Kontrolleri içeri sürüklediğinizde, soldaki Belge Anahattı'nda görünmelidirler.

İstediğiniz Kullanıcı Arayüzünü oluşturabilirsiniz. Benim durumumda, resimde gördüğünüzü kullandım.

Adım 4: İkinci Görünüm Denetleyicisi Geliştirin ve Segues'i Başlatın (geçişler)

Bu yüzden, uygulamamda, kullanıcı "Yeni Hesap Kaydet" düğmesine bastığında, onun kayıt hesabı sayfasına yönlendirilmesini istiyorum. Bu amaçla, her sayfa yeni bir sahne, yeni bir görüntüdür. Bu nedenle, nesne kitaplığında bulabileceğiniz ikinci bir görünüm denetleyicisi oluşturmamız gerekiyor.

Görünüm denetleyicisini yazın ve ilk görünüm denetleyicinizin yanına yerleştirin. Bu sahne, kayıt görünümü denetleyicisinden sorumlu olacaktır. Bu sayfaya yönlendirme iki şekilde yapılabilir:

1. butondan diğer görünüm kontrolüne eylem bağlantısı yaptığımızda manuel olarak yapabiliriz
2. programlı olarak yapabiliriz

Yapmayı seçtiğim şey, manuel olarak yapmak. Bu kadar basit:

1. Düğmenize bir sol tıklama yapın (benim durumumda Yeni Hesap Kaydolun)
2. Komutu basılı tutun ve onu kayıt kontrol sahnesine sürüklemek için farenin sol tuşuna tıklayın.
3. Orada bırakın ve "Modali Olarak Sun" u seçin

Adım 5: Kayıt Süreci için Programlama Sınıfı Oluşturun

Şimdi yeni sahne için özel bir kodlama sınıfı oluşturmak istiyoruz.

Bunu yapmak için aşağıdaki adımları yapmanız gerekir:

• proje klasörünüze sağ tıklayın
• kakao dokunma sınıfı adlı yeni dosyaya tıklayın
• sınıfta yazma: RegisterVC
• ÇOK ÖNEMLİ! Alt sınıfın UIViewController türünde olması gerektiğinden emin olun.
• dil hızlı olmalıdır.
• İleri'ye tıklayın ve kakao sınıfınızı projenizin ana köküne kaydedin.
• Ana film şeridine tıklayın ve yeni görünüm denetleyicisine gidin
• üstüne yerleştirilen sarı düğmeye tıklayın
• sağda sınıf denetçisine gidin ve Register VC'ye referans verin (Costum class, class = RegisterVC

Adım 6: Sayfanın Yatay Kaydırmasını Oluşturun

iOS'ta, ekrana tam olarak sığmayan içeriği görüntülemek için kaydırma görünümleri kullanılır. Kaydırma görünümlerinin iki ana amacı vardır:

Kullanıcıların görüntülemek istedikleri içeriğin alanını sürüklemesine izin vermek, kullanıcıların kıstırma hareketlerini kullanarak görüntülenen içeriği yakınlaştırmasına veya uzaklaştırmasına izin vermek. iOS uygulamalarında kullanılan yaygın bir denetim olan UITableView, UIScrollView'ın bir alt sınıfıdır ve ekrandan daha büyük içeriği görüntülemek için harika bir yol sağlar.

Yatay kaydırmada alt sayfalar ne işe yarar?

Eh, 6 farklı sayfa oluşturacak olsaydım, her biri için ayrı bir sınıf oluşturmam gerektiği anlamına gelirdi ve bir sınıftan diğerine bilgi aktarmak o kadar kolay değil. Örneğin, e-postamı yazıp ileri'ye tıkladığımda, farklı bir görünüm denetleyicim varsa, Görünüm Denetleyicisinin ilk sayfasından ayrılacağım ve ardından ikincisi sunulacak. Bu durumda, ilk görünüm denetleyicisinin bilgileri bir sonrakine ve daha sonra üçüncü görünüm denetleyicisine vb. iletilmelidir. İhtiyacım olan tüm görünüm denetleyicilerine sahip olduğumda, tüm verileri toplamam gerekecek. sayfaları ve bunları sunucuya gönderin. Yani, bu gerçekten karmaşık olurdu.

Bu nedenle, bu görünüm denetleyicisinin oluşturulmasına geçerken, benim durumumda oluşturmak istediğim 5 sayfa vardı:

1. E-posta
2. Ad Soyad
3. Parola
4. Doğum tarihi
5. Cinsiyet

Bu, oluşturacağımız görüntü denetleyicisinin daha önce yaptığımızdan 5 kat daha büyük olması gerektiği anlamına gelir.

Görünüm denetleyicinizi seçin ve sağ üst köşeye gidin ve cetvel simgesine tıklayın ve Simüle Edilmiş Boyutu düzenleyin. Genişliği ve yüksekliği ayarlamak için Serbest Biçimi seçeceksiniz. iphone 8'e uygun varsayılan ekran genişliği 375'tir, yani 375*5 = 1875 ile çarparsam. İşte karşınızda, genişletilmiş bir görüntü denetleyiciniz var.

Benzer şekilde, tüm farklı telefonlar ve ekran boyutları için aynı işlemi izlersiniz.

Kaydırma görünümünün çalışması için bir kaydırma görünümü nesnesine ihtiyacımız var. Kaydırma Görünümü, uygulamanın penceresinin boyutundan daha büyük olan içeriği görüntülemek için bir mekanizma sağlar. Bu nesneye tıklayın, sürükleyin ve görünüm denetleyicisinin sol üst köşesine yerleştirin ve X ve Y'nin sıfır konumda olduğundan ve gerdirmenin görünüm denetleyicinize göre olduğundan emin olun.

Kaydırma Görünümü yalnızca kaydırmamıza izin verir, başka bir şey değil. Ardından, diğer görünümleri depolayacak bir içerik görünümü eklememiz gerekiyor. UIView'u - olayları çizdiği ve aldığı dikdörtgen bir bölgeyi temsil eder - nesne kitaplığında bulabilirsiniz. Basitçe tıklayın ve kaydırma görünümüne sürükleyin ve bir kez daha uygun şekilde uzatın.

Sol panelden kaydırma görünümünü seçin ve 0, 0, 0, 0 hizalamasını çağıracağız ve kısıtlamalar ekleyeceğiz. İçerik görünümü için de aynı şeyi yapın.

7. Adım: Yatay Kaydırmanın Alt Sayfaları için Kullanıcı Arayüzünü Geliştirin

Bu adımda, alt sayfalarınızın UI'sini oluşturmanız gerekir. Yapmayı seçtiğim şey, Sketch'te bir prototip yapmak ve ardından onu Xcode'da oluşturmak.

Adım 8: Tasarımı Xcode'da Uygulayın

Bir sonraki adım, bu tasarımı Xcode'da uygulamaktır. Bunu yapmak için, tüm alt sayfalar için çıkış bağlantıları oluşturmanız ve "ana görünüm" için bir tane daha, yani tüm görünüm denetleyicisi için bir çıkış bağlantısı oluşturmanız gerekir.

Film şeridindeki öğeler kaynak koduna bağlanır. Bir storyboard'un yazdığınız kodla olan ilişkisini anlamak önemlidir.

Film şeridinde, sahne bir içerik ekranını ve tipik olarak bir görünüm denetleyicisini temsil eder. Görünüm denetleyicileri, uygulamanızın davranışını uygular ve alt görünüm hiyerarşisiyle tek bir içerik görünümünü yönetir. Uygulamanın verilerini kapsülleyen uygulamanın veri modeli ile bu verileri görüntüleyen görünümler arasındaki bilgi akışını koordine ederler, içerik görünümlerinin yaşam döngüsünü yönetirler, cihaz döndürüldüğünde yön değişikliklerini yönetirler, uygulamanızdaki navigasyonu tanımlarlar. ve kullanıcı girdisine yanıt verme davranışını uygulayın. iOS'taki tüm görünüm denetleyicisi nesneleri, UIViewController türünden veya alt sınıflarından biridir.

Özel görünüm denetleyicisi alt sınıfları oluşturup uygulayarak görünüm denetleyicilerinizin davranışını kodda tanımlarsınız. Ardından, kodda tanımladığınız davranışı ve film şeridinizde tanımladığınız kullanıcı arabirimini elde etmek için film şeridinizdeki bu sınıflar ve sahneler arasında bir bağlantı oluşturabilirsiniz.

Xcode, daha önce baktığınız ViewController.swift adında bir sınıf oluşturdu ve onu storyboard'unuzda üzerinde çalıştığınız sahneye bağladı. Daha fazla sahne ekledikçe, bu bağlantıyı Kimlik denetçisinde kendiniz yapacaksınız. Kimlik denetçisi, bir nesnenin, nesnenin hangi sınıfa ait olduğu gibi, o nesnenin kimliğiyle ilgili özelliklerini, storyboard'unuzda düzenlemenize olanak tanır.

UI için Çıkışlar Oluşturun ElementsOutlets, kaynak kod dosyalarından arabirim nesnelerine (film şeridinize eklediğiniz nesneler) başvurmanın bir yolunu sağlar. Bir çıkış oluşturmak için, film şeridinizdeki belirli bir nesneden Kontrol tuşuna basarak bir görünüm denetleyicisi dosyasına sürükleyin. Bu işlem, görünüm denetleyici dosyanızdaki nesne için, çalışma zamanında bu nesneye koddan erişmenizi ve bunları değiştirmenizi sağlayan bir özellik oluşturur.

1. Film şeridinizi açın, Main.storyboard.
2. Yardımcı düzenleyiciyi açmak için Xcode'un sağ üst köşesine yakın Xcode araç çubuğundaki Asistan düğmesini tıklayın. Çalışmak için daha fazla alan istiyorsanız, Xcode araç çubuğundaki Gezgin ve Yardımcı Programlar düğmelerini tıklatarak proje gezgini ve yardımcı program alanını daraltın.
3. Anahat görünümünü de daraltabilirsiniz.

Yardımcı düzenleyicinin üst kısmında görünen düzenleyici seçim çubuğunda, yardımcı düzenleyiciyi Önizleme'den Otomatik > ViewController. Swift'e değiştirin.

Alt sayfayı tıklayın ve koddaki uygun sınıfa sürükleyin.

9. Adım: Özel Hareketleri Entegre Edin

KAYDIRMA JEST

Kullanıcı bir veya daha fazla parmağını belirli bir yatay veya dikey yönde ekranda hareket ettirdiğinde bir kaydırma hareketi gerçekleşir. Kaydırma hareketlerini algılamak için UISwipeGestureRecognizer sınıfını kullanın.

Kaydırma hareketinin uygulanması

Adım 1: viewDidLoad() yöntemine kaydırma Hareket(ler)i ekleyin

işlevi geçersiz kıl viewDidLoad() { super.viewDidLoad()

let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer(swipeLeft)

let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer(swipeRight)

let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer(swipeUp)

let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer(swipeDown) }

Adım 2: handGesture() yönteminde hareket algılamayı kontrol edin func handleGesture(gesture: UISwipeGestureRecognizer) -> Void { if jest.direction == UISwipeGestureRecognizerDirection.right { print("Sağa Kaydırın") } else if jest.direction == UISwipeGestureRecognizerDirection. left { print("Sola Kaydır") } else if jest.direction == UISwipeGestureRecognizerDirection.up { print("Yukarı Kaydır") } else if jest.direction == UISwipeGestureRecognizerDirection.down { print("Aşağı Kaydır") } }

Uygulamamda swipeRight'ı kullanmak istedim, ancak uygulamanız için daha uygun olanı kullanmakta özgürdüm.

Şimdi bunu kodumuza uygulayalım.

Daha önce oluşturduğumuz registerVC.swift'e gidip resimlerde gördüğünüz gibi kodu yazıyoruz.

KOD AÇIKLAMASI

current_x ScrollView'ün geçerli konumunu alsın (yatay konum)screen_width'in ekranın genişliğini almasına izin ver, bu boyutun düşülmesi, new_x'in mevcut scrollview konumundan çıkmasına izin ver, current_x > 0 ise, 0'dan büyük olmadıkça ekranın genişliğine göre geri dönelim - 0 1. sayfadır.

Ve işimiz bitti!

İyi iş beyler!