Mobiilne

Kuidas luua pühitavat UITabBari maast üles

Nagu teate, sisaldab Apple'i iOS-i SDK lugematul hulgal sisseehitatud kasutajaliidese komponente. Nupud, konteinerid, navigeerimisseadmed, vahelehtede paigutus, nimetate seda - olemas on peaaegu kõik, mida te kunagi vajate. Või on see nii?

Kõik need põhikomponendid võimaldavad meil luua põhilisi struktureeritud kasutajaliideseid, kuid mis juhtub, kui on vaja minna kastist välja; kui an iOS-i arendaja peab looma mingi käitumise, mida SDK vaikimisi ei toeta?

Üks neist juhtumitest on UITabBar , kus teil pole võimalust vahelehtede vahel libistada ja teil pole ka vahekaartide vahel vahetamiseks animatsioone.



Lihtsa UITabBar Fixi otsimine

Pärast parajalt otsimist õnnestus mul Githubist leida ainult üks kasulik raamatukogu. Kahjuks tekitas raamatukogu rakenduse käitamise ajal palju probleeme, ehkki see näis esmapilgul elegantse lahendusena.

Teisisõnu, leidsin, et raamatukogu on väga lihtne kasutada, kuid see on lollakas, mis kaalus ilmselgelt üles selle kasutamise lihtsuse ja kippus probleeme tekitama . Kui olete endiselt huvitatud, leiate libi selle alt link .

Niisiis, pärast veidi mõtlemist ja palju otsimist, hakkasin oma lahendust rakendama ja ütlesin endale: 'Hei, mis siis, kui kasutame pühkimiseks lehevaatamise kontrollerit ja natiivset UITabBari. Mis siis, kui me rühmitame need kaks asja kokku, käsitleme lehe indeksit, samal ajal pühkides või sabal puudutades? '

Lõpuks pakkusin välja lahenduse, ehkki see osutus mõneti keeruliseks, nagu ma hiljem selgitan.

Väljatöötatud UITabBari lahendus

Kujutage ette, et teil on ehitada kolm vahekaardi elementi, mis tähendab automaatselt, et teil on iga vahekaardi üksuse jaoks kuvada kolm lehte / kontrollerit.

Sellisel juhul peate need kolm vaate kontrollerit kiirendama ja vajate ka riba jaoks kahte kohahoidjat / tühja vaate kontrollerit, vahekaardiriba üksuste loomiseks, nende oleku muutmiseks vahekaardi vajutamisel või kui kasutaja soovib muuta vahekaardi register programmiliselt.

Selleks uurime Xcode'i ja kirjutame paar klassi, lihtsalt selleks, et näha, kuidas need asjad toimivad.

Näide vahelehtede vahel libistamisest

Näide vahetatavatest vahelehtedest iOS-is

Nendel ekraanipiltidel näete, et esimene vahelehe riba on sinine, seejärel libistab kasutaja paremale vahekaardile, mis on kollane, ja viimasel ekraanil kuvatakse kolmas üksus, nii et kogu leht kuvatakse kollasena.

Pühitatava vahelehe riba programmeeritud kasutamine

Niisiis, uurime seda funktsiooni ja kirjutame hõlpsa näite iOS-i jaoks hõlpsast ribast. Kõigepealt peame looma uue projekti.

Meie projekti jaoks on vajalikud eeldused üsna lihtsad: teie Maci installitud tööriistad Xcode ja Xcode.

Uue projekti loomiseks avage oma Maci rakendus Xcode ja valige 'Looge uus Xcode'i projekt' siis nimetage oma projekt ja valige lõpuks loodava rakenduse tüüp. Valige lihtsalt „Ühe vaate rakendus” ja vajutage Next.

Xcode

Nagu näete, peate järgmisel ekraanil esitama põhiteabe:

  • Tootenimi: Panin sellele nimeks SwipeableTabar.
  • Meeskond: Kui soovite seda rakendust käitada reaalses seadmes, peab teil olema arendajakonto. Minu puhul kasutan selleks oma kontot.

Märge: Kui teil pole arendajakontot, saate seda käivitada ka Simulatoris.

  • Organisatsiooni nimi: Panin sellele nimeks Ahvi põgenemine .
  • Organisatsiooni identifikaator: Panin sellele nimeks com.toptal .
  • Keel: Valige Swift.
  • Tühjendage märkeruut: „Kasuta põhiandmeid”, „Kaasa üksuste testid” ja „Kaasa kasutajaliidese testid.”

Vajutage nuppu Järgmine ja olete valmis alustama oma pühitavat vaheleheriba.

Lihtne arhitektuur

Nagu te juba teate, on teil uue rakenduse loomisel juba Main ViewController klass ja Main.Storyboard.

Enne kui hakkame kujundama, loome kõigepealt kõik vajalikud klassid ja failid, veendumaks, et kõik on seadistatud ja töötab, enne kui jätkame kasutajaliidese tööga.

Looge kuskil oma projekti sees lihtsalt mõni uus fail -> TabbarController.swift , NavigationController.swift , PageViewController.swift .

Minu puhul näeb see välja selline.

Ekraanipilt: Xcode Controllers

Aastal AppDelegate faili, jätke ainult didFinishLaunchingWithOptions, kuna saate kõik muud meetodid eemaldada.

Toas didFinishLaunchingWithOptions kopeerige ja kleepige lihtsalt järgmised read:

window = UIWindow(frame: UIScreen.main.bounds) window?.rootViewController = NavigationController(rootViewController: TabbarController()) window?.makeKeyAndVisible() return true

Eemaldage kõik failist nimega ViewController.swift . Selle faili juurde naaseme hiljem.

Kõigepealt kirjutame koodi NavigationController.swift .

import Foundation import UIKit class NavigationController: UINavigationController { override func viewDidLoad() { super.viewDidLoad() navigationBar.isTranslucent = true navigationBar.tintColor = .gray } }

Sellega lõime just lihtsa UINavigationController, kus meil on halli TintColoriga poolläbipaistev riba. See on kõik siin.

Nüüd võime jätkata PageViewController

Selles peame kodeerima natuke rohkem kui eelmistes arutletud failides.

See fail sisaldab ühte klassi, ühte protokolli, mõnda UIPageViewController andmeallikas ja meetodite delegeerimine.

Saadud fail peab välja nägema selline:

Xcode

Nagu näete, oleme välja kuulutanud oma protokolli nimega PageViewControllerDelegate, mis peaks sakkriba kontrollerile ütlema, et lehe indeksit muudeti pärast pühkimise käsitlemist.

import Foundation import UIKit protocol PageViewControllerDelegate: class { func pageDidSwipe(to index: Int) }

Siis peame looma uue klassi, nimega PageViewController, mis hoiab kinni meie vaateregulaatoritest, valib kindla indeksi lehed ja haldab ka pühkimist.

Kujutagem ette, et meie esimesel katsel valitud esimene kontroller peaks olema keskvaate kontroller. Sel juhul määrame vaikimisi indeksi väärtuse, mis on võrdne 1-ga.

class PageViewController: UIPageViewController { weak var swipeDelegate: PageViewControllerDelegate? var pages = [UIViewController]() var prevIndex: Int = 1 override func viewDidLoad() { super.viewDidLoad() self.dataSource = self self.delegate = self } func selectPage(at index: Int) { self.setViewControllers( [self.pages[index]], direction: self.direction(for: index), animated: true, completion: nil ) self.prevIndex = index } private func direction(for index: Int) -> UIPageViewController.NavigationDirection { return index > self.prevIndex ? .forward : .reverse } }

Nagu siin näete, on meil muutuja pages, mis sisaldab kõigi meie vaatekontrollerite viiteid.

Muutuja prevIndex kasutatakse viimati valitud indeksi salvestamiseks.

Võite lihtsalt helistada selectPage valitud indeksi määramiseks.

Kui soovite kuulata lehtede registrimuudatusi, peate tellima swipeDelegate ja igal lehel pühkides teavitatakse teid lehe registri muutumisest, lisaks saate ka praeguse registri.

Meetodi suund tagastab pühkimise suuna UIPageViewController Selle klassi mõistatuse viimane osa on delegaatide / andmeallikate rakendused.

Õnneks on need rakendused väga lihtsad.

extension PageViewController: UIPageViewControllerDataSource { func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { guard let viewControllerIndex = pages.firstIndex(of: viewController) else { return nil } let previousIndex = viewControllerIndex - 1 guard previousIndex >= 0 else { return nil } guard pages.count > previousIndex else { return nil } return pages[previousIndex] } func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { guard let viewControllerIndex = pages.firstIndex(of: viewController) else { return nil } let nextIndex = viewControllerIndex + 1 guard nextIndex nextIndex else { return nil } return pages[nextIndex] } } extension PageViewController: UIPageViewControllerDelegate { func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { if completed { guard let currentPageIndex = self.viewControllers?.first?.view.tag else { return } self.prevIndex = currentPageIndex self.swipeDelegate?.pageDidSwipe(to: currentPageIndex) } } }

Nagu ülal näete, on mängus kolm meetodit:

  • Esimene leiab indeksi ja tagastab eelmise vaate kontrolleri.
  • Teine leiab indeksi ja tagastab järgmise vaatekontrolleri.
  • Viimane kontrollib, kas pühkimine on lõppenud, määrab praeguse indeksi kohalikuks omaduseks prevIndex ja kutsub seejärel delegeerimismeetodit, et teavitada vanemvaate kontrollerit, et pühkimine lõpetati edukalt.

Nüüd saame lõpuks oma UITabBarController kirjutada rakendamine:

import UIKit class TabbarController: UITabBarController { let selectedColor = UIColor.blue let deselectedColor = UIColor.gray let tabBarImages = [ UIImage(named: 'ic_music')!, UIImage(named: 'ic_play')!, UIImage(named: 'ic_star')! ] override func viewDidLoad() { view.backgroundColor = .gray self.delegate = self tabBar.isTranslucent = true tabBar.tintColor = deselectedColor tabBar.unselectedItemTintColor = deselectedColor tabBar.barTintColor = UIColor.white.withAlphaComponent(0.92) tabBar.itemSpacing = 10.0 tabBar.itemWidth = 76.0 tabBar.itemPositioning = .centered setUp() self.selectPage(at: 1) } }

Nagu näete, loome vaikimisi omaduste ja stiiliga TabbarController Valitud ja tühistatud ribaüksuste jaoks peame määratlema kaks värvi. Samuti olen tutvustanud kolme pilti ribariba jaoks.

Kohas viewDidLoad seadistan lihtsalt meie riba vaikekonfiguratsiooni ja valin lehe nr 1. See tähendab, et käivitamislehel on esimene number.

private func setUp() { guard let centerPageViewController = createCenterPageViewController() else { return } var controllers: [UIViewController] = [] controllers.append(createPlaceholderViewController(forIndex: 0)) controllers.append(centerPageViewController) controllers.append(createPlaceholderViewController(forIndex: 2)) setViewControllers(controllers, animated: false) selectedViewController = centerPageViewController } private func selectPage(at index: Int) { guard let viewController = self.viewControllers?[index] else { return } self.handleTabbarItemChange(viewController: viewController) guard let PageViewController = (self.viewControllers?[1] as? PageViewController) else { return } PageViewController.selectPage(at: index) }

SetUp-meetodi sees näete, et lõime kaks kohahoidja vaate kontrollerit. Neid kohatäite kontrollereid on vaja UITabBar jaoks sest nende arv vahekaardiriba üksused peab olema võrdne teie kontrollikontrollerite arvuga.

Kui mäletate, kasutame UIPageViewController kontrollerite kuvamiseks, kuid UITabBar jaoks, kui tahame selle täielikult toimivaks muuta, peavad meil olema kõik vaatajakontrollerid kiirendatud, et ribaelemendid töötaksid siis, kui neid puudutate. Nii et selles näites kohahoidjavaatekontroller # 0 ja # 2 on tühjad vaate kontrollerid.

Tsentreeritud vaate kontrollerina loome PageViewController kolme vaatekontrolleriga.

private func createPlaceholderViewController(forIndex index: Int) -> UIViewController { let emptyViewController = UIViewController() emptyViewController.tabBarItem = tabbarItem(at: index) emptyViewController.view.tag = index return emptyViewController } private func createCenterPageViewController() -> UIPageViewController? { let leftController = ViewController() let centerController = ViewController2() let rightController = ViewController3() leftController.view.tag = 0 centerController.view.tag = 1 rightController.view.tag = 2 leftController.view.backgroundColor = .red centerController.view.backgroundColor = .blue rightController.view.backgroundColor = .yellow let storyBoard = UIStoryboard.init(name: 'Main', bundle: nil) guard let pageViewController = storyBoard.instantiateViewController(withIdentifier: 'PageViewController') as? PageViewController else { return nil } pageViewController.pages = [leftController, centerController, rightController] pageViewController.tabBarItem = tabbarItem(at: 1) pageViewController.view.tag = 1 pageViewController.swipeDelegate = self return pageViewController } private func tabbarItem(at index: Int) -> UITabBarItem { return UITabBarItem(title: nil, image: self.tabBarImages[index], selectedImage: nil) }

Esimene ja teine ​​ülalkirjeldatud meetod on meie algmeetodid lehevaatamine kontroller.

Meetod tabbar element tagastab lihtsalt tabbar üksus indeksis.

Nagu näete, createCenterPageViewController() Kasutan iga vaate kontrolleri jaoks silte. See aitab mul mõista, milline kontroller on ekraanile ilmunud.

Järgmisena jõuame võimaliku kõige olulisema meetodini handleTabbarItemChange

private func handleTabbarItemChange(viewController: UIViewController) { guard let viewControllers = self.viewControllers else { return } let selectedIndex = viewController.view.tag self.tabBar.tintColor = selectedColor self.tabBar.unselectedItemTintColor = selectedColor for i in 0..

Selles meetodis kasutan parameetrina vaate kontrollerit. Sellest vaatekontrollerist saan valitud indeksina sildi. Vahekaardiriba jaoks peame määrama valitud ja valimata värvid.

Nüüd peame kontrollima kõiki oma kontrollereid ja kontrollima, kas i == selectedIndex

Siis peame pildi renderdama algne renderdamisrežiim , vastasel juhul peame pildi renderdama a-na mallirežiim .

Kui renderdate pilti, kasutades mallirežiim , pärib see värvi üksuse toonivärvist.

Oleme peaaegu valmis. Peame lihtsalt kasutusele võtma kaks olulist meetodit UITabBarControllerDelegate ja PageViewControllerDelegate.

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool { self.selectPage(at: viewController.view.tag) return false } func pageDidSwipe(to index: Int) { guard let viewController = self.viewControllers?[index] else { return } self.handleTabbarItemChange(viewController: viewController) }

Esimesele helistatakse, kui vajutate suvalisele vahelehe elemendile, teisele aga siis, kui pühite vahelehtede vahel.

Pakkimine

Kui panete kogu koodi kokku, märkate, et te ei pea ise oma viipekäitlejate rakendust kirjutama ja vahekaardiriba üksuste vahel sujuva kerimise / libistamise pakkumiseks ei pea te palju koodi kirjutama.

Siin käsitletud rakendamine ei ole kõigi stsenaariumide jaoks ideaalne, kuid see on omapärane, kiire ja suhteliselt lihtne lahendus, mis võimaldab teil neid funktsioone väikese koodiga luua.

Lõpuks, kui soovite proovida minu lähenemist, võite kasutada minu GitHubi repo . Head kodeerimist!

Põhitõdede mõistmine

Millised on peamised iPhone'i kasutajaliidese elemendid?

IOS-i kõige sagedamini kasutatavad kasutajaliidese komponendid on UIView, UIButton, UIImageView, UITextfield, UILabel ja UITextview.

Mis on UIKit?

UIKiti raamistik pakub teie iOS-i või tvOS-i rakenduste infrastruktuuri. See pakub akna- ja vaatearhitektuuri teie liidese rakendamiseks, sündmuste käitlemist Multi-Touchi ja muud tüüpi sisendi edastamiseks ning peamist jooksutsüklit, mis on vajalik kasutaja, süsteemi ja teie rakenduse vaheliste interaktsioonide haldamiseks.

Mis on materjali disain iOS?

Materjalikujundus on Google'i loodud stiil. Materjalikujunduse põhimetafoor on tasapind paberilehte 3D-ruumis. See on Androidi, mitte iOS-i rakenduste kujundamisel vaikimisi lähenemine. Kuid Google kasutab seda teistel platvormidel, näiteks oma iOS-i rakendustes ja isegi veebirakendustes.

Scala vs Java: Miks peaksin Scalat õppima?

Tehnoloogia

Scala vs Java: Miks peaksin Scalat õppima?
Kasvav kasv: tehke selle avatud lähtekoodiga oma kohordianalüüs

Kasvav kasv: tehke selle avatud lähtekoodiga oma kohordianalüüs

Andmeteadus Ja Andmebaasid