You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+69-75Lines changed: 69 additions & 75 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,23 @@
1
-
# Slider with _ticks_+ animated Label
2
-
TGPControls are drop-in replacement of `UISlider` & `UILabel`, with visual preview in **Interface Builder**.
1
+
# Slider with _ticks_& animated Label (Swift)
2
+
TGPControls are drop-in replacement of `UISlider` & `UILabel`, with visual preview in **Interface Builder**, single liner instrumentation, smooth animations, simple API, powerful customization.
`TGPDiscreteSlider`: A slider with discrete steps, discrete range, with customizable track, thumb and ticks.
8
-
Ideal to select steps.
7
+
`TGPDiscreteSlider`: A slider with discrete steps (i.e. ticks), discrete range, with customizable track, thumb and ticks.
8
+
Ideal to select individual steps, star rating, integers, rainbow colors, slices and in general any value that is not a continuum. Just set the number of stops, TGPDiscreteSlider handles the selection and the animations for you.
@@ -42,43 +43,47 @@ Most customization can be done in **Interface Builder** and require **zero codin
42
43
43
44
## How to integrate
44
45
Using [CocoaPods](http://cocoapods.org/?q=TGPControls)
45
-
-**iOS 9 and later, iOS 8**: install CocoaPods 0.36.0+ [CocoaPods-Frameworks](http://blog.cocoapods.org/Pod-Authors-Guide-to-CocoaPods-Frameworks/), add `use_frameworks!` to your podfile.
46
-
-**iOS 7**: restrict yourself to `TGPCamelLabels7.{h,m}` and `TGPDiscreteSlider7.{h,m}`. Compatible with CocoaPods 0.35.0.
47
-
*Note: When integrating into an iOS 7 project, use the TGPCamelLabels7 and TGPDiscreteSlider7 classes in Interface Builder.*
46
+
-**iOS 10 and later down to iOS 8**: install CocoaPods 1.2.0+ [CocoaPods-Frameworks](http://blog.cocoapods.org/Pod-Authors-Guide-to-CocoaPods-Frameworks/), add `use_frameworks!` to your podfile.
47
+
-**iOS 7**: Use TGPControls version 2.1.0
48
48
49
49
Besides customization, which you can do entirely under Interface Builder in iOS 8 and later, both `TGPDiscreteSlider` and `TGPCamelLabels` require surprisingly little code to integrate.
50
50
51
-
### TGPDiscreteSlider
51
+
### DiscreteSlider
52
52
53
53
For simplicity, TGPDiscreteSlider does *not* descend from UISlider but from **UIControl**.
54
54
It uses a `minimumValue`, a `tickCount` and an `incrementValue` (instead of *minimumValue* and *maximumValue*).
55
-
All graphic aspects, such as physical spacing of the ticks or physical width of the track are controlled internally.
56
-
This makes TGPDiscreteSlider predictable. it is guaranteed to always fit snuggly inside its bounds.
55
+
All graphic aspects, such as physical spacing of the ticks or physical width of the track are controlled internally. This makes TGPDiscreteSlider predictable. it is guaranteed to always fit snuggly inside its bounds.
57
56
58
-
**Step 1**: *register* to notifications (*just like any UIControl*)
57
+
**Single step**: To use DiscreteSlider + CamelLabels in tandem, you need exactly **1 line of code**:
Through the `TGPControlsTicksProtocol`, the camelLabels listen to _value_ and _size_ changes. You may want to adopt this protocol to handle changes, or use the traditional `UIControl` notifications:
64
+
65
+
**Advanced Steps (1a)**: *register* to notifications (*just like any UIControl*)
66
+
```
67
+
discreteSlider.addTarget(self,
68
+
action: #selector(valueChanged(_:event:)),
69
+
for: .valueChanged)
70
+
```
71
+
**Advanced Steps (1b)**: *respond* to notification
Besides font customization, `TGPCamelLabels` only requires a set of labels (supplied as *strings*), and an active index selection.
119
124
120
125
**Step 1**: *tell* the TGPCamelLabels what to select
126
+
_(Refer to **Single step** section above to use DiscreteSlider + CamelLabels in tandem)_
121
127
```
122
-
[self.camelLabels setValue:sender.value];
128
+
camelLabels.value = sender.value
123
129
```
124
130
125
131
*There is no step 2.*
@@ -129,20 +135,20 @@ Most of the customization can be done inside **Interface Builder**.
129
135
130
136
| Property ||
131
137
|:---------| ----- |
132
-
|`ticksListener`| ties a discrete slider to its camel labels. This is your most robust method to not only ensure that the layout of both controls match exactly, but also adjust this spacing when orientation changes. A typical use may be `self.discreteSlider.ticksListener = self.camelLabels`|
133
-
|`names`| supplies a new set of labels ; supersedes the `tickCount` property, which will return the number of labels. A typical use may be `self.camelLabels.names = @[@"OFF", @"ON"]`|
134
-
|`ticksDistance`|_override_ the labels spacing entirely ; **prefer** the `ticksListener` mechanism if it is available to you. A typical use may be `self.camelLabels.ticksDistance = 15`|
138
+
|`ticksListener`| ties a discrete slider to its camel labels. This is your most robust method to not only ensure that the layout of both controls match exactly, but also adjust this spacing when orientation changes. A typical use may be `discreteSlider.ticksListener = camelLabels`|
139
+
|`names`| supplies a new set of labels ; supersedes the `tickCount` property, which will return the number of labels. A typical use may be `camelLabels.names = ["OFF", "ON"]`|
140
+
|`ticksDistance`|_override_ the labels spacing entirely ; **prefer** the `ticksListener` mechanism if it is available to you. A typical use may be `camelLabels.ticksDistance = 15`|
135
141
|`value`| which label is emphasized (_selected_) |
136
-
|`backgroundColor`| labels become *tap-through* (**click-through**) when set to `clearColor` ; use TGPCamelLabels *on top of* other UI elements, **even native iOS objects**!:|
142
+
|`backgroundColor`| labels become *tap-through* (**click-through**) when set to `UIColor.clear` ; use TGPCamelLabels *on top of* other UI elements, **even native iOS objects**!:|
137
143
138
144
| Edges & Animation ||
139
145
|:------------------| ----- |
140
146
|`offCenter`|**leftmost and righmost labels only**: relative inset expressed as a proportion of individual label width: 0: none, +0.5: nudge in by a half width (fully fit) or -0.5: draw completely outside |
141
147
|`insets`|**leftmost and righmost labels only**: absolute inset expressed in pixels |
142
-
|`emphasisLayout`| emphasized (_selected_) labels vertical alignment ; `top`, `centerY` or `bottom`. Default is `top` (†) |
143
-
|`regularLayout`| regular labels vertical alignment ; `top`, `centerY` or `bottom`. Default is `bottom` (†) |
148
+
|`emphasisLayout`| emphasized (_selected_) labels vertical alignment ; `.top`, `.centerY` or `.bottom`. Default is `.top` (†) |
149
+
|`regularLayout`| regular labels vertical alignment ; `.top`, `.centerY` or `.bottom`. Default is `.bottom` (†) |
144
150
145
-
(†) No camel animation will occur when `emphasisLayout` = `regularLayout`, i.e. `centerY`.
151
+
(†) No camel animation will occur when `emphasisLayout` = `regularLayout`, i.e. `.centerY`.
146
152
147
153
| Emphasized labels ||
148
154
|:------------------| ----- |
@@ -158,53 +164,41 @@ Most of the customization can be done inside **Interface Builder**.
158
164
159
165
### Code example
160
166
161
-
See **TGPControlsDemo** projects:
162
-
1.`TGPControlsDemo` (iOS 9 & 8 + Swift + IBInspectable)
163
-
2.`TGPControlsDemo7` (iOS 7 + ObjC) projects.
167
+
See **TGPControlsDemo** project: `TGPControlsDemo` (Modern Swift syntax + IBInspectable)
0 commit comments