|
1 |
| -# ColorSlider |
| 1 | +<p align="center"> |
| 2 | +<img src="./ColorSlider.gif" width="65%"> |
| 3 | +</p> |
2 | 4 |
|
3 |
| -ColorSlider is a [Swift](https://developer.apple.com/swift/) color picker with a live preview. |
| 5 | +--- |
4 | 6 |
|
5 |
| -Inspired by Snapchat, ColorSlider lets you drag vertically to pick a range of colors and drag to the edges of the superview to select black and white. You can configure and customize `ColorSlider` via a simple API, and receive callbacks via `UIControlEvents`. |
| 7 | +ColorSlider is an iOS color picker with live preview written in [Swift](https://developer.apple.com/swift/). |
6 | 8 |
|
7 |
| - |
| 9 | +[](https://travis-ci.org/gizmosachin/ColorSlider)  [](https://developer.apple.com/swift) [](LICENSE) |
8 | 10 |
|
9 |
| - [](https://travis-ci.org/gizmosachin/ColorSlider) |
10 |
| - |
11 |
| -## Version Compatibility |
12 |
| - |
13 |
| -Current Swift compatibility breakdown: |
14 |
| - |
15 |
| -| Swift Version | Framework Version | |
16 |
| -| ------------- | ----------------- | |
17 |
| -| 3.0 | master | |
18 |
| -| 2.3 | 2.5.1 | |
| 11 | +| | Features | |
| 12 | +| :-------: | :--------------------------------------- | |
| 13 | +| :ghost: | "[Snapchat](http://snapchat.com)-style" color picker | |
| 14 | +| :rainbow: | Extensible live preview | |
| 15 | +| :art: | Customizable appearance | |
| 16 | +| :cyclone: | Vertical and horizontal support | |
| 17 | +| :musical_keyboard: | Black and white colors included | |
| 18 | +| :books: | Fully [documented](http://gizmosachin.github.io/ColorSlider) | |
| 19 | +| :baby_chick: | [Swift 4](https://developer.apple.com/swift/) | |
19 | 20 |
|
20 | 21 | ## Usage
|
21 | 22 |
|
22 |
| -Create and add an instance of ColorSlider to your view hierarchy. |
| 23 | +Create and add a ColorSlider to your view: |
23 | 24 |
|
24 | 25 | ``` Swift
|
25 |
| -let colorSlider = ColorSlider() |
| 26 | +let colorSlider = ColorSlider(orientation: .vertical, previewSide: .left) |
26 | 27 | colorSlider.frame = CGRectMake(0, 0, 12, 150)
|
27 | 28 | view.addSubview(colorSlider)
|
28 | 29 | ```
|
29 | 30 |
|
30 |
| -ColorSlider is a subclass of `UIControl` and supports the following `UIControlEvents`: |
31 |
| - |
32 |
| -- `.touchDown` |
33 |
| -- `.valueChanged` |
34 |
| -- `.touchUpInside` |
35 |
| -- `.touchUpOutside` |
36 |
| -- `.touchCancel` |
37 |
| - |
38 |
| -You can get the currently selected color with the `color` property. |
| 31 | +Respond to changes in color using `UIControlEvents`: |
39 | 32 |
|
40 | 33 | ``` Swift
|
41 |
| -colorSlider.addTarget(self, action: #selector(ViewController.changedColor(_:)), forControlEvents: .valueChanged) |
| 34 | +colorSlider.addTarget(self, action: #selector(changedColor(_:)), forControlEvents: .valueChanged) |
42 | 35 |
|
43 | 36 | func changedColor(_ slider: ColorSlider) {
|
44 | 37 | var color = slider.color
|
45 | 38 | // ...
|
46 | 39 | }
|
47 | 40 | ```
|
48 | 41 |
|
49 |
| -Enable live color preview: |
| 42 | +Customize appearance attributes: |
| 43 | + |
| 44 | +``` Swift |
| 45 | +// Add a border |
| 46 | +colorSlider.gradientView.layer.borderWidth = 2.0 |
| 47 | +colorSlider.gradientView.layer.borderColor = UIColor.white |
50 | 48 |
|
51 |
| -``` swift |
52 |
| -colorSlider.previewEnabled = true |
| 49 | +// Disable rounded corners |
| 50 | +colorSlider.gradientView.automaticallyAdjustsCornerRadius = false |
53 | 51 | ```
|
54 | 52 |
|
55 |
| -Use a horizontal slider: |
| 53 | +### Preview |
| 54 | + |
| 55 | +`ColorSlider` has a live preview that tracks touches along it. You can customize it: |
56 | 56 |
|
57 |
| -```swift |
58 |
| -colorSlider.orientation = .horizontal |
| 57 | +``` Swift |
| 58 | +let previewView = ColorSlider.DefaultPreviewView() |
| 59 | +previewView.side = .right |
| 60 | +previewView.animationDuration = 0.2 |
| 61 | +previewView.offsetAmount = 50 |
| 62 | + |
| 63 | +let colorSlider = ColorSlider(orientation: .vertical, previewView: previewView) |
59 | 64 | ```
|
60 | 65 |
|
61 |
| -Customize appearance attributes: |
| 66 | +Create your own live preview by subclassing `DefaultPreviewView` or implementing `ColorSliderPreviewing` in your `UIView` subclass. |
| 67 | +Then, just pass your preview instance to the initializer: |
| 68 | +``` Swift |
| 69 | +let customPreviewView = MyCustomPreviewView() |
| 70 | +let colorSlider = ColorSlider(orientation: .vertical, previewView: customPreviewView) |
| 71 | +``` |
| 72 | +ColorSlider will automatically update your view's `center` as touches move on the slider. |
| 73 | +By default, it'll also resize your preview automatically. Set `colorSlider.autoresizesSubviews` to `false` to disable autoresizing. |
62 | 74 |
|
| 75 | +To disable the preview, simply pass `nil` to ColorSlider's initializer: |
63 | 76 | ``` Swift
|
64 |
| -colorSlider.borderWidth = 2.0 |
65 |
| -colorSlider.borderColor = UIColor.white |
| 77 | +let colorSlider = ColorSlider(orientation: .vertical, previewView: nil) |
66 | 78 | ```
|
67 | 79 |
|
68 |
| -[Please see the documentation](http://gizmosachin.github.io/ColorSlider/) and check out the sample app (Sketchpad) for more details. |
| 80 | +See the [documentation](http://gizmosachin.github.io/ColorSlider) for more details on custom previews. |
69 | 81 |
|
70 |
| -## Installation |
| 82 | +### Documentation |
71 | 83 |
|
72 |
| -### CocoaPods |
| 84 | +ColorSlider is fully documented [here](http://gizmosachin.github.io/ColorSlider). |
| 85 | + |
| 86 | +## Installation |
73 | 87 |
|
74 |
| -ColorSlider is available for installation using [CocoaPods](http://cocoapods.org/). To integrate, add the following to your Podfile`: |
| 88 | +### [CocoaPods](https://cocoapods.org/) |
75 | 89 |
|
76 | 90 | ``` ruby
|
77 | 91 | platform :ios, '9.0'
|
78 |
| -use_frameworks! |
79 |
| - |
80 |
| -pod 'ColorSlider', '~> 3.0.1' |
| 92 | +pod 'ColorSlider', '~> 4.0' |
81 | 93 | ```
|
82 | 94 |
|
83 |
| -### Carthage |
84 |
| - |
85 |
| -ColorSlider is also available for installation using [Carthage](https://github.com/Carthage/Carthage). To integrate, add the following to your `Cartfile`: |
| 95 | +### [Carthage](https://github.com/Carthage/Carthage) |
86 | 96 |
|
87 | 97 | ``` odgl
|
88 |
| -github "gizmosachin/ColorSlider" >= 3.0.1 |
89 |
| -``` |
90 |
| - |
91 |
| -### Swift Package Manager |
92 |
| - |
93 |
| -ColorSlider is also available for installation using the [Swift Package Manager](https://swift.org/package-manager/). Add the following to your `Package.swift`: |
94 |
| - |
95 |
| -``` swift |
96 |
| -import PackageDescription |
97 |
| - |
98 |
| -let package = Package( |
99 |
| - name: "MyProject", |
100 |
| - dependencies: [ |
101 |
| - .Package(url: "https://github.com/gizmosachin/ColorSlider.git", majorVersion: 0), |
102 |
| - ] |
103 |
| -) |
| 98 | +github "gizmosachin/ColorSlider" >= 4.0 |
104 | 99 | ```
|
105 | 100 |
|
106 |
| -### Manual |
107 |
| - |
108 |
| -You can also simply copy `ColorSlider.swift` into your Xcode project. |
109 |
| - |
110 |
| -## Example Project |
| 101 | +## Version Compatibility |
111 | 102 |
|
112 |
| -ColorSlider comes with an example project called Sketchpad, a simple drawing app. To try it, install [CocoaPods](http://cocoapods.org/) and run `pod install` under the `Example` directory. Then, open `Sketchpad.xcworkspace`. |
| 103 | +| Swift Version | Framework Version | |
| 104 | +| ------------- | ----------------- | |
| 105 | +| 4.0 | master | |
| 106 | +| 3.0 | 3.0.1 | |
113 | 107 |
|
114 |
| -## How it Works |
| 108 | +## Demo |
115 | 109 |
|
116 |
| -ColorSlider uses [HSB](https://en.wikipedia.org/wiki/HSB) and defaults to a saturation and brightness: 100%. |
| 110 | +Please see the `Demo` directory for a basic iOS project that uses `ColorSlider`. |
117 | 111 |
|
118 |
| -When the `orientation` is set to `.vertical`, dragging vertically adjusts the hue, and dragging outside adjusts the saturation and brightness as follows: |
| 112 | +## Contributing |
119 | 113 |
|
120 |
| -- Inside the frame, dragging vertically adjusts the hue |
121 |
| -- Outside the frame, dragging horizontally adjusts the saturation |
122 |
| -- Outside the frame, dragging vertically adjusts the brightness |
| 114 | +ColorSlider is a community - contributions and discussions are welcome! |
123 | 115 |
|
124 |
| -Adjusting the brightness lets you select black and white by first dragging on the slider, then moving your finger outside the frame to the top left (to select white) or bottom left (to select black) of the superview. |
| 116 | +Please read the [contributing guidelines](Contributing.md) prior to submitting a Pull Request. |
125 | 117 |
|
126 | 118 | ## License
|
127 | 119 |
|
128 |
| -ColorSlider is available under the MIT license, see the [LICENSE](https://github.com/gizmosachin/ColorSlider/blob/master/LICENSE) file for more information. |
| 120 | +ColorSlider is available under the MIT license, see the [LICENSE](LICENSE) file for more information. |
0 commit comments