Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrustaa/ContainerController
👉↕️📱ContainerController 🧩✨⚙️ is a UI Component Swipe-Panel (Customizable). 💡 The idea is copied from the app: Apple Maps, Stocks. Swift version
https://github.com/mrustaa/ContainerController
animation cocoapods collectionview containercontroller containerview ios landscape layout maps move pan-gesture scrollview swift swift-package-manager swipe-panel tableview ui-components xcode
Last synced: 4 months ago
JSON representation
👉↕️📱ContainerController 🧩✨⚙️ is a UI Component Swipe-Panel (Customizable). 💡 The idea is copied from the app: Apple Maps, Stocks. Swift version
- Host: GitHub
- URL: https://github.com/mrustaa/ContainerController
- Owner: mrustaa
- License: mit
- Created: 2020-06-09T18:48:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-24T15:46:34.000Z (about 1 year ago)
- Last Synced: 2024-04-28T21:36:02.120Z (10 months ago)
- Topics: animation, cocoapods, collectionview, containercontroller, containerview, ios, landscape, layout, maps, move, pan-gesture, scrollview, swift, swift-package-manager, swipe-panel, tableview, ui-components, xcode
- Language: Swift
- Homepage:
- Size: 1.23 MB
- Stars: 461
- Watchers: 12
- Forks: 44
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-swift - ContainerController - UI Component. This is a copy swipe-panel from app: Apple Maps, Stocks (Libs / UI)
- awesome-swift - ContainerController - UI Component. This is a copy swipe-panel from app: Apple Maps, Stocks. Swift version ` 📝 9 months ago ` (UI [🔝](#readme))
- awesome-swift - ContainerController - UI Component. This is a copy swipe-panel from app: Apple Maps, Stocks (Libs / UI)
README

# ContainerController
[](https://cocoapods.org/pods/ContainerControllerSwift)
[](https://cocoapods.org/pods/ContainerControllerSwift)
[](https://cocoapods.org/pods/ContainerControllerSwift)
[](https://swift.org/)
[](https://swift.org/)
[](https://swift.org/)UI Component. This is a copy swipe-panel from app: https://www.apple.com/ios/maps/
It can:
- Animately move top / middle / bottom
- Add multiple ContainerControlleron top of each other in self.view
- Add any type of ScrollView: Table / Collection / Text
- Control Gesture or Scroll
- Pin HeaderView to top / pin FooterView to bottom,
- Add Background Color / background blur transparency
- Adjust cornerRadius edges
- Adjust container shadow
- When raised to top = Add background shadow -
- Has the ability to adjust Left / Right margins
- And adjust Left / Right margins for landscape state.## Preview



## About the projectExamples of use (ui swipe component ContainerController) in popular design applications.
It is used in different categories apps:
- Maps / Menu / Player Music / Market / Sports News / Taxi / Finance Banks Stock / Wallets / Analytics / Notes
- Alerts / Popups / Notifications## Features
- [Requirements](#requirements)
- [Installation](#installation)
- [CocoaPods](#cocoapods)
- [Swift Package Manager with Xcode 11](#swift-package-manager-with-xcode-11)
- [Design examples](#design-examples)
- [Getting Started](#getting-started)
- [Action](#action)
- [Move position with an animation](#move-position-with-an-animation)
- [Adding possible custom subviews in ContainerController view](#adding-possible-custom-subviews-in-containercontroller-view)
- [Add `ScrollView`📃](#add-scrollview)
- [`Delegate` to self 👆](#delegate-to-self-)
- [Add `HeaderView`](#add-headerview)
- [Add `FooterView`](#add-footerview)
- [Add Custom `View`](#add-custom-view)
- [Settings ⚙️](#settings-)
- [Layout](#layout)
- [Customize the layout with create subclass `ContainerLayout` on initialization](#customize-the-layout-with-create-subclass-containerlayout-on-initialization)
- [Or create object `ContainerLayout`](#or-create-object-containerlayout)
- [Change settings right away](#change-settings-right-away)
- [ContainerController `View`](#containercontroller-view)
- [Use a ready-made solution](#use-a-ready-made-solution)
- [Change `CornerRadius`](#change-cornerradius)
- [Add Layer `Shadow`](#add-layer-shadow)
- [Add Background `Blur`](#add-background-blur)
- [More details](#more-details)
- [Change positions on screen Top Middle Bottom](#change-positions-on-screen-top-middle-bottom)
- [Customize indentations for View](#customize-indentations-for-view)
- [Customize for landscape orientation](#customize-for-landscape-orientation)
- [Parameters for control footerView](#parameters-for-control-footerview)
- [ContainerController `Delegate`](#containercontroller-delegate)
- [Author](#author)
- [License](#license)## Requirements
✏️ ContainerController is written in Swift 5.0+. It can be built by Xcode 11 or later. Compatible with iOS 13.0+.
## Installation
### [CocoaPods](https://cocoapods.org)
ContainerControllerSwift is available through [CocoaPods](https://cocoapods.org). To install
it, simply add the following line to your Podfile:```ruby
pod 'ContainerControllerSwift'
```### [Swift Package Manager with Xcode 11](https://swift.org/package-manager/)
```ruby
dependencies: [
.package(url: "https://github.com/mrustaa/ContainerController.git")
]
```Follow [this doc](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).
## Design examples
### Designs are borrowed from [Dribbble](https://dribbble.com)To get the design, you need to add a branch
[ui_examples](https://github.com/mrustaa/ContainerController/tree/ui_examples)```swift
git clone https://github.com/mrustaa/ContainerController.git
cd ContainerController/
git checkout ui_examples
```URLs Author:
- [Play Music](https://dribbble.com/shots/15381326-Move-Multipurpose-HTML-Template-I), [Sallets](https://dribbble.com/shots/18054638-Sowallet-Mobile-Appp), [Crypto](https://dribbble.com/shots/24353177-Crypto-Loan-Mobile-App), [Buy Stock](https://dribbble.com/shots/14364583-Online-Banking-Mobile-App), [Sport](https://dribbble.com/shots/15544535-Sneakers-Shopping-App), [Taxi](https://dribbble.com/shots/23691282-Taxi-Booking-App-Design), [Map Parking](https://dribbble.com/shots/15034854-AirGarage-Mobile-App-Redesign), [Custom Card](https://dribbble.com/shots/20629590-Business-Card-Mobile-IOS-App), [Apple.Maps App](https://apps.apple.com/us/app/apple-maps/id915056765)
GIF Previews:






## Getting Started
```swift
import UIKit
import ContainerControllerSwiftclass 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
}
}
```## Action
### Move position with an animation
```swift
container.move(type: .top)
container.move(type: .middle)
container.move(type: .bottom)```
## Adding possible custom subviews in ContainerController view
### Add `ScrollView`
```swift
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` to self 👆
#### If you implement delegate ScrollView (TableView, CollectionView, TextView) to `self`, then you need to call 4 functions in ContainerController```swift
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 {
...
}```
### Add `HeaderView`
```swift
let headerView = ExampleHeaderGripView()
headerView.height = 20container.add(headerView: headerView)
```
### Add `FooterView`
```swift
let tabBarView = HeaderTabBarView()
tabBarView.height = 49.0container.add(footerView: tabBarView)
```
### Add Custom `View````swift
// 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)```
## Settings ⚙️
### Layout
#### Customize the layout with create subclass `ContainerLayout` on initialization
```swift
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)
}
}```
#### Or create object `ContainerLayout`
```swift
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)
}```
### Change settings right away
```swift
// 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`
#### Use a ready-made solution
`ContainerView` is generated automatically when you create ContainerController
Use a ready-made solution to change the radius, add shadow, and blur.#### Change `CornerRadius`
```swift
// Change cornerRadius global for all subviews
container.view.cornerRadius = 15
```
#### Add Layer `Shadow````swift
container.view.addShadow(opacity: 0.1)
```
#### Add Background `Blur````swift
// add blur UIVisualEffectView
container.view.addBlur(style: .dark)```
### More details
#### Change positions on screen Top Middle Bottom
```swift
// 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) // ↑```
#### Customize indentations for View
```swift
// 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)```
#### Customize for landscape orientation
```swift
// 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)```
#### Parameters for control footerView
```swift
// 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`
```swift
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) {
...
}```
## Author
📩| [mrustaa](https://github.com/mrustaa/) JUNE 2020
## License
ContainerController is available under the MIT license. See the LICENSE file for more info.