Skip to content

Commit be7d95b

Browse files
committed
Update README
1 parent d4ff513 commit be7d95b

File tree

2 files changed

+67
-75
lines changed

2 files changed

+67
-75
lines changed

Diff for: ColorSlider.gif

916 KB
Loading

Diff for: README.md

+67-75
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,120 @@
1-
# ColorSlider
1+
<p align="center">
2+
<img src="./ColorSlider.gif" width="65%">
3+
</p>
24

3-
ColorSlider is a [Swift](https://developer.apple.com/swift/) color picker with a live preview.
5+
---
46

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/).
68

7-
![ColorSlider](https://raw.githubusercontent.com/gizmosachin/ColorSlider/master/ColorSlider.gif)
9+
[![Build Status](https://travis-ci.org/gizmosachin/ColorSlider.svg?branch=master)](https://travis-ci.org/gizmosachin/ColorSlider) ![Pod Version](https://img.shields.io/cocoapods/v/ColorSlider.svg) [![Swift Version](https://img.shields.io/badge/language-swift%204.0-brightgreen.svg)](https://developer.apple.com/swift) [![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg)](LICENSE)
810

9-
![Pod Version](https://img.shields.io/cocoapods/v/ColorSlider.svg) [![Build Status](https://travis-ci.org/gizmosachin/ColorSlider.svg?branch=master)](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/) |
1920

2021
## Usage
2122

22-
Create and add an instance of ColorSlider to your view hierarchy.
23+
Create and add a ColorSlider to your view:
2324

2425
``` Swift
25-
let colorSlider = ColorSlider()
26+
let colorSlider = ColorSlider(orientation: .vertical, previewSide: .left)
2627
colorSlider.frame = CGRectMake(0, 0, 12, 150)
2728
view.addSubview(colorSlider)
2829
```
2930

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`:
3932

4033
``` Swift
41-
colorSlider.addTarget(self, action: #selector(ViewController.changedColor(_:)), forControlEvents: .valueChanged)
34+
colorSlider.addTarget(self, action: #selector(changedColor(_:)), forControlEvents: .valueChanged)
4235

4336
func changedColor(_ slider: ColorSlider) {
4437
var color = slider.color
4538
// ...
4639
}
4740
```
4841

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
5048

51-
``` swift
52-
colorSlider.previewEnabled = true
49+
// Disable rounded corners
50+
colorSlider.gradientView.automaticallyAdjustsCornerRadius = false
5351
```
5452

55-
Use a horizontal slider:
53+
### Preview
54+
55+
`ColorSlider` has a live preview that tracks touches along it. You can customize it:
5656

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)
5964
```
6065

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.
6274

75+
To disable the preview, simply pass `nil` to ColorSlider's initializer:
6376
``` Swift
64-
colorSlider.borderWidth = 2.0
65-
colorSlider.borderColor = UIColor.white
77+
let colorSlider = ColorSlider(orientation: .vertical, previewView: nil)
6678
```
6779

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.
6981

70-
## Installation
82+
### Documentation
7183

72-
### CocoaPods
84+
ColorSlider is fully documented [here](http://gizmosachin.github.io/ColorSlider).
85+
86+
## Installation
7387

74-
ColorSlider is available for installation using [CocoaPods](http://cocoapods.org/). To integrate, add the following to your Podfile`:
88+
### [CocoaPods](https://cocoapods.org/)
7589

7690
``` ruby
7791
platform :ios, '9.0'
78-
use_frameworks!
79-
80-
pod 'ColorSlider', '~> 3.0.1'
92+
pod 'ColorSlider', '~> 4.0'
8193
```
8294

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)
8696

8797
``` 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
10499
```
105100

106-
### Manual
107-
108-
You can also simply copy `ColorSlider.swift` into your Xcode project.
109-
110-
## Example Project
101+
## Version Compatibility
111102

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 |
113107

114-
## How it Works
108+
## Demo
115109

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`.
117111

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
119113

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!
123115

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.
125117

126118
## License
127119

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

Comments
 (0)