Как да внедрите Android-Like Tab Layouts в iOS, като използвате бърз 3

Традиционните раздели в iOS се намират в долната част на екрана, в андроид приложенията от друга страна, вашите раздели са в горната част. Днес ще напиша стъпка по стъпка урок за това как да постигна андроид-подобната версия на iOS приложение, използвайки библиотека с отворен код, наречена XLPagerTabStrip.

По-долу са изображения на това, което се опитваме да постигнем.

Въведение.

XLPagerTabStrip е контролер за изглед на контейнери, който ни позволява лесно да превключваме между колекция от контролери за изглед. Жестът на панорама може да се използва за преминаване към следващия или предишния контролер за изглед. Показва интерактивен индикатор за текущите, предишните, следващите контролери за гледане на деца.

Така че, за да постигнем оформлението, ще имаме 1 контролер за родителски изглед, който помещава 2 или повече контролери за гледане на деца. Библиотеката предоставя 4 различни начина за показване на контролерите за гледане на деца, но днес ние се съсредоточаваме върху най-популярния, Button Bar, трябва да сте попаднали на него, ако използвате приложения като instagram, youtube, skype и много други ( вижте по-горе изображения).

Настройте проекта на Xcode

Ако се интегрирате в съществуващ проект, можете да пропуснете тази стъпка.

  • Създайте нов xcode проект
  • Изберете единично приложение Преглед
  • Наименувайте проекта си и попълнете останалите полета

Инсталация

Ще инсталираме XLPagerTabStrip чрез кокоподи.

  • Първо, излезте изцяло от XCode и отворете терминала
  • От терминала отворете директорията на вашия проект и стартирайте:
pod init
  • Сега, ако погледнете във вашия файл на проекта, трябва да видите подфайл, отворен с всеки текстов редактор
Декомментирайте use_frameworks! и добавете ppod 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'

Ако сте започнали с нов проект, вашият подфил трябва да изглежда така.

# Коментирайте тази линия, за да определите глобална платформа за вашия проект
# платформа: ios, „8.0“
# Коментирайте този ред, ако използвате Swift
use_frameworks!
насочете „AndroidTabs“
под 'XLPagerTabStrip',: git => 'https://github.com/KelvinJin/XLPagerTabStrip',: branch => 'swift3'
край
  • Запазете файла, върнете се към терминала и стартирайте
под инсталиране
  • След успешно съобщение „инсталиран под“ от терминала, върнете се в директорията на проекта, трябва да видите файла „Your-project-name.xcworkspace“. Стартирайте проекта си, като щракнете двукратно върху този файл.
  • N.B: ако след стартиране на .xcworkspace файла, срещнете конвертирането в най-новия прозорец на бързата версия, щракнете върху актуализация и оставете xcode да направи всичко. Просто не забравяйте да изчистите изграждането на папката на проекта и всичко трябва да се върне към нормалното
Alt + Shift + Cmd + K

Настройте родителския контролер.

  • ако сте започнали с празен проект, продължете и изтрийте файла ViewController.swift, така че започваме отново.
  • Превключете към вашата табла за снимки, трябва да имате празен VC, ако не го плъзнете в таблото за картини, ще направим това Parent ViewController.
  • Създайте нов файл: подклас ParentViewController UIViewController.
  • Редактирайте съдържанието, така че да имате:
// импортиране на библиотеката
импортиране на XLPagerTabStrip
// Изтрийте UIViewController и разширете // ButtonBarPagerTabStripViewController вместо това
клас ParentViewController: ButtonBarPagerTabStripViewController {
  ..
}
  • Свържете VC в таблото за карти с ParentViewController.
  • Плъзнете UIScrollView върху VC, оставете го напълно да заеме VC.

Добавете ограничения, трябва да е отгоре-64, дясно-0, долу-0, наляво-0.

  • Изберете ScrollView и щракнете с десния бутон на мишката, плъзнете нов референтен изход към ViewController, за да свържете контейнера на ViewView с изгледа на превъртане.
  • Плъзнете CollectionView върху изгледа (Изтрийте клетката, която идва заедно с него), на същото ниво като ScrollView, но ги пренаредете така, че CollectionView е отгоре.
  • Задайте ограничения 0 ляво, 0 отгоре, 0 дясно, височина 64.
  • Свържете CollectionView с класа ButtonBarView
  • Изберете ContainerView и щракнете с десния бутон на мишката, плъзнете нов референтен изход към ViewController, за да свържете бутонBarView изход с ContainerView, както е посочено по-горе, и го задайте на модул: XLPagerTabStrip
  • Отворете файла ParentViewController.swift и задайте външния вид на бутона Barbar.
нека purpleInspireColor = UIColor (червен: 0.13, зелен: 0.03, син: 0.25, алфа: 1.0)
замени функцията viewDidLoad () {
// промяна на избрания цвят на лентата
settings.style.buttonBarBackgroundColor = .white
settings.style.buttonBarItemBackgroundColor = .white
settings.style.selectedBarBackgroundColor = purpleInspireColor
settings.style.buttonBarItemFont = .boldSystemFont (ofSize: 14)
settings.style.selectedBarHeight = 2.0
settings.style.buttonBarMinimumLineSpacing = 0
settings.style.buttonBarItemTitleColor = .black
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
settings.style.buttonBarLeftContentInset = 0
settings.style.buttonBarRightContentInset = 0
changeCurrentIndexProgressive = {[слабо себе си] (oldCell: ButtonBarViewCell ?, newCell: ButtonBarViewCell ?, progressPercentage: CGFloat, changeCurrentIndex: Bool, анимиран: Bool) -> Void in
охрана промянаCurrentIndex == вярно друго {return}
oldCell? .label.textColor = .black
newCell? .label.textColor = self? .purpleInspireColor
}
super.viewDidLoad ()
}

Настройте децата

  • Създайте 2 нови ViewControllers (можете да създадете колкото искате, но ние ще се придържаме с 2 тук), плъзнете в таблото за събития и създайте съответните файлове (ChildViewController1.swift, ChildViewController2.swift), свържете ViewControllers в StoryBoard със съответните класове ,
  • Също така, дайте им storyboardId. Използвам child1, child2
  • можете да направите всичко, което обикновено бихте направили с тези контролери, но в името на този урок, аз просто ще влача UILabel върху VC, само за да разгранича.
  • За да настроите детски изглед: импортирайте XLPagerTabStrip, разширете IndicatorInfoProvider и внедрете една функция, за да съответства на протокола.
  • Методът връща заглавието на това дете, което да се използва на ButtonBar на Родителя.
  • Същото е и за файла ChildController2.swift
  • Върнете се към ParentViewController.swift, за да свържете контролерите на деца с родителските контролери.
замени функцията viewControllers (за pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
нека child_1 = UIStoryboard (име: "Main", пакет: nil) .instantiateViewController (withIdentifier: "child1")
нека child_2 = UIStoryboard (име: "Main", пакет: nil) .instantiateViewController (withIdentifier: "child2")
връщане [дете_1, дете_2]
}

Ето моя пълен файл ParentViewController.swift.

Продължете напред и стартирайте кода си, Ето и резултата.