Krijoni një pamje të lëvizjes me Swift: 9 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:20

Disa muaj më parë, nuk e dija ekzistencën e swift dhe Xcode. Sot, unë kam qenë në gjendje të zhvilloj një pjesë të vogël të aplikacionit që dua të krijoj. Unë kam qenë në gjendje të krijoj diçka të lezetshme, të cilën do të doja ta ndaja me ju.

Në këtë tutorial do t'ju përcjell përmes procesit të ndërtimit të një skene të pamjes së rrotullimit, në të cilën përdoruesit do të ridrejtohen kur duan të regjistrojnë një llogari të re. Gjatë rrugës, do të sigurohem që t'ju jap disa shpjegime teorike të gjërave që ne bëjmë, në mënyrë që ju në të vërtetë të kuptoni se çfarë po bëjmë.

Para se ta bëjmë këtë, le të flasim për atë që është Swift dhe Xcode:

1. Swift është një gjuhë programimi e fuqishme dhe intuitive për macOS, iOS, watchOS dhe tvOS. Shkrimi i kodit Swift është interaktiv dhe argëtues, sintaksa është koncize por ekspresive, dhe Swift përfshin veçori moderne që zhvilluesit i duan. Kodi Swift është i sigurt nga dizajni, por gjithashtu prodhon softuer që funksionon shpejt. Shtë projektuar për të punuar me kornizat Apple të Cocoa dhe Cocoa Touch dhe trupin e madh të kodit ekzistues Objective-C të shkruar për produktet e Apple. Isshtë ndërtuar me kornizën e përpiluesit me burim të hapur LLVM dhe është përfshirë në Xcode që nga versioni 6, i lëshuar në vitin 2014. Në platformat Apple, përdor bibliotekën e ekzekutimit Objective-C e cila lejon kodin C, Objective-C, C ++ dhe Swift të ekzekutohen brenda një programi.

2. Xcode është një mjedis zhvillimi i integruar (IDE) për macOS që përmban një grup mjetesh të zhvillimit të softuerit të zhvilluar nga Apple për zhvillimin e softuerit për macOS, iOS, watchOS dhe tvOS.

Hapi 1: Shkarkoni kodin Xc

Xcode 10 përfshin gjithçka që ju nevojitet për të krijuar aplikacione të mahnitshme për të gjitha platformat Apple. Tani Xcode dhe Instrumentet duken të shkëlqyera në modalitetin e ri të errët në macOS Mojave. Redaktori i kodit burimor ju lejon të transformoni ose rifaktoroni kodin më lehtë, të shihni ndryshimet e kontrollit të burimit së bashku me linjën përkatëse dhe të merrni shpejt detaje mbi ndryshimet e kodit në rrjedhën e sipërme. Ju mund të ndërtoni instrumentin tuaj me vizualizim të personalizuar dhe analizë të të dhënave. Swift përpilon softuer më shpejt, ju ndihmon të dorëzoni aplikacione më të shpejta dhe gjeneron binare edhe më të vogla. Suitat e testit përfundojnë shumë herë më shpejt, puna me një ekip është më e thjeshtë dhe më e sigurt, dhe shumë më tepër.

Xcode 10 përfshin Swift 4.2, i cili përpilon programin tuaj më shpejt, ju ndihmon të dorëzoni aplikacione më të shpejta dhe gjeneron binare edhe më të vogla. Krahasuar me Swift 4.0, përpiluesi më i fundit Swift mund të ndërtojë aplikacione të mëdha më shumë se dy herë më shpejt.* Kombinuar me sistemin e ri të ndërtimit të ri Xcode, modifikimi, ndërtimi dhe testimi juaj i përditshëm i punës është shumë më i shpejtë. Optimizuar për pajisjen më të fundit multi-core Mac, Xcode dhe Swift krijojnë një platformë zhvillimi të shpejtë.

Hapi 2: Le të Fillojmë

Pra, ajo që ne do të bëjmë është të shkojmë në Xcode dhe të krijojmë një projekt të ri. Pasi të klikojmë një projekt të ri, aplikacioni ynë do të jetë një aplikacion i vetëm. Për ata që nuk e dinë, një aplikacion i vetëm me pamje do të thotë që do t'ju duhet të filloni gjithçka nga e para dhe se do të ketë një pamje të vetme që ne mund të programojmë.

Emërtoni produktin tuaj TutorialApp. Nëse jeni një zhvillues me përvojë që publikoni aplikacione në App Store, me siguri do të keni një ekip, por nëse jeni i ri dhe nuk keni ndonjë aplikacion të publikuar, mund ta kaloni këtë fushë. Në emrin e organizatës, ju mund të shkruani emrin e kompanisë në rast se e keni një të tillë, në rastin tim unë thjesht do ta mbaj MacBook Pro. Pastaj, Identifikuesi i Organizatës konsiderohet si diçka si një identifikues unik i projektit tuaj, prandaj, ju mund të shkruani çfarë të doni. Gjuha patjetër do të jetë e shpejtë.

Pra, shtypni butonin tjetër dhe le ta ruajmë projektin në desktop, në mënyrë që të ketë qasje të lehtë.

Projekti i ri përbëhet nga tre skedarë, AppDelegate.swift, ViewController.swift dhe ylli i këtij tutoriali: Main.storyboard. Nën Info Deployment> Device Orientation në Cilësimet e përgjithshme të projektit, vendosni Devices në iPhone. Meqenëse ky është një aplikacion vetëm për portrete, hiqni zgjedhjen e opsioneve Peizazhi majtas dhe peizazhit djathtas. Hapni Main.storyboard në navigatorin e projektit për ta parë atë në Ndërfaqen Buildereditor:

Ne nuk do të bëjmë ndonjë ndryshim në konfigurim dhe do të shkojmë drejtpërdrejt në skedarin kryesor të tregimeve. Meqenëse krijuam një aplikacion të vetëm për pamje, krijuam një pamje të thjeshtë të vetme, të zbrazët. Kjo është diçka për të cilën duhet të punojmë.

Hapi 3: Puna në UI

Terminologjia zyrtare e skenarit për një kontrollues shikimi është "skenë", por ju mund t'i përdorni termat në mënyrë të ndërsjellë. Një skenë përfaqëson një kontrollues të shikimit në tabelën e tregimeve.

Këtu shihni një kontrollues të vetëm të pamjes që përmban një pamje të zbrazët. Shigjeta që tregon kontrolluesin e pamjes nga e majta tregon se është kontrolluesi fillestar i pamjes që do të shfaqet për këtë tabelë tregimi. Dizajnimi i një paraqitjeje në redaktuesin e skenarit bëhet duke tërhequr kontrollet nga Biblioteka e Objekteve (shiko këndin e sipërm të djathtë) në kontrolluesin tënd të shikimit.

Për të kuptuar se si funksionon redaktuesi i skedarit, tërhiqni disa kontrolle nga Biblioteka e Objekteve në kontrolluesin e pamjes bosh siç shihet në video.

Ndërsa tërhiqni kontrollet, ato duhet të shfaqen në Skicën e Dokumentit në të majtë.

Ju mund të krijoni Ndërfaqen e Përdoruesit që dëshironi. Në rastin tim, kam përdorur atë që shihni në foto.

Hapi 4: Zhvilloni një Kontrollues të Pamjes së Dytë dhe Iniconi Segues (kalime)

Pra, në aplikacionin tim, kur përdoruesi shtyp butonin "Regjistro një llogari të re", dua që ai të ridrejtohet në faqen e llogarisë së regjistrimit. Pra, për atë qëllim, çdo faqe e vetme është një skenë e re, një shfaqje e re. Për këtë arsye, ne duhet të krijojmë një kontrollues të pamjes së dytë, të cilin mund ta gjeni në bibliotekën e objekteve.

Shkruani kontrolluesin e shikimit dhe vendoseni pranë kontrolluesit tuaj të shikimit fillestar. Kjo skenë do të jetë përgjegjëse për kontrolluesin e shikimit të regjistrit. Përcjellja në atë faqe mund të bëhet në dy mënyra:

1. mund ta bëjmë manualisht kur bëjmë një lidhje veprimi nga butoni në kontrollin tjetër të shikimit
2. ne mund ta bëjmë atë në mënyrë programore

Ajo që kam zgjedhur të bëj është ta bëj me dorë. Isshtë e thjeshtë si kjo:

1. Bëni një klik të majtë në butonin tuaj (në rastin tim, Regjistrohu një llogari të re)
2. Mbajeni komandën dhe klikimin e majtë të miut për ta tërhequr atë në skenën e kontrollit të regjistrit.
3. Lëshojeni atje dhe zgjidhni "Prezanto në mënyrë modale"

Hapi 5: Krijoni klasë programimi për procesin e regjistrimit

Pra, tani duam të krijojmë një klasë të dedikuar të kodimit për skenën e re.

Për ta bërë këtë, duhet të bëni hapat e mëposhtëm:

• klikoni me të djathtën në dosjen e projektit tuaj
• klikoni në skedarin e ri të quajtur kakao touch class
• në klasë shkruani: Regjistrohuni VC
• SHUME E RENDESISHME! Sigurohuni që nënklasa duhet të jetë e tipit UIViewController
• gjuha duhet të jetë e shpejtë.
• klikoni tjetër dhe ruani klasën tuaj të kakaos brenda në rrënjën kryesore të projektit tuaj.
• Klikoni në tabelën kryesore të tregimit dhe shkoni te kontrolluesi i ri i pamjes
• klikoni në butonin e verdhë i cili vendoset sipër tij
• në të djathtë shkoni te inspektori i klasës dhe bëni një referencë në Regjistrin VC (klasa e kostumit, klasa = RegisterVC

Hapi 6: Ndërtoni rrëshqitjen horizontale të faqes

Në iOS, pamjet e lëvizjes përdoren për të parë përmbajtje që nuk do të përshtaten plotësisht në ekran. Pamjet e rrotullimit kanë dy qëllime kryesore:

Për t'i lejuar përdoruesit të tërheqin zonën e përmbajtjes që duan të shfaqin, për t'i lejuar përdoruesit të zmadhojnë ose zvogëlojnë përmbajtjen e shfaqur duke përdorur gjestet e mahnitjes. Një kontroll i zakonshëm i përdorur në aplikacionet iOS - UITableView - është një nënklasë e UIScrollView dhe ofron një mënyrë të shkëlqyeshme për të parë përmbajtje që është më e madhe se ekrani.

Çfarë përdorin nën-faqet në një rrëshqitje horizontale?

Epo, nëse do të krijoja 6 faqe të ndryshme, do të thoshte se duhet të krijoja një klasë të dedikuar për secilën prej tyre dhe nuk është aq e përshtatshme për të kaluar informacion nga një klasë në tjetrën. Kur për shembull unë shkruaj emailin tim dhe pastaj klikoj tjetër, nëse kam një kontrollues të ndryshëm të shikimit, do të lë faqen e parë të View Controller dhe më pas do të paraqitet e dyta. Në këtë rast, informacioni i kontrolluesit të parë të shikimit, duhet të kalojë te tjetri dhe pastaj përsëri te kontrolluesi i pamjes së tretë, etj. Kur të kem të gjithë kontrolluesit e pamjes që më nevojiten, do të më duhet të mbledh të gjitha të dhënat nga të gjitha faqet dhe dërgojini ato në server. Pra, kjo do të ishte vërtet komplekse.

Pra, duke kaluar në krijimin e këtij kontrolluesi të pamjes, në rastin tim, kisha 5 faqe që doja të krijoja:

1. E -mail
2. Emri i Plote
3. Fjalëkalimin
4. Data e lindjes
5. Gjinia

Kjo do të thotë, që kontrolluesi i pamjes që do të krijojmë, duhet të jetë 5 herë më i madh se ai që kemi bërë më parë.

Zgjidhni kontrolluesin tuaj të shikimit dhe shkoni në krye, në këndin e djathtë dhe klikoni në ikonën e sundimtarit dhe redaktoni Madhësinë e Simuluar. Ju do të zgjidhni Freeform në mënyrë që të rregulloni gjerësinë dhe lartësinë. Gjerësia e paracaktuar e ekranit e cila është e përshtatshme për iphone 8 është 375, kështu që nëse shumëzoj 375*5 = 1875. Dhe këtu ju shkoni, keni një kontrollues të zgjeruar të shikimit.

Në mënyrë të ngjashme, ju ndiqni të njëjtin proces për të gjithë telefonat dhe madhësitë e ndryshme të ekranit.

Në mënyrë që pamja e rrotullimit të funksionojë, ne kemi nevojë për një objekt të pamjes së rrotullimit. Scroll View siguron një mekanizëm për të shfaqur përmbajtje që është më e madhe se madhësia e dritares së aplikacionit. Klikoni mbi këtë objekt, tërhiqeni atë dhe vendoseni në këndin e sipërm të majtë të kontrolluesit të shikimit dhe sigurohuni që X dhe Y të jenë në pozicione zero dhe shtrirja është në përputhje me rrethanat në kontrolluesin tuaj të shikimit.

Scroll View na lejon vetëm të lëvizim, asgjë tjetër. Pastaj duhet të shtojmë një pamje të përmbajtjes, e cila do të ruajë pamje të tjera. Ju mund të gjeni UIView - ai përfaqëson një rajon drejtkëndor në të cilin vizaton dhe merr ngjarje - në bibliotekën e objekteve. Thjesht, klikoni dhe tërhiqeni atë në pamjen e rrotullimit dhe edhe një herë, shtrini atë në përputhje me rrethanat.

Zgjidhni pamjen e rrotullimit nga paneli i majtë dhe ne do të thërrasim shtrirjen 0, 0, 0, 0 dhe shtojmë kufizime. Bëni të njëjtën gjë për pamjen e përmbajtjes.

Hapi 7: Zhvilloni Ndërfaqen e Përdoruesit për Nën-faqet e Rrëshqitjes Horizontale

Në këtë hap, ju duhet të krijoni UI të nën-faqeve tuaja. Ajo që kam zgjedhur të bëj, është të krijoj një prototip në Sketch dhe pastaj ta ndërtoj në Xcode.

Hapi 8: Zbatoni Dizajnin në Xcode

Hapi tjetër është zbatimi i këtij dizajni në Xcode. Për ta bërë këtë, duhet të krijoni lidhje dalëse për të gjitha nën-faqet dhe të krijoni një tjetër për "pamjen nënë", që do të thotë, një lidhje dalëse për të gjithë kontrolluesin e pamjes.

Elementet në një storyboard janë të lidhura me kodin burimor. Importantshtë e rëndësishme të kuptoni marrëdhënien që ka një storyboard me kodin që shkruani.

Në një storyboard, një skenë përfaqëson një ekran të përmbajtjes dhe zakonisht një kontrollues shikimi. Kontrolluesit e shikimit zbatojnë sjelljen e aplikacionit tuaj dhe menaxhojnë një pamje të vetme të përmbajtjes me hierarkinë e nënpamjeve të saj. Ata koordinojnë rrjedhën e informacionit midis modelit të të dhënave të aplikacionit, i cili përfshin të dhënat e aplikacionit dhe pamjet që shfaqin ato të dhëna, menaxhojnë ciklin jetësor të pamjeve të përmbajtjes së tyre, trajtojnë ndryshimet e orientimit kur pajisja rrotullohet, përcaktojnë navigimin brenda aplikacionit tuaj, dhe zbatoni sjelljen për t'iu përgjigjur të dhënave të përdoruesit. Të gjitha objektet e kontrolluesit të shikimit në iOS janë të tipit UIViewController ose një nga nënklasat e tij.

Ju përcaktoni sjelljen e kontrolluesve tuaj të shikimit në kod duke krijuar dhe zbatuar nënklasa të personalizuara të kontrolluesit të shikimit. Pastaj mund të krijoni një lidhje midis atyre klasave dhe skenave në skenarin tuaj të tregimeve për të marrë sjelljen që keni përcaktuar në kod dhe ndërfaqen e përdoruesit që keni përcaktuar në skedarin tuaj të tregimeve.

Xcode tashmë krijoi një klasë të tillë që e shikuat më herët, ViewController.swift dhe e lidhi atë me skenën në të cilën po punoni në skedarin tuaj të tregimeve. Ndërsa shtoni më shumë skena, këtë lidhje do ta bëni vetë në inspektorin e Identitetit. Inspektori i Identitetit ju lejon të redaktoni vetitë e një objekti në historinë tuaj të historisë që lidhen me identitetin e atij objekti, siç është ajo klasë që i përket objekti.

Krijoni priza për UI ElementsOutlets ofrojnë një mënyrë për të referuar objektet e ndërfaqes-objektet që keni shtuar në skedarin tuaj të historisë-nga skedarët e kodit burimor. Për të krijuar një prizë, Kontrollo-tërhiq nga një objekt të veçantë në skedarin tënd të skedarit të kontrolluesit të shikimit. Ky operacion krijon një pronë për objektin në skedarin tuaj të shikuesit të kontrolluesit, i cili ju lejon të përdorni dhe manipuloni atë objekt nga kodi në kohën e ekzekutimit

1. Hapni tabelën tuaj të tregimeve, Main.storyboard.
2. Klikoni butonin Asistent në shiritin e veglave Xcode pranë këndit të sipërm të djathtë të Xcode për të hapur redaktuesin ndihmës. Nëse doni më shumë hapësirë për të punuar, shembni navigatorin e projektit dhe zonën e shërbimeve duke klikuar butonat Navigator dhe Utilities në shiritin e veglave Xcode.
3. Ju gjithashtu mund të rrëzoni pamjen skicë.

Në shiritin e përzgjedhësit të redaktorit, i cili shfaqet në krye të asistent redaktorit, ndryshoni redaktorin e ndihmësit nga Preview në Automatic> ViewController.swift.

Klikoni në nënfaqen dhe tërhiqeni në klasën e duhur në kod.

Hapi 9: Integroni gjestet e personalizuara

GJESTURA E RRSHIMIT

Një gjest shpullor ndodh kur përdoruesi lëviz një ose më shumë gishta nëpër ekran në një drejtim të caktuar horizontal ose vertikal. Përdorni klasën UISwipeGestureRecognizer për të zbuluar gjestet e rrëshqitjes.

Zbatimi i gjestit të rrëshqitjes

Hapi 1: Shtoni gjestin (et) e rrëshqitjes në metodën viewDidLoad ()

anashkaloni funksionin viewDidLoad () {super.viewDidLoad ()

le swipeLeft = UISwipeGestureRecognizer (objektivi: vetja, veprimi: #selector (handleGesture)) swipeLeft.direction =.majti self.view.addGestureRecognizer (shpullëMajtas)

le swipeRight = UISwipeGestureRecognizer (synimi: vetja, veprimi: #selector (handleGesture)) swipeRight.direction =.djathtas self.view.addGestureRecognizer (swipeRight)

le të rrëshqasë = UISwipeGestureRecognizer (synimi: vetja, veprimi: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

le swipeDown = UISwipeGestureRecognizer (synimi: vetja, veprimi: #selector (handleGesture)) swipeDown.direction =.down down.view.addGestureRecognizer (swipeDown)}

Hapi 2: Kontrolloni zbulimin e gjesteve në metodën handleGesture () func handleGesture (gjest: UISwipeGestureRecognizer) -> Bosh {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Rrëshqitni djathtas")} tjetër nëse gjesti.direction == UISwipeGesture majtas {print ("Rrëshqitni majtas")} tjetër nëse gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Rrëshqit shpejt")} tjetër nëse gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Rrëshqit shpejt poshtë")}}

Në aplikacionin tim, doja të përdorja swipeRight, por nuk mund të përdorja atë që është më e përshtatshme për aplikimin tuaj.

Tani, le ta zbatojmë këtë në kodin tonë.

Ne shkojmë në regjistrinVC.swift që kemi krijuar më parë dhe shkruajmë kodin siç mund ta shihni në fotografi.

SQARIMI I KODIT

le të current_x të marrë pozicionin aktual të ScrollView (pozicioni horizontal) le screen_width të marrë gjerësinë e ekranit, duke zbritur këtë madhësi le new_x nga pozicioni aktual i pamjes së lëvizjes, i rikthehem sipas gjerësisë së ekranit nëse current_x> 0 derisa nëse nuk është më shumë se 0 - 0 është faqja e parë.

Dhe ne kemi mbaruar!

Punë të mbarë djema!