Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optionally rotate thumb when sliding #50

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions Example/HGCircularSlider/Base.lproj/Main.storyboard
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12118" systemVersion="16A323" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" colorMatched="YES" initialViewController="sp2-vV-rZV">
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" colorMatched="YES" initialViewController="sp2-vV-rZV">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12086"/>
<capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
Expand Down Expand Up @@ -154,7 +153,7 @@
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="IfT-Jw-FAY" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-1254.5" y="2467.5"/>
<point key="canvasLocation" x="-2007.2" y="2219.6401799100449"/>
</scene>
<!--Tab Bar Controller-->
<scene sceneID="M9S-pb-Waq">
Expand All @@ -177,7 +176,7 @@
</tabBarController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gDj-DB-klF" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-327" y="1633"/>
<point key="canvasLocation" x="-523.20000000000005" y="1468.9655172413795"/>
</scene>
<!--Player-->
<scene sceneID="90r-0D-nKE">
Expand Down Expand Up @@ -290,7 +289,7 @@
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="LfZ-7G-N6b" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-794" y="2468"/>
<point key="canvasLocation" x="-1270.4000000000001" y="2220.089955022489"/>
</scene>
<!--Example-->
<scene sceneID="stQ-nu-pyE">
Expand Down Expand Up @@ -382,7 +381,7 @@
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="11N-ZE-qqz" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-326" y="2468"/>
<point key="canvasLocation" x="-521.60000000000002" y="2220.089955022489"/>
</scene>
<!--OClock-->
<scene sceneID="qvZ-oN-u0x">
Expand Down Expand Up @@ -584,7 +583,7 @@
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="4jZ-R1-SB1" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="148" y="2468"/>
<point key="canvasLocation" x="236.80000000000001" y="2220.089955022489"/>
</scene>
<!--Circular-->
<scene sceneID="EVO-nS-JTv">
Expand All @@ -602,7 +601,7 @@
<rect key="frame" x="46" y="152" width="283" height="283"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Rounds" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eTZ-Q0-WV1">
<rect key="frame" x="111" y="131.5" width="62" height="20.5"/>
<rect key="frame" x="110.5" y="131.5" width="62" height="20.5"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" red="0.1843137255" green="0.21960784310000001" blue="0.53725490200000003" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
Expand Down Expand Up @@ -651,6 +650,8 @@
<userDefinedRuntimeAttribute type="color" keyPath="diskColor">
<color key="value" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="boolean" keyPath="rotatesThumb" value="YES"/>
<userDefinedRuntimeAttribute type="image" keyPath="endThumbImage" value="arrow_thumb"/>
</userDefinedRuntimeAttributes>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" translatesAutoresizingMaskIntoConstraints="NO" id="KXq-jq-I0O">
Expand Down Expand Up @@ -736,20 +737,16 @@
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="ijD-qf-fmt" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="643" y="2468"/>
<point key="canvasLocation" x="1028.8" y="2220.089955022489"/>
</scene>
</scenes>
<resources>
<image name="Hours" width="219" height="219"/>
<image name="arrow_thumb" width="36" height="36"/>
<image name="first" width="30" height="30"/>
<image name="ic_bedtime" width="17" height="19"/>
<image name="ic_wake" width="13" height="16"/>
<image name="second" width="30" height="30"/>
<image name="time_indicators" width="301" height="300"/>
</resources>
<simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar"/>
<simulatedOrientationMetrics key="orientation"/>
<simulatedScreenMetrics key="destination" type="retina4_7.fullscreen"/>
</simulatedMetricsContainer>
</document>
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
},
{
"idiom" : "ios-marketing",
"size" : "1024x1024",
"scale" : "1x"
}
],
"info" : {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "arrow_thumb.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion HGCircularSlider/Classes/CircularSlider+Draw.swift
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,23 @@ extension CircularSlider {
- returns: return the origin point of the thumb
*/
@discardableResult
internal func drawThumb(withImage image: UIImage, angle: CGFloat, inContext context: CGContext) -> CGPoint {
internal func drawThumb(withImage image: UIImage, angle: CGFloat, inContext context: CGContext, rotate: Bool) -> CGPoint {
UIGraphicsPushContext(context)
context.beginPath()
let circle = Circle(origin: bounds.center, radius: self.radius)
let thumbOrigin = CircularSliderHelper.endPoint(fromCircle: circle, angle: angle)
let imageSize = image.size
let imageFrame = CGRect(x: thumbOrigin.x - (imageSize.width / 2), y: thumbOrigin.y - (imageSize.height / 2), width: imageSize.width, height: imageSize.height)
if rotate {
context.saveGState()
context.translateBy(x: imageFrame.center.x, y: imageFrame.center.y)
context.rotate(by: angle)
context.translateBy(x: -imageFrame.center.x, y: -imageFrame.center.y)
}
image.draw(in: imageFrame)
if rotate {
context.restoreGState()
}
UIGraphicsPopContext()

return thumbOrigin
Expand Down
13 changes: 12 additions & 1 deletion HGCircularSlider/Classes/CircularSlider.swift
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ open class CircularSlider: UIControl {
*
* The default value of this property is nil
*/
@IBInspectable
open var endThumbImage: UIImage?

// MARK: Accessing the Slider’s Value Limits
Expand Down Expand Up @@ -172,6 +173,16 @@ open class CircularSlider: UIControl {
}
}

/**
* When set to true, thumb image will rotate when the value changes.
*/
@IBInspectable
open var rotatesThumb: Bool = false {
didSet {
setNeedsDisplay()
}
}

/**
* The value of the endThumb (changed when the user change the position of the end thumb)
*
Expand Down Expand Up @@ -265,7 +276,7 @@ open class CircularSlider: UIControl {
drawThumb(withAngle: endAngle, inContext: context)
return
}
drawThumb(withImage: image, angle: endAngle, inContext: context)
drawThumb(withImage: image, angle: endAngle, inContext: context, rotate: rotatesThumb)
}

// MARK: User interaction methods
Expand Down
2 changes: 1 addition & 1 deletion HGCircularSlider/Classes/MidPointCircularSlider.swift
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ open class MidPointCircularSlider: RangeCircularSlider {
drawThumb(withAngle: midAngle, inContext: context)
return
}
drawThumb(withImage: image, angle: midAngle, inContext: context)
drawThumb(withImage: image, angle: midAngle, inContext: context, rotate: rotatesThumb)
}

// MARK: User interaction methods
Expand Down
4 changes: 2 additions & 2 deletions HGCircularSlider/Classes/RangeCircularSlider.swift
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ open class RangeCircularSlider: CircularSlider {
(isHighlighted == true && selectedThumb == .endThumb) ? endThumbStrokeHighlightedColor.setStroke() : endThumbStrokeColor.setStroke()
endThumbCenter = drawThumb(withAngle: endAngle, inContext: context)
if let image = endThumbImage {
endThumbCenter = drawThumb(withImage: image, angle: endAngle, inContext: context)
endThumbCenter = drawThumb(withImage: image, angle: endAngle, inContext: context, rotate: rotatesThumb)
}

// start thumb
Expand All @@ -246,7 +246,7 @@ open class RangeCircularSlider: CircularSlider {

startThumbCenter = drawThumb(withAngle: startAngle, inContext: context)
if let image = startThumbImage {
startThumbCenter = drawThumb(withImage: image, angle: startAngle, inContext: context)
startThumbCenter = drawThumb(withImage: image, angle: startAngle, inContext: context, rotate: rotatesThumb)
}
}

Expand Down