Swift ilə Kaydırma Görünüşü yaradın: 9 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46

Bir neçə ay əvvəl, swift və Xcode varlığını bilmirdim. Bu gün yaratmaq istədiyim tətbiqin kiçik bir hissəsini inkişaf etdirə bildim. Sizinlə bölüşmək istədiyim sərin bir şey yarada bildim.

Bu təlimatda, istifadəçilərin yeni bir hesab qeydiyyatdan keçirmək istədikləri zaman yönləndiriləcəyi bir sürüşmə görünüşü səhnəsi qurma prosesini sizə təqdim edəcəyəm. Yolda, etdiyimiz şeylərə nəzəri izahlar verəcəyimə əmin olacağam ki, əslində nə etdiyimizi anlaya biləsiniz.

Bunu etməzdən əvvəl, Swift və Xcode nədir haqqında danışaq:

1. Swift macOS, iOS, watchOS və tvOS üçün güclü və intuitiv proqramlaşdırma dilidir. Swift kodunu yazmaq interaktiv və əyləncəlidir, sintaksis qısa, lakin ifadəlidir və Swift, inkişaf etdiricilərin sevdiyi müasir xüsusiyyətlərə malikdir. Swift kodu dizayn baxımından etibarlıdır, eyni zamanda ildırım sürətində işləyən bir proqram da istehsal edir. Apple'ın Cocoa və Cocoa Touch çərçivələri və Apple məhsulları üçün yazılmış mövcud Objective-C kodunun böyük bir hissəsi ilə işləmək üçün hazırlanmışdır. Açıq mənbə LLVM tərtibçi çərçivəsi ilə qurulmuşdur və 2014-cü ildə buraxılan 6-cı versiyadan bəri Xcode-a daxil edilmişdir. Apple platformalarında C, Objective-C, C ++ və Swift kodlarının işləməsinə imkan verən Objective-C iş vaxtı kitabxanasından istifadə olunur. bir proqram çərçivəsində.

2. Xcode, macOS, iOS, watchOS və tvOS üçün proqram təminatı hazırlamaq üçün Apple tərəfindən hazırlanmış proqram təminatı vasitələri dəsti olan macOS üçün inteqrasiya olunmuş inkişaf mühitidir (IDE).

Addım 1: Xcode yükləyin

Xcode 10, bütün Apple platformaları üçün inanılmaz tətbiqlər yaratmaq üçün lazım olan hər şeyi ehtiva edir. İndi Xcode və Alətlər macOS Mojave -də yeni Qaranlıq Modda əla görünür. Mənbə kodu redaktoru, kodu daha asan çevirməyinizə və ya yenidən düzəltməyinizə, əlaqəli xəttin yanında mənbə nəzarətindəki dəyişiklikləri görməyinizə və yuxarı axın kod fərqləri haqqında ətraflı məlumat əldə etməyinizə imkan verir. Xüsusi vizualizasiya və məlumat təhlili ilə öz alətinizi qura bilərsiniz. Swift proqramı daha sürətli tərtib edir, daha sürətli tətbiqlər təqdim etməyə kömək edir və hətta daha kiçik ikili fayllar yaradır. Test dəstləri dəfələrlə daha sürətli tamamlanır, bir komanda ilə işləmək daha sadə və daha təhlükəsizdir və daha çox şeydir.

Xcode 10, proqramınızı daha tez tərtib edən, daha sürətli tətbiqlər təqdim etməyə kömək edən və hətta daha kiçik ikili fayllar yaradan Swift 4.2 -ni ehtiva edir. Swift 4.0 ilə müqayisədə, ən son Swift tərtibçisi böyük tətbiqləri iki qat daha sürətli qura bilər.* Yeni Xcode yeni qurma sistemi ilə birlikdə gündəlik redaktə, qurma və sınaq iş axını daha sürətli olur. Ən son çox nüvəli Mac aparatı üçün optimallaşdırılmış Xcode və Swift ildırım sürətində inkişaf platforması yaradır.

Addım 2: Başlayaq

Beləliklə, edəcəyimiz şey Xcode -a getmək və yeni bir layihə yaratmaqdır. Yeni bir layihəni tıkladıqdan sonra tətbiqimiz tək görünüşlü bir tətbiq olacaq. Bilməyənlər üçün tək baxış proqramı hər şeyi sıfırdan başlamanız lazım olduğunu və proqramlaşdıra biləcəyimiz tək bir görünüşün olacağını bildirir.

Məhsulunuzu TutorialApp adlandırın. App Store -da tətbiqlər yayımlayan təcrübəli bir geliştiriciyseniz, ehtimal ki, bir komandanız olacaq, ancaq yenisinizsə və heç bir tətbiqiniz yoxdursa, bu sahəni atlaya bilərsiniz. Təşkilat adında, əgər varsa, şirkətin adını yaza bilərsiniz, mənim vəziyyətimdə yalnız MacBook Pro -nu saxlayacağam. Daha sonra, Təşkilat Tanıtıcısı, layihənizin bənzərsiz bir identifikatoru kimi qəbul edilir, buna görə də istədiyinizi yaza bilərsiniz. Dil mütləq sürətli olacaq.

Beləliklə, sonrakı düyməni basın və layihəni masaüstündə saxlayaq ki, daxil olaq.

Yeni layihə üç fayldan ibarətdir: AppDelegate.swift, ViewController.swift və bu təlimatın ulduzu: Main.storyboard. Dağıtım Məlumatı altında> Ümumi layihə parametrlərində Cihazın istiqamətlənməsi, Cihazları iPhone olaraq təyin edin. Bu yalnız portretli bir tətbiq olduğundan, Landşaft Sol və Landşaft Sağ seçimlərini işarələyin. Interface Buildereditor -da görmək üçün layihə naviqatorunda Main.storyboard -u açın:

Konfiqurasiyada heç bir dəyişiklik etməyəcəyik və birbaşa ana lövhəyə keçəcəyik. Tək görünüşlü bir tətbiq hazırladığımız üçün sadə, tək, boş bir görünüş yaratdıq. Bu, üzərində işləməli olduğumuz bir şeydir.

Addım 3: UI -də işləmək

Görünüş nəzarətçisi üçün rəsmi hekayə lövhəsi terminologiyası "səhnə" dir, ancaq şərtləri bir -birinin əvəzinə istifadə edə bilərsiniz. Bir səhnə, lövhədə bir görünüş nəzarətçisini təmsil edir.

Burada boş bir görünüşü olan tək bir görünüş nəzarətçisini görürsünüz. Soldan görünüş nəzarətçisinə işarə edən ox, bu lövhə üçün göstəriləcək ilkin baxış nəzarətçisinin olduğunu göstərir. Hekayə lövhəsi redaktorunda bir tərtibat, Nəzarət Kitabxanasındakı (yuxarı sağ küncdə olan) idarəetmə elementlərini görünüş nəzarətçisinə sürükləyərək aparılır.

Hekayə lövhəsi redaktorunun necə işlədiyini öyrənmək üçün Videoda göründüyü kimi Nəzarət Kitabxanasındakı bəzi idarəetmə elementlərini boş görünüş nəzarətçisinə sürükləyin.

Nəzarətləri içəriyə sürüklədikdə, onlar soldakı Sənəd Konturunda görünməlidir.

İstədiyiniz İstifadəçi İnterfeysini yarada bilərsiniz. Mənim vəziyyətimdə, şəkildə gördüyünüzdən istifadə etdim.

Addım 4: İkinci Baxış Nəzarətçisini hazırlayın və Segues (keçişlər) başlatın

Beləliklə, tətbiqimdə, istifadəçi "Yeni Hesabı Qeyd et" düyməsini basdıqda, onun qeyd hesabı səhifəsinə yönləndirilməsini istəyirəm. Bu məqsədlə hər bir səhifə yeni bir səhnə, yeni bir görüntüdür. Bu səbəbdən, obyekt kitabxanasında tapa biləcəyiniz ikinci bir görünüş nəzarətçisi yaratmalıyıq.

Görünüş nəzarətçisini yazın və ilkin baxış nəzarətçinizin yanına qoyun. Bu səhnə qeyd görünüşü nəzarətçisindən məsul olacaq. Bu səhifəyə yönləndirmə iki şəkildə edilə bilər:

1. düymədən digər görünüş nəzarətinə bir hərəkət bağlantısı qurduğumuzda bunu əl ilə edə bilərik
2. bunu proqramlı şəkildə edə bilərik

Seçdiyim şey əl ilə etməkdir. Bu qədər sadədir:

1. Düyməyinizə bir sol klikləyin (mənim vəziyyətimdə Yeni Hesab Qeyd et)
2. Komandanı basıb saxlayın və sol siçan düyməsini basaraq qeyd nəzarət sahəsinə sürükləyin.
3. Orada buraxın və "Modal olaraq təqdim et" seçin

Addım 5: Qeydiyyat prosesi üçün proqramlaşdırma sinfi yaradın

Beləliklə, indi yeni səhnə üçün xüsusi bir kodlaşdırma sinfi yaratmaq istəyirik.

Bunu etmək üçün aşağıdakı addımları atmalısınız:

• layihə qovluğuna sağ vurun
• kakao toxunma sinfi adlı yeni faylı vurun
• sinifdə yaz: RegisterVC
• ÇOX VACİB! Alt sinifin UIViewController tipində olduğundan əmin olun
• dil sürətli olmalıdır.
• növbəti klikləyin və kakao sinifinizi layihənizin əsas kökündə saxlayın.
• Əsas lövhəni vurun və yeni baxış nəzarətçisinə keçin
• yuxarıda yerləşən sarı düyməni basın
• sağda sinif müfəttişinə gedin və VC Qeydiyyatına istinad edin (Costum sinfi, sinif = RegisterVC

Addım 6: Səhifənin Üfüqi Sürüşməsini yaradın

İOS -da, ekrana tamamilə sığmayan məzmuna baxmaq üçün sürüşmə görünüşləri istifadə olunur. Kaydırma görünüşlərinin iki əsas məqsədi var:

İstifadəçilərin göstərmək istədikləri məzmunun sahəsini sürükləməsinə, istifadəçilərin çimdik hərəkətlərindən istifadə edərək göstərilən məzmunu böyütməsinə və ya kiçiltməsinə icazə vermək. İOS tətbiqlərində istifadə olunan ümumi bir idarəetmə - UITableView - UIScrollView alt sinifidir və ekrandan daha böyük məzmuna baxmaq üçün əla bir yol təqdim edir.

Üfüqi sürüşdürmədə alt səhifələrdən nə istifadə olunur?

Yaxşı, 6 fərqli səhifə yaratsaydım, hər biri üçün xüsusi bir sinif yaratmalı olduğumu bildirirəm və bir sinifdən digərinə məlumat ötürmək o qədər də əlverişli deyil. Məsələn, e -poçtumu yazdığımda və sonrakı düyməni basdığımda, fərqli bir baxış nəzarətçim varsa, View Controller -in birinci səhifəsini tərk edəcəm, sonra ikincisi təqdim ediləcək. Bu vəziyyətdə, ilk baxış nəzarətçisinin məlumatı, sonrakı birinə, sonra yenidən üçüncü görünüş nəzarətçisinə və s. Ötürülməlidir. Ehtiyacım olan bütün baxış nəzarətçilərinə sahib olduğum zaman, bütün məlumatları toplamaq məcburiyyətində qalacağam. səhifələr və serverə göndərin. Beləliklə, bu, həqiqətən də kompleks olardı.

Beləliklə, bu baxış nəzarətçisinin yaradılmasına davam edərkən, mənim vəziyyətimdə yaratmaq istədiyim 5 səhifəm var idi:

1. E -poçt
2. Tam Adı
3. Şifrə
4. Doğum tarixi
5. Cins

Bu o deməkdir ki, yaradacağımız görüntü idarəedicisi əvvəllər yaratdığımızdan 5 dəfə böyük olmalıdır.

Görünüş nəzarətçinizi seçin və yuxarı, sağ küncdə gedin və hökmdar simgesini vurun və Simulyasiya edilmiş Ölçüyü düzəldin. Genişliyi və hündürlüyü tənzimləmək üçün Freeform seçəcəksiniz. IPhone 8 üçün uyğun olan ekranın standart genişliyi 375 -dir, buna görə də 375*5 = 1875 -ə vururam. İşdə, genişləndirilmiş bir görünüş nəzarətçiniz var.

Eyni şəkildə, bütün fərqli telefonlar və ekran ölçüləri üçün eyni prosesi izləyirsiniz.

Kaydırma görünüşünün işləməsi üçün bir sürüşmə görüntüsü obyektinə ehtiyacımız var. Scroll View, tətbiqin pəncərəsinin ölçüsündən daha böyük olan məzmunu göstərmək üçün bir mexanizm təmin edir. Bu obyekti vurun, sürükləyin və görünüş nəzarətçisinin sol üst küncünə qoyun və X və Y -nin sıfır mövqedə olduğundan və uzanmanın buna uyğun olaraq görüntü nəzarətçinizə uyğun olduğundan əmin olun.

Kaydırma Görünüşü yalnız sürüşdürməyə imkan verir, başqa heç nə. Sonra digər görünüşləri saxlayacaq bir məzmun görünüşü əlavə etməliyik. UIView -i tapa bilərsiniz - hadisələri çəkdiyi və aldığı düzbucaqlı bir bölgəni təmsil edir - obyekt kitabxanasında. Sadəcə, klikləyin və sürüşmə görünüşünə sürükləyin və bir daha buna uyğun olaraq uzatın.

Sol paneldən sürüşmə görünüşünü seçin və hizalanmanı 0, 0, 0, 0 adlandıracağıq və məhdudiyyətlər əlavə edəcəyik. Məzmun görünüşü üçün eyni şeyi edin.

Addım 7: Yatay sürüşdürmənin alt səhifələri üçün İstifadəçi İnterfeysini inkişaf etdirin

Bu addımda alt səhifələrinizin UI-ni yaratmalısınız. Etdiyim şey, Sketch -də bir prototip hazırlamaq və sonra Xcode -da qurmaqdır.

Addım 8: Dizaynı Xcode'da tətbiq edin

Növbəti addım bu dizaynı Xcode'da tətbiq etməkdir. Bunu etmək üçün bütün alt səhifələr üçün çıxış əlaqələri yaratmalı və "ana görünüşü" üçün başqa bir əlaqə yaratmalısınız, yəni bütün görünüş nəzarətçisi üçün bir çıxış bağlantısı.

Bir hekayə lövhəsindəki elementlər mənbə koduna bağlıdır. Bir hekayə lövhəsinin yazdığınız kodla əlaqəsini başa düşmək vacibdir.

Bir hekayə lövhəsində bir səhnə bir məzmun ekranı və ümumiyyətlə bir baxış nəzarətçisini təmsil edir. Baxış nəzarətçiləri tətbiqinizin davranışını həyata keçirir və subviews iyerarxiyası ilə tək bir məzmun görünüşünü idarə edir. Tətbiqin məlumatlarını əhatə edən tətbiqin məlumat modeli ilə bu məlumatları əks etdirən görünüşlər, məzmun baxışlarının həyat dövrünü idarə edən, cihaz döndükdə oriyentasiya dəyişikliklərini idarə edən, tətbiqinizdəki naviqasiyanı təyin edən məlumat axını arasında əlaqələndirirlər. və istifadəçi girişinə cavab vermə davranışını tətbiq edin. İOS -dakı bütün görünüş nəzarətçi obyektləri UIViewController və ya alt siniflərindən biridir.

Xüsusi görünüş nəzarətçi alt sinifləri yaradaraq tətbiq edərək, görünüş nəzarətçilərinizin davranışını kodda təyin edirsiniz. Daha sonra kodda təyin etdiyiniz davranışı və lövhənizdə təyin etdiyiniz istifadəçi interfeysini əldə etmək üçün hekayə lövhənizdəki həmin siniflər və səhnələr arasında əlaqə yarada bilərsiniz.

Xcode, əvvəllər baxdığınız ViewController.swift siniflərindən birini yaratdı və onu lövhənizdə işlədiyiniz səhnəyə bağladı. Daha çox səhnə əlavə etdikdə, bu əlaqəni Kimlik müfəttişində özünüz edəcəksiniz. Şəxsiyyət müfəttişi, hekayə lövhənizdə bir obyektin kimliyinə aid olan xüsusiyyətlərini, məsələn obyektin hansı sinfə aid olduğunu redaktə etməyə imkan verir.

UI üçün çıxış nöqtələri yaradın Bir çıxış yaratmaq üçün, nəzarət lövhənizdəki müəyyən bir obyektdən bir görünüş nəzarətçi faylına sürükləyin. Bu əməliyyat, görüntü nəzarətçi faylınızdakı obyekt üçün bir xüsusiyyət yaradır ki, bu da iş vaxtı koddan həmin obyektə daxil olmağa və onu idarə etməyə imkan verir.

1. Hekayə lövhənizi açın, Main.storyboard.
2. Köməkçi redaktoru açmaq üçün Xcode -un sağ üst köşəsindəki Xcode alətlər çubuğundakı Köməkçi düyməsini vurun. İşləmək üçün daha çox yer istəsəniz, Xcode alətlər çubuğundakı Navigator və Utilities düymələrini tıklayaraq layihə naviqatorunu və köməkçi sahəni yığışdırın.
3. Kontur görünüşünü də yıxa bilərsiniz.

Redaktor köməkçisinin yuxarısında görünən redaktor seçmə çubuğunda köməkçi redaktoru Önizləmə -dən Avtomatik> ViewController.swift -ə dəyişin.

Alt səhifəni vurun və koddakı müvafiq sinfə sürükləyin.

Addım 9: Xüsusi Jestləri birləşdirin

ÇALIŞMA JESTİ

İstifadəçi bir və ya daha çox barmağını ekranda üfüqi və ya şaquli istiqamətdə hərəkət etdirdikdə sürüşmə jesti baş verir. Sürüşmə hərəkətlərini aşkar etmək üçün UISwipeGestureRecognizer sinifindən istifadə edin.

Çalmak jestinin tətbiqi

Addım 1: viewDidLoad () metoduna sürüşdürmə jestləri əlavə edin

func viewDidLoad () {super.viewDidLoad () funksiyasını ləğv edin

let swipeLeft = UISwipeGestureRecognizer (hədəf: özünü, hərəkət: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (hədəf: özünü, hərəkət: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

swipeUp = UISwipeGestureRecognizer (hədəf: özünü, hərəkət: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (hədəf: özünü, hərəkət: #selector (handleGesture)) swipeDown.direction =. aşağı self.view.addGestureRecognizer (swipeDown)}

Addım 2: handleGesture () metodunda jest aşkarlanmasını yoxlayın func handleGesture (jest: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Sağa Çal")} başqa halda gesture.direction == UISwipeGizer sol {print ("Sola sürüşdürün")} başqa halda gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Up to Swipe")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Down Down")}}

Tətbiqimdə swipeRight istifadə etmək istədim, ancaq tətbiqiniz üçün daha uyğun olanı istifadə etməkdən azad oldum.

İndi bunu kodumuza tətbiq edək.

Daha əvvəl yaratdığımız registerVC.swift -ə gedirik və kodu şəkillərdə gördüyünüz kimi yazırıq.

KODUN İZAHI

current_x ScrollView -in (üfüqi mövqe) cari mövqeyini əldə etməsinə icazə verin, ekranın genişliyini əldə etsin, bu ölçüsü çıxaraq new_x -in scrollview -ın cari mövqeyindən new_x -ə keçməsinə icazə verin, əgər current_x> 0 olduqda 0 -dan çox olmadıqca ekranın eni ilə geri qayıdıram. - 0 birinci səhifədir.

Və bitirdik!

Uğurlar uşaqlar!