Готовый компонент UI свайп-панели c добавлением scrollView, и других элементов ui. (iOS Swift)

ContainerController компонент UI пользовательского интерфейса.
Это копия свайп-панели из приложения: AppleMaps

https://github.com/mrustaa/ContainerController

Что он может:

• Анимировано перемещаться на 3 позиции: (Верх / Середина / Вниз)
  Перемещаться программно 2 позиции: (Скрыть / Пользовательский)
  Можно настраивать позиции
  Можно настраивать позиции отдельно для ландшафтного разворота

• Добавлять несколько ContainerController (друг на друга) в одном контроллере
  Таким образом можно осуществлять переход между ними.

• Управлять панелью с помощью жеста PanGesture или свайпом (вертикально)

• Добавлять любой тип ScrollView: TableView / CollectionView / TextView
  и управлять панелью за счет скрола

• Можно закреплять HeaderView на вверху / и FooterView внизу

• Настройка вьюшки панели ContainerView:
  — Изменять окружность углов cornerRadius
  — Добавлять тень контейнера
  — Фон:
  1) Добавлять цвет
  2) Размытие Blur Effects (может потребоваться для темной темы)
  3) Прозрачность

• При поднятии наверх, можно включить добавление тени фона позади панели

• 1) Можно настраивать левые / правые отступы
  2) И настраивать левые / правые отступы для ландшафтного разворота

Превью

О проекте

Примеры использования компонента в популярных приложениях.
Используется в разных категориях приложений:

• Карты / Меню / Плеер Музыка / Маркет / Спортивные новости / Такси / Финансы Банки Акции / Кошельки / Аналитика / Заметки

• Оповещения / Всплывающие окна / Уведомления (Alerts / Popups / Notifications)

Функции

• Требования

• Установка

  • CocoaPods

  • Swift Package Manager with Xcode 11

• Примеры дизайна

• Начало работы

• Действие

  • Анимированное перемещение к позициям

• Добавление кастомных вьюшек в ContainerController

  • Добавить ScrollView?

    • Delegateself ?

  • ДобавитьHeaderView

  • ДобавитьFooterView

  • Добавить кастомныйView

• Настройки ⚙️

  • Layout Макет

    • Настройте макет с помощью создания подкласса ContainerLayoutпри инициализации

    • Или создайте объектContainerLayout

  • Измените настройки прямо сейчас

  • ContainerControllerView

    • Используйте готовое решение

    • ИзменитьCornerRadius

    • Добавить слойShadow

    • ДобавитьBlur

  • Подробнее

    • Изменение положения на экране Верх Середина Низ

    • Настройте отступы для просмотра

    • Настроить для альбомной ориентации

    • Параметры для управления footerView

• ContainerControllerDelegate


Требования

✏️ ContainerController написан на Swift 5.0+. Его можно собрать в Xcode 11 или более поздней версии. Совместим с iOS 13.0+.

Установка

CocoaPods

ContainerControllerSwift доступен через CocoaPods . Чтобы установить его, просто добавьте следующую строку в свой Podfile:

pod 'ContainerControllerSwift'

Swift Package Manager with Xcode 11

dependencies: [     .package(url: "https://github.com/mrustaa/ContainerController.git") ]

Следуйте этому документу .

Примеры дизайна

Дизайны заимствованы с Dribbble

Для получения дизайна необходимо добавить ветку ui_examples

git clone https://github.com/mrustaa/ContainerController.git cd ContainerController/ git checkout ui_examples

Видео

Авторы дизайн ui URL-адресов:

• Play Music , Sallets , Crypto , Buy Stock , Sport , Taxi , Map Parking , Custom Card , Apple.Maps App

Начало работы

import UIKit import ContainerControllerSwift  class ViewController: UIViewController, ContainerControllerDelegate {          var container: ContainerController!          override func viewDidLoad() {         super.viewDidLoad()                  // Create ContainerController Layout object         let layout = ContainerLayout()         layout.startPosition = .hide         layout.backgroundShadowShow = true         layout.positions = ContainerPosition(top: 70, middle: 250, bottom: 70)                  // Create ContainerController object, along with the container.view         // Pass the current UIViewController          let container = ContainerController(addTo: self, layout: layout)         container.view.cornerRadius = 15         container.view.addShadow()                  // Create subclass scrollView         let tableView = UITableView()         tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")         tableView.delegate = self         tableView.dataSource = self                  // Add scrollView to container         container.add(scrollView: tableView)                  // Finishing settings ContainerController,         // Animated move position Top         container.move(type: .top)     }          override func viewDidDisappear(_ animated: Bool) {         super.viewDidDisappear(animated)                  // Remove the subviews ContainerController         container.remove()         container = nil     } }

Действие

Анимированное перемещение к позициям

Основные позиции 3 Можно перемещаться свайпом жестом между ними

Вверх | .top
Середина | .middle
Вниз | .bottom

Остальные 2 Можно перемещать только программно

Скрыть | .hide (Скрыть за пределы экрана)
Пользовательский | .custom (Пользовательская установленная позиция)

container.move(type: .top) container.move(type: .middle) container.move(type: .bottom) container.move(type: .hide) container.move(type: .custom)

Добавление кастомных вьюшек в ContainerController

Добавлять ScrollView

let tableView = UITableView() tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell") tableView.backgroundColor = .clear tableView.tableFooterView = UIView() tableView.delegate = self tableView.dataSource = self  // Add scrollView to container container.add(scrollView: tableView)

Delegate self?

Если вы реализуете делегат ScrollView (TableView, CollectionView, TextView) для self, то вам нужно вызвать 4 функции в ContainerController

extension ViewController: UIScrollViewDelegate {          func scrollViewDidScroll(_ scrollView: UIScrollView) {         container.scrollViewDidScroll(scrollView)     }          func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {         container.scrollViewWillBeginDragging(scrollView)     }          func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {         container.scrollViewDidEndDecelerating(scrollView)     }          func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {         container.scrollViewDidEndDragging(scrollView, willDecelerate: decelerate)     } }  extension ViewController: UITableViewDelegate {     ... }  extension ViewController: UITableViewDataSource {     ... }

Добавить HeaderView

let headerView = ExampleHeaderGripView() headerView.height = 20  container.add(headerView: headerView)

Добавить FooterView

let tabBarView = HeaderTabBarView() tabBarView.height = 49.0  container.add(footerView: tabBarView)

Добавить кастомное вью CustomView

// Add custom shadow let layer = container.view.layer layer.shadowOpacity = 0.5 layer.shadowColor = UIColor.red.cgColor layer.shadowOffset = CGSize(width: 1, height: 4) layer.shadowRadius = 5  // Add view in container.view let viewRed = UIView(frame: CGRect(x: 50, y: 50, width: 50, height: 50)) viewRed.backgroundColor = .systemRed container.view.addSubview(viewRed)  // Add view under scrollView container.view let viewGreen = UIView(frame: CGRect(x: 25, y: 25, width: 50, height: 50)) viewGreen.backgroundColor = .systemGreen container.view.insertSubview(viewGreen, at: 0)

Настройки ⚙️

Layout Макет

Настройте Layout с помощью создания подкласса ContainerLayout при инициализации

class NewContainerLayout: ContainerLayout {          override init() {         super.init()                  // Initialization start position.         startPosition = .hide                  // Disables any moving with gestures.         movingEnabled = true                  // Sets the new value for positions of animated movement (top, middle, bottom).         positions = ContainerPosition(top: 70, middle: 250, bottom: 70)                  // Sets insets container.view  (left, right).         insets = ContainerInsets(right: 20, left: 20)     } }  class ViewController: UIViewController {      var container: ContainerController!          override func viewDidLoad() {         super.viewDidLoad()                  container = ContainerController(addTo: self, layout: NewContainerLayout())         container.move(type: .top)     } }

Или создайте объект ContainerLayout

override func viewDidLoad() {     super.viewDidLoad()          // Create ContainerController Layout object     let layout = ContainerLayout()     layout.startPosition = .hide     layout.backgroundShadowShow = true     layout.positions = ContainerPosition(top: 70, middle: 250, bottom: 70)          container = ContainerController(addTo: self, layout: layout) }

Измените настройки контейнера сразу — не обновляя Layout

// Properties container.set(movingEnabled: true) container.set(trackingPosition: false) container.set(footerPadding: 100)  // Add ScrollInsets Top/Bottom container.set(scrollIndicatorTop: 5) // ↓ container.set(scrollIndicatorBottom: 5) // ↑  // Positions container.set(top: 70) // ↓ container.set(middle: 250) // ↑ container.set(bottom: 80) // ↑  // Middle Enable/Disable container.set(middle: 250) container.set(middle: nil)  // Background Shadow container.set(backgroundShadowShow: true)  // Insets View container.set(left: 5) // → container.set(right: 5) // ←  // Landscape params container.setLandscape(top: 30) container.setLandscape(middle: 150) container.setLandscape(bottom: 70) container.setLandscape(middle: nil)  container.setLandscape(backgroundShadowShow: false)  container.setLandscape(left: 10) container.setLandscape(right: 100)

ContainerController View

Используйте готовое решение

ContainerViewгенерируется автоматически при создании ContainerController Используйте готовое решение для изменения радиуса, добавления тени и размытия.

Изменить окружность краев CornerRadius

// Change cornerRadius global for all subviews container.view.cornerRadius = 15 

Добавить слой Shadow

container.view.addShadow(opacity: 0.1) 

Добавить фон Blur

// add blur UIVisualEffectView container.view.addBlur(style: .dark) 

Подробнее

Изменение положения на экране Верх / Середина / Низ ( .top / .middle / .bottom)

// These parameters set the new position value. container.layout.positions = ContainerPosition(top: 70, middle: 250, bottom: 70)  // Change settings right away container.set(top: 70) // ↓ container.set(middle: 250) // ↑ container.set(bottom: 80) // ↑

Настройте отступы

// Sets insets container.view  (left, right). container.layout.insets = ContainerInsets(right: 20, left: 20)  container.layout.landscapeInsets = ContainerInsets(right: 20, left: 100)   // Change settings right away container.set(left: 5) // → container.set(right: 5) // ←  container.setLandscape(left: 10) container.setLandscape(right: 100)

Настроить для альбомной ориентации

// Sets the background shadow under container. (Default: backgroundShadowShow). container.layout.landscapeBackgroundShadowShow = false  // Sets the new value for positions of animated movement (top, middle, bottom). (Default: positions). container.layout.landscapePositions = ContainerPosition(top: 20, middle: 150, bottom: 70)  // Sets insets container.view (left, right). (Default: insets). container.layout.landscapeInsets = ContainerInsets(right: 20, left: 100)   // Change settings right away  container.setLandscape(top: 30) container.setLandscape(middle: 150) container.setLandscape(bottom: 70) container.setLandscape(middle: nil)  container.setLandscape(backgroundShadowShow: false)  container.setLandscape(left: 10) container.setLandscape(right: 100)

Параметры для управления footerView

// Padding-top from container.view, if headerView is added, then its + height is summed. container.layout.footerPadding = 100  // Tracking position container.view during animated movement. container.layout.trackingPosition = false  // Change settings right away  container.set(footerPadding: 100) container.set(trackingPosition: false)

 

ContainerController Delegate

class ViewController: UIViewController, ContainerControllerDelegate {      override func viewDidLoad() {         super.viewDidLoad()                  let container = ContainerController(addTo: self, layout: layout)         container.delegate = self     } }  /// Reports rotation and orientation changes func containerControllerRotation(_ containerController: ContainerController) {     ... }  /// Reports a click on the background shadow func containerControllerShadowClick(_ containerController: ContainerController) {     ... }  /// Reports the changes current position of the container, after its use func containerControllerMove(_ containerController: ContainerController, position: CGFloat, type: ContainerMoveType, animation: Bool) {     ... }

Получение событий от делегата

func containerControllerRotation

Сообщает об изменениях поворота и ориентации

func containerControllerShadowClick

Сообщает о нажатии на фоновую тень

func containerControllerMove

Сообщает об изменениях текущего положения контейнера

Позиция значение — position: CGFloat,
Тип позиции — type: ContainerMoveType,
Анимированное перемещение — animation: Bool