Skip to content

Commit 583a0e3

Browse files
committed
Added USAGE doc
1 parent c26a77d commit 583a0e3

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

USAGE.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# Usage
2+
3+
How to install and use this module.
4+
5+
1. [Installation](#installation)
6+
1. [Storyboard Usage](#storyboard-usage)
7+
1. [Programmatic Usage](#programmatic-usage)
8+
1. [Scroll to Edge Effect](#scroll-to-edge-effect)
9+
10+
11+
## Installation
12+
13+
CenteredCollectionView is available through [CocoaPods](http://cocoapods.org) and [Carthage](https://github.com/Carthage/Carthage).
14+
15+
To install it with **Cocoapods**, add the following line to your `Podfile`:
16+
```ruby
17+
pod "CenteredCollectionView"
18+
```
19+
20+
To install it with **Carthage**, add the following line to your `Cartfile`:
21+
```
22+
github "BenEmdon/CenteredCollectionView"
23+
```
24+
25+
## Storyboard Usage
26+
1. To start off lets add a `UICollectionView` to our controller, and lay it out however you want it.
27+
28+
![AddCollectionView](/.github/AddCollectionView.gif)
29+
30+
1. Next lets set the `UICollectionView`'s custom layout to be `CenteredCollectionViewFlowLayout`.
31+
32+
![GiveFlowLayout](/.github/GiveFlowLayout.gif)
33+
34+
1. Next we can optionally layout the prototype item. **Note that this doesn't determine the item's size.**
35+
36+
![MakeItemBig](/.github/MakeItemBig.gif)
37+
38+
1. Make sure the collection view cell reuse identifier is set.
39+
40+
![CellIdentifier](/.github/CellIdentifier.png)
41+
42+
1. Create an `IBOutlet` for the collection view.
43+
44+
![IBOutlet](/.github/IBOutlet.gif)
45+
46+
1. Next lets dive in to the code use:
47+
48+
```swift
49+
class ViewController: UIViewController {
50+
51+
@IBOutlet weak var collectionView: UICollectionView!
52+
53+
// The width of each cell with respect to the screen.
54+
// Can be a constant or a percentage.
55+
let cellPercentWidth: CGFloat = 0.7
56+
57+
// A reference to the `CenteredCollectionViewFlowLayout`.
58+
// Must be aquired from the IBOutlet collectionView.
59+
var centeredCollectionViewFlowLayout: CenteredCollectionViewFlowLayout!
60+
61+
override func viewDidLoad() {
62+
super.viewDidLoad()
63+
64+
// Get the reference to the `CenteredCollectionViewFlowLayout` (REQURED STEP)
65+
centeredCollectionViewFlowLayout = collectionView.collectionViewLayout as! CenteredCollectionViewFlowLayout
66+
67+
// Modify the collectionView's decelerationRate (REQURED STEP)
68+
collectionView.decelerationRate = UIScrollViewDecelerationRateFast
69+
70+
// Assign delegate and data source
71+
collectionView.delegate = self
72+
collectionView.dataSource = self
73+
74+
// Configure the required item size (REQURED STEP)
75+
centeredCollectionViewFlowLayout.itemSize = CGSize(
76+
width: view.bounds.width * cellPercentWidth,
77+
height: view.bounds.height * cellPercentWidth * cellPercentWidth
78+
)
79+
80+
// Configure the optional inter item spacing (OPTIONAL STEP)
81+
centeredCollectionViewFlowLayout.minimumLineSpacing = 20
82+
83+
// Get rid of scrolling indicators
84+
collectionView.showsVerticalScrollIndicator = false
85+
collectionView.showsHorizontalScrollIndicator = false
86+
}
87+
}
88+
```
89+
90+
## Programmatic Usage
91+
```Swift
92+
class ViewController: UIViewController {
93+
94+
let centeredCollectionViewFlowLayout = CenteredCollectionViewFlowLayout()
95+
let collectionView: UICollectionView
96+
97+
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
98+
// Initialize the collectonView with the `CenteredCollectionViewFlowLayout` (REQUIRED STEP)
99+
collectionView = UICollectionView(centeredCollectionViewFlowLayout: centeredCollectionViewFlowLayout)
100+
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
101+
}
102+
103+
override func viewDidLoad() {
104+
super.viewDidLoad()
105+
106+
// Assign delegate and data source
107+
collectionView.delegate = self
108+
collectionView.dataSource = self
109+
110+
// Layout subviews (not shown)
111+
...
112+
113+
// Register collection cells (REQUIRED STEP)
114+
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: String(describing: UICollectionViewCell.self))
115+
116+
// Configure the required item size (REQURED STEP)
117+
centeredCollectionViewFlowLayout.itemSize = CGSize(
118+
width: view.bounds.width * cellPercentWidth,
119+
height: view.bounds.height * cellPercentWidth * cellPercentWidth
120+
)
121+
122+
// Configure the optional inter item spacing (OPTIONAL STEP)
123+
centeredCollectionViewFlowLayout.minimumLineSpacing = 20
124+
125+
// Get rid of scrolling indicators
126+
collectionView.showsVerticalScrollIndicator = false
127+
collectionView.showsHorizontalScrollIndicator = false
128+
}
129+
}
130+
131+
// Delegate and datasource extensions
132+
...
133+
134+
```
135+
136+
## Scroll to Edge Effect
137+
![scrollToEdgeEnabled](/.github/ScrollToEdge.gif)
138+
Scrolling to an Edge on Touch 🎡
139+
140+
Heres how you could trigger a scroll animation when a touch happens on an item that isn't the `currentCenteredPage`:
141+
142+
```swift
143+
extension ViewController: UICollectionViewDelegate {
144+
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
145+
146+
// check if the currentCenteredPage is not the page that was touched
147+
let currentCenteredPage = centeredCollectionViewFlowLayout.currentCenteredPage,
148+
currentCenteredPage != indexPath.row {
149+
// trigger a scrollTo(index: animated:)
150+
centeredCollectionView.scrollTo(index: indexPath.row, animated: true)
151+
}
152+
}
153+
}
154+
```

0 commit comments

Comments
 (0)