Разбиване на екрана на профила в Twitter, част I: разтеглив хедър (iOS Swift 4)

здрасти В следващата поредица от уроци ще ви покажа как да внедрите всяка функция на екрана на профила на Twitter. Това ще стане без рамки на трети страни, нито ще манипулираме рамка на UIView. Ще използваме изключително Autolayout. Първото нещо, което ще направим, е да изградим разтегливия хедър.

Забележка:В този урок ще използваме UIScrollView вместо UITableView, но общата стратегия, която ще демонстрирам днес, може лесно да се прехвърли към UITableView/UICollectionView/Всичко, което е подклас на UIScrollView

Предварителни знания:

Основни концепции на iOS (жизнен цикъл на UIViewController, UIViews и др.)

Използване на автоматично оформление с UIScrollViews

Стратегия:

1. Първо ще настроим автоматично оформление за нашия UIScrollView
2. След това в изгледа на съдържанието на нашия scrollview ще настроим ограничения за автоматично оформление за изгледа на изображението. Ограниченията за горната част и височината на нашия изглед на изображението са ключови за разтегливия ефект.
3. Нашият контролер за изглед ще разшири UIScrollViewDelegate и ще приложи функцията scrollviewDidScroll()
4. В нашата функция scrollviewDidScroll() ще следим y позицията на скрола
5. Ако превъртаме нагоре (дърпаме надолу) след първоначалната позиция на изгледа за превъртане, трябва да направим 2 неща. Първо актуализирайте горното ограничение на изгледа на изображението, за да бъде стойността на вертикалната позиция на изгледа на превъртане. След това разширете височината, като добавите разликата между нашето отместване на съдържанието и началното вертикално изместване на съдържанието (което е 0).
6. Празнувайте, почти. Ако оставим проекта такъв, какъвто е, височината ще се разшири, но ширината няма да се мащабира с височината. За да накарате ширината да се разшири заедно с височината, не забравяйте да промените режима на съдържанието на изгледа на изображението на аспектно запълване вместо мащабно запълване.

Ако нямате опит с използването на Autolayout с UIScrollViews, ето страхотна статия: https://www.natashatherobot.com/ios-autolayout-scrollview/

Създайте бърз проект с връзката по-горе, след което се върнете към тази.

Добре, нека да започнем.

Можете да изтеглите моя начален проект тук: https://github.com/EddieCurio/StretchHeaderMedium

Освен това, ако заседнете на някоя от частите, можете да превключите към завършен клон.

Клонове

Майстор — Нищо не е направил.

part1 — Завършване на стъпка 1

part2 — Завършване на стъпка 2

…

part6 — Завършване на стъпка 6

Всяка част е разделена на различни клонове, в случай че се изгубите.

Стъпка 1a:Изтеглете стартовия проект в Xcode

Забележете, че този проект е почти празен, с изключение на снимка на вълна.

Стъпка 1b:Настройте автоматичното оформление за вашия изглед за превъртане

1. ) Първо добавете вашия scrollview към вашата UIViewController сцена във вашия сценарий.

2.) Искаме изгледът за превъртане да заема целия екран, така че ще закачим краищата към суперизгледа (Можете просто да го закачите към безопасната зона, зависи само от вашия случай на употреба) Ще видим защо закрепваме към родителския изглед вместо Безопасна зона в по-късен урок.

3.) Дефинирайте своя изглед на съдържание и настройте ограниченията на изгледа на съдържание за вашия изглед с превъртане.

Така че създаваме изгледа на съдържанието и го поставяме в UIScrollView. След това създаваме ограничение EQUAL WIDTH и EQUAL HEIGHT между изгледа на съдържанието и родителския изглед на scrollview НЕ ИЗГЛЕДА НА SCROLLVIEW

Ако случайно закачите височината на scrollview, scrollview ще се обърка и няма да знае как да изчисли височината на съдържанието си.

Прочетете повече за статията, която споменах по-рано за повече информация. Но основната идея е, че трябва да направите височината на изгледа на съдържанието или постоянна, или зависима от нещо различно от самия scrollview.

След това можем просто да закрепим краищата на изгледа на съдържанието към краищата на изгледа за превъртане

Стъпка 2Добавете UIImageView към изгледа за превъртане и добавете ограничения

1.) Добавете ограничения отгоре, отляво, отдясно и височина (128 за днес, но за вашите приложения може да е каквото искате) към изгледа на изображението и след поставяне в нашия изглед на съдържание в сценария

Стъпка 3:Създайте изходи за ограниченията за изглед на изображение

Ние ще манипулираме ограничението за горната част и височината на изгледа на изображението въз основа на свойството за вертикално изместване на съдържанието на изгледа за превъртане, така че имаме нужда от препратки към тях в нашия код.

Стъпка 4:Създайте изходи от нашия scrollview

Също така ще ни трябва препратка към нашия scrollview, за да направим нашия контролер на изглед делегат на протокола UIScrollViewDelegate. Това ще ни позволи да внедрим функцията scrollviewDidScroll().

Също така искаме да внедрим протокола UIScrollViewDelegate и да направим класа на нашия контролер за изглед делегат за нашия изглед за превъртане, който настройваме в сценария.

На този етап трябва да стартирате приложението.

Продължете и погледнете вашата конзола и забележете какво се случва със стойността на отместването на съдържанието, отпечатана, докато превъртате нагоре и надолу.

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

Стъпка 5Внедрете разтеглива логика на заглавката

Първото нещо, което искаме да направим, е ако превъртим нагоре твърде високо, тогава искаме изгледът на изображението да остане в горната част. Така че нека направим това първо.

Първо нека дефинираме какво е „твърде високо“. Казваме, че сме отишли ​​„твърде високо“, ако превъртим над конфигурацията по подразбиране на изгледа за превъртане. Това се случва само когато превъртаме над вертикалното отместване на съдържанието на нашия изглед за превъртане от 0. Така че, когато превъртаме над 0, ние сме „твърде високо“ и трябва да пренастроим ограниченията на изгледа на изображението. Тази логика лесно може да се преведе в код.

Стъпка 5 Накарайте горната част на изгледа на изображението да се придържа към „нова горна част“, ​​когато превъртаме нагоре.

Във вашата функция scrollViewDidScroll() трябва да открием кога сме отишли ​​„твърде високо“

Затова добавяме следния код, за да го направим

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offset = scrollView.contentOffset.y
    if offset < 0{ //Whenever we go too high run this code block 
     //Make imageview sticky
    }
}

Сега какво да правим, след като отидем твърде високо?

Правим горната пръчка. Как да направим горната пръчка? Е, трябва да изчислим какво се счита за „нов горен“ край на екрана. Оказва се, че това е само самата y стойност на изместването на съдържанието. Така че сега трябва да имаме...

func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offset = scrollView.contentOffset.y
let defaultTop = CGFloat(0)
// If we have not scrolled too high then stick to default y pos
var currentTop = defaultTop 
if offset < 0{ //Whenever we go too high run this code block 
     //The new top (y position) of the imageview 
     currentTop = offset
}

imageViewTop.constant = currentTop
}

След като добавите този код, стартирайте приложението си и то трябва да изглежда нещо подобно.

Може да изглежда, че не прави нищо, но сравнете това с последния път, когато стартирахме кода и когато превъртаме нагоре, вече не виждаме бяла празнина над изображението. С други думи, работи!

Стъпка 6:Направете изгледа на изображението „разширен“, когато превъртаме нагоре твърде високо.

Искаме изображението да се разширява пропорционално на количеството, което изгледът за превъртане се е преместил нагоре. Да кажем, че се преместваме с 10 единици над нашата базова линия от 0. След това искаме да добавим 10 единици към нашата височина на изображението.

Тогава как да изчислим броя на единиците над 0, които сме преместили?

Просто използвайте отместването на съдържанието отново. Ако отидем нагоре с 30 единици след 0, тогава стойността на вертикалното изместване на съдържанието ще има -30. Така че ние просто добавяме абсолютната стойност на изместването на съдържанието към ограничението на височината.

Ще трябва също така да следим каква е оригиналната височина на изображението, за да можем да го преоразмерим обратно до оригиналната височина, след като приключим с превъртането нагоре.

Тази логика отново е лесна за превеждане в код.

Във вашия изглед контролер добавете променливата

var originalHeight: CGFloat!

и във viewDidLoad() добавете следния код

func viewDidLoad(){
    ...
   originalHeight = imageViewHeight.constant
}

така че веднага улавяме каква е първоначалната стойност на ограничението на височината.

След това добавяме следния код към нашата функция scrollviewDidScroll().

func scrollViewDidScroll(_ scrollView: UIScrollView){
  ...
  
   if offset < 0 {
    ...
    //Original height + abs(offset)
    imageViewHeight.constant = originalHeight - offset
    ...
   }else { //We are finished scrolling up 
     //Done streching out the image
     imageViewHeight.constant = originalHeight
   }

}

Стартирайте кода си и трябва да видите следното.

Почти стигнахме. Също така искаме ширината да се мащабира заедно с височината. Ако променим режима на съдържанието на изображението на аспектно запълване вместо мащабно запълване, тогава нашето приложение трябва да изглежда така.

И сме готови.