I created a UIView and a UIImageView which is inside the UIView as a subview, then I added a pan gesture to the UIImageView to slide within the UIView, the image slides now but the problem I have now is when the slider gets to the end of the view if movex > xMax, I want to print this just once print("SWIPPERD movex"). The current code I have there continues to print print("SWIPPERD movex") as long as the user does not remove his/her hand from the UIImageView which is used to slide
private func swipeFunc() {
let swipeGesture = UIPanGestureRecognizer(target: self, action: #selector(acknowledgeSwiped(sender:)))
sliderImage.addGestureRecognizer(swipeGesture)
swipeGesture.delegate = self as? UIGestureRecognizerDelegate
}
#objc func acknowledgeSwiped(sender: UIPanGestureRecognizer) {
if let sliderView = sender.view {
let translation = sender.translation(in: self.baseView) //self.sliderView
switch sender.state {
case .began:
startingFrame = sliderImage.frame
viewCenter = baseView.center
fallthrough
case .changed:
if let startFrame = startingFrame {
var movex = translation.x
if movex < -startFrame.origin.x {
movex = -startFrame.origin.x
print("SWIPPERD minmax")
}
let xMax = self.baseView.frame.width - startFrame.origin.x - startFrame.width - 15 //self.sliderView
if movex > xMax {
movex = xMax
print("SWIPPERD movex")
}
var movey = translation.y
if movey < -startFrame.origin.y { movey = -startFrame.origin.y }
let yMax = self.baseView.frame.height - startFrame.origin.y - startFrame.height //self.sliderView
if movey > yMax {
movey = yMax
// print("SWIPPERD min")
}
sliderView.transform = CGAffineTransform(translationX: movex, y: movey)
}
default: // .ended and others:
UIView.animate(withDuration: 0.1, animations: {
sliderView.transform = CGAffineTransform.identity
})
}
}
}
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
return sliderImage.frame.contains(point)
}
You may want to use the .ended state instead of .changed state, based on your requirements. And you've mentioned you want to get the right direction only. You could try below to determine if the swipe came from right to left, or vice-versa, change as you wish:
let velocity = sender.velocity(in: sender.view)
let rightToLeftSwipe = velocity.x < 0
I am doing a iPhone project in Swift where on top of my homeScreen, I am adding multiple views in a stack.
My requirement is to be able to move each individual child view on top of the homeScreen like Tinder card swiping effect. I am using UIPanGesture to achieve this so that the each individual view follows my finger on screen.
But my problem is that instead of the desired effect of moving only one screen all the stack of Views is moving together on my Home Screen.
I am stuck at this problem for the last 4 days. Kindly help me out.
Xcode Version 7.2.1 and Swift 2.1
Here is the code that moves the UIView:
//For creating each childView and adding UIPanGestureRecognizer to each childView
func configureInitialViewPlacement() -> Void {
for var i:Int = cardsArray.count-1; 0 <= i; i--
{
let cardView = cardsArray[i]
let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: "beingDragged:")
cardView.addGestureRecognizer(panGestureRecognizer)
self.view.addSubview(cardView)
var frame = CGRectZero
var originalFrame = self.view.bounds
originalFrame = CGRectMake(originalFrame.origin.x+10,originalFrame.origin.y+10 , originalFrame.size.width-20, originalFrame.size.height-20)
frame.size.height = originalFrame.size.height
frame.size.width = originalFrame.size.width - CGFloat((2*CGFloat(i)*paddingOffset))
frame.origin.x = originalFrame.origin.x + CGFloat((CGFloat(i)*paddingOffset))
frame.origin.y = originalFrame.origin.y + CGFloat((CGFloat(i)*paddingOffset))
cardView.frame = frame
cardView.setContentViewForCard(cardDataArray[i])
}
}
// Method For gestureRecognizer
func beingDragged(gestureRecognizer: UIPanGestureRecognizer) -> Void {
xFromCenter = Float(gestureRecognizer.translationInView(self.view).x)
yFromCenter = Float(gestureRecognizer.translationInView(self.view).y)
switch gestureRecognizer.state {
case UIGestureRecognizerState.Began:
self.originPoint = self.view.center
case UIGestureRecognizerState.Changed:
let rotationStrength: Float = min(xFromCenter/ROTATION_STRENGTH, ROTATION_MAX)
let rotationAngle = ROTATION_ANGLE * rotationStrength
let scale = max(1 - fabsf(rotationStrength) / SCALE_STRENGTH, SCALE_MAX)
self.view.center = CGPointMake(self.originPoint.x + CGFloat(xFromCenter), self.originPoint.y + CGFloat(yFromCenter))
let transform = CGAffineTransformMakeRotation(CGFloat(rotationAngle))
let scaleTransform = CGAffineTransformScale(transform, CGFloat(scale), CGFloat(scale))
self.view.transform = scaleTransform
self.updateOverlay(CGFloat(xFromCenter))
case UIGestureRecognizerState.Ended:
self.afterSwipeAction()
case UIGestureRecognizerState.Possible:
fallthrough
case UIGestureRecognizerState.Cancelled:
fallthrough
case UIGestureRecognizerState.Failed:
fallthrough
default:
break
}
}
func afterSwipeAction() -> Void {
let floatXFromCenter = Float(xFromCenter)
if floatXFromCenter > ACTION_MARGIN {
self.rightAction()
} else if floatXFromCenter < -ACTION_MARGIN {
self.leftAction()
} else {
UIView.animateWithDuration(0.3, animations: {() -> Void in
self.view.center = self.originPoint
self.view.transform = CGAffineTransformMakeRotation(0)
})
}
}
// For Right Swipe
func rightAction() -> Void {
let finishPoint: CGPoint = CGPointMake(500, 2 * CGFloat(yFromCenter) + self.originPoint.y)
UIView.animateWithDuration(0.3,
animations: {
self.view.center = finishPoint
}, completion: {
(value: Bool) in
self.cardsArray[0].removeFromSuperview()
})
delegateforcard.cardSwipedRight(self.cardsArray[0])
}
// For Left Swipe
func leftAction() -> Void {
let finishPoint: CGPoint = CGPointMake(-500, 2 * CGFloat(yFromCenter) + self.originPoint.y)
UIView.animateWithDuration(0.3,
animations: {
self.view.center = finishPoint
}, completion: {
(value: Bool) in
self.cardsArray[0].removeFromSuperview()
})
delegateforcard.cardSwipedLeft(self.cardsArray[0])
}
Let me know if you need more clarifications.
Thanks.
I have also done the same in objective-c, You can get an idea from here,
Here is my code
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]initWithTarget:self action:#selector(cardMoving:)];
-(void)cardMoving:(UIPanGestureRecognizer *)gestureRecognizer
{
xValueFromCenter = [gestureRecognizer translationInView:self].x; // if right positive(+) value, negative for left
yValueFromCenter = [gestureRecognizer translationInView:self].y; // if swipe up positive(+), negative for down
switch (gestureRecognizer.state) {
case UIGestureRecognizerStateBegan:{
originalPoint = self.center;
break;
};
case UIGestureRecognizerStateChanged:{
CGFloat rotationStrength = MIN(xValueFromCenter / ROTATION_STRENGTH, ROTATION_MAX);
CGFloat rotationAngel = (CGFloat) (ROTATION_ANGLE * rotationStrength);
CGFloat scale = MAX(1 - fabs(rotationStrength) / SCALE_STRENGTH, SCALE_MAX);
self.center = CGPointMake(originalPoint.x + xValueFromCenter, originalPoint.y + yValueFromCenter);
CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngel);
CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);
self.transform = scaleTransform;
[self updateOverlay:xValueFromCenter];
break;
};
case UIGestureRecognizerStateEnded: {
[self afterSwipeAction];
break;
};
case UIGestureRecognizerStatePossible:break;
case UIGestureRecognizerStateCancelled:break;
case UIGestureRecognizerStateFailed:break;
}
}
-(void)updateOverlay:(CGFloat)distance
{
if (distance > 0) {
overlayView.Direction = GGOverlayViewDirectionRight;
} else {
overlayView.Direction = GGOverlayViewDirectionLeft;
}
overlayView.alpha = MIN(fabs(distance)/100, 0.7);
}
- (void)afterSwipeAction
{
if (xValueFromCenter > ACTION_MARGIN) {
[self rightAction];
} else if (xValueFromCenter < -ACTION_MARGIN) {
[self leftAction];
} else { //for reseting the card
[UIView animateWithDuration:0.3
animations:^{
self.center = originalPoint;
self.transform = CGAffineTransformMakeRotation(0);
overlayView.alpha = 0;
}];
}
}
I have a UIImageView which I have made Draggable via a custom class called DraggableImageView2. The class is then instantiated in a UIViewController with an image and can be dragged within a UIView. The thing is I want to restrict the UIImageView not to go past the specific boundaries when dragged. Here is my current code:
import UIKit
class DraggableImageView2: UIImageView, UIGestureRecognizerDelegate {
var dragStartPositionRelativeToCenter : CGPoint?
var dragGesture: UIGestureRecognizer!
var zoomGesture: UIGestureRecognizer!
var lastKnownCenterX: CGFloat = 0.0
var lastKnownCenterY: CGFloat = 0.0
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.initializeGestures()
}
override init(image: UIImage?) {
super.init(image: image)
self.initializeGestures()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.initializeGestures()
}
func initializeGestures() {
self.userInteractionEnabled = true
self.multipleTouchEnabled = true
dragGesture = UIPanGestureRecognizer(target: self, action: #selector(DraggableImageView.handlePan(_:)))
self.addGestureRecognizer(dragGesture)
}
func handlePan(recognizer: UIPanGestureRecognizer!) {
Scripts.log("PAN >>> MOVE ACTIVATED")
if recognizer.state == UIGestureRecognizerState.Began {
let locationInView = recognizer.locationInView(superview)
dragStartPositionRelativeToCenter = CGPoint(x: locationInView.x - center.x, y: locationInView.y - center.y)
return
}
if recognizer.state == UIGestureRecognizerState.Ended {
dragStartPositionRelativeToCenter = nil
return
}
let locationInView = recognizer.locationInView(superview)
Scripts.log("PAN LOCATION >>> X = \(self.frame.origin.x) | Y = \(self.frame.origin.y) | LX = \(locationInView.x) | LY = \(locationInView.y) | DX = \(self.dragStartPositionRelativeToCenter!.x) | DY = \(self.dragStartPositionRelativeToCenter!.y)")
let xDragMin: CGFloat = 1.0
let yDragMin: CGFloat = 1.0
let xDragMax: CGFloat = kDEVICE_WIDTH - self.frame.size.width - 1.0
let yDragMax: CGFloat = kDEVICE_WIDTH - self.frame.size.height - 1.0
var newCenterX: CGFloat = locationInView.x - self.dragStartPositionRelativeToCenter!.x
var newCenterY: CGFloat = locationInView.y - self.dragStartPositionRelativeToCenter!.y
if self.frame.origin.x < xDragMin {
Scripts.log("PAN LOCATION >>> X MIN PAST BOUNDS")
newCenterX = lastKnownCenterX
}
if self.frame.origin.y < yDragMin {
Scripts.log("PAN LOCATION >>> Y MIN PAST BOUNDS")
newCenterY = lastKnownCenterY
}
if self.frame.origin.x > xDragMax {
Scripts.log("PAN LOCATION >>> X MAX PAST BOUNDS")
}
if self.frame.origin.y > yDragMax {
Scripts.log("PAN LOCATION >>> Y MAX PAST BOUNDS")
}
UIView.animateWithDuration(0.1) {
self.center = CGPoint(x: newCenterX,
y: newCenterY)
}
lastKnownCenterX = newCenterX
lastKnownCenterY = newCenterY
}
func handlePinch(recognizer: UIPinchGestureRecognizer!) {
Scripts.log("PINCH >>> ZOOM ACTIVATED")
//self.bringSubviewToFront(recognizer.view!)
recognizer.view?.transform = CGAffineTransformScale((recognizer.view?.transform)!, recognizer.scale, recognizer.scale)
recognizer.scale = 1
}
func gestureRecognizer(gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWithGestureRecognizer otherGestureRecognizer: UIGestureRecognizer) -> Bool {
Scripts.log("shouldRecognizeSimultaneouslyWithGestureRecognizer WAS CALLED")
return true
}
}
I've only started working on the xDragMin and yDragMin portion. Everything works for stopping it when it is less than the xDragMin, but the problem becomes for some strange reason, when you try to drag out of it, it gets frozen in that X Point. Same for the yDragMin, one if reaches the min, it stops as it should, but can't drag out of the Y Point.
So after some more digging and playing around, I seem to have been able to solve my own problem, at least for the X Bounds Min. Here is what I did:
(1) Added these new variables
var isWithinXBounds: Bool = true
var lastKnownLX: CGFloat = 0.0
(2) The logic starting with "if self.frame.origin.x < xDragMin" needed to be fine tuned. This condition is perfectly fine until it hits the X bounds. Once it does then self.frame.origin.x will never change (DUH) cos now its position is locked. I need another condition to check that once the bounds has been hit i.e. locked, check if the users touch is moving in a +ve direction. If so, then set the BOOL value back to TRUE which will unlock the x position
if self.frame.origin.x < xDragMin {
Scripts.log("PAN LOCATION >>> X MIN PAST BOUNDS")
self.isWithinXBounds = false
//If TOUCH still moving in negative direction
if locationInView.x - lastKnownLX < 0 {
newCenterX = lastKnownCenterX
}
else {
self.isWithinXBounds = true
}
}
(3) Here is the condition that will then unlock the UIImageView based on the BOOL value:
if isWithinXBounds {
lastKnownCenterX = newCenterX
lastKnownLX = locationInView.x
}
I've published iOS app in swift whose main functions are:
1) add a photo / take a photo
2) add emoji on the photo
3) zoom, rotate, drag emoji to decorate photo
4) share it on instagram.
Emojis can be rotated, zoomed, and dragged. I've implemented these functions using UIGestureRecognizers such as UIRoationGestrueRecognizer, UIPinchGestureRecognizer, and UIPanGesstureRecognizer.
Now I am trying to update app with snapchat-like pinch zoom feature where users can zoom in / out emojis between two fingers to the extreme. Current pinch gesture works only when users' fingers are on the imageView (emoji).
Any idea / example code how to do snapchat-like pinch zoom? Below codes are how I handled rotation, pinch, and drag. Thanks in advance.
// UI Gesture Recognizers
#IBAction func handlePinch(recognizer : UIPinchGestureRecognizer) {
if(deleteMode) {
return
}
if let view = recognizer.view {
view.transform = CGAffineTransformScale(view.transform,
recognizer.scale, recognizer.scale)
recognizer.scale = 1
}
}
#IBAction func handleRotate(recognizer : UIRotationGestureRecognizer) {
if(deleteMode) {
return
}
if let view = recognizer.view {
view.transform = CGAffineTransformRotate(view.transform, recognizer.rotation)
recognizer.rotation = 0
}
}
#IBAction func handlePan(recognizer:UIPanGestureRecognizer) {
if(deleteMode) {
return
}
let translation = recognizer.translationInView(self.view)
var centerX: CGFloat!
var centerY: CGFloat!
if let view = recognizer.view {
// limit the boundary - using backgroundPanel.frame.width, height, origin.x, origin.y
if(view.center.x + translation.x < panelBackground.frame.origin.x) {
centerX = view.center.x + translation.x + 10
} else if(view.center.x > panelBackground.frame.size.width){
centerX = view.center.x + translation.x - 10
} else {
centerX = view.center.x + translation.x
}
if(view.center.y < panelBackground.frame.origin.y - 60){
// set y that I can use below
centerY = view.center.y + translation.y + 10
} else if(view.center.y > panelBackground.frame.size.height){
centerY = view.center.y + translation.y - 10
} else {
centerY = view.center.y + translation.y
}
// set final position
view.center = CGPoint(x:centerX,
y:centerY)
recognizer.setTranslation(CGPointZero, inView: self.view)
}
}
#IBAction func handleLongPress(recognizer: UILongPressGestureRecognizer) {
if(recognizer.state == UIGestureRecognizerState.Began) {
if(!deleteMode) {
print("LongPress - Delete Shows")
for (_, stickers) in self.backgroundImage.subviews.enumerate() {
for (_, deleteButtons) in stickers.subviews.enumerate() {
if let delete:UIImageView = deleteButtons as? UIImageView{
if(delete.accessibilityIdentifier == "delete") {
delete.alpha = 0.5
}
}
}
}
deleteMode = true
} else {
deleteButtonHides()
}
}
}
I'm also looking drag, pan and zoom at the same time like snapchat but if you are just looking for zoom. I'm using below function for a label to zoom via pinch. It is not smooth but do the zooming job.
func handlePinch(recognizer: UIPinchGestureRecognizer) {
if let view = recognizer.view as? UILabel {
let pinchScale: CGFloat = recognizer.scale
view.transform = view.transform.scaledBy(x: pinchScale, y: pinchScale)
recognizer.scale = 1.0
}
}
For drag,pan and zoom at the same time, checkout my below post:
Pinch, drag and pan at the same time
To achieve this snapchat like pinch zooming, add pinch gesture on Parent view also and instead of recognizer transform the selected sticker as written below:
#objc func mainImgPinchGesture(_ recognizer: UIPinchGestureRecognizer) {
print("----pinchGestureAction")
if let view = recognizer.view {
if selectedSubView != nil{
self.selectedSubView.transform = view.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
self.selectedSubView.contentScaleFactor = 1
}
}
}
What I want to get is a UISlider which lets the user not only slide when he starts on its thumbRect, but also when he taps elsewhere. When the user taps on the slider but outside of the thumbRect, the slider should jump to that value and then still keeping up to the user's sliding gesture.
What I have tried so far was implementing a subclass of UIGestureRecognizer like in this suggestion. It starts right then when a touch down somewhere outside the thumbRect occurs. The problem is that the slider sets its value but then further sliding gestures are ignored because the touch down recognizer has stolen the touch.
How can I implement a slider where you can tap anywhere but still slide right away?
Edit: ali59a was so kind to add an example of what I've done now. This requires to lift the finger again, after that I can touch and drag to slide (a tap is not what I want, I need a 'touch and slide' right away).
I'm not sure if you are still looking for an answer for this, but I was just looking at this myself today; and I managed to get it to work for me.
The key to it, is using a UILongPressGestureRecognizer instead of just a UITapGestureRecognizer, we can then set the minimumPressDuration of the recognizer to 0; making it act as a tap recognizer, except you can now actually check its state.
Putting what ali59a suggested will work for you, just by replacing the UITapGestureRecognizer with a UILongPressGestureRecognizer. However, I found that this didn't seem to quite put the thumbRect directly under my thumb. It appeared a bit off to me.
I created my own UISlider subclass for my project, and here is how I implemented the "tap and slide feature" for me.
In my init method:
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:#selector(tapAndSlide:)];
longPress.minimumPressDuration = 0;
[self addGestureRecognizer:longPress];
Then my tapAndSlide: method:
- (void)tapAndSlide:(UILongPressGestureRecognizer*)gesture
{
CGPoint pt = [gesture locationInView: self];
CGFloat thumbWidth = [self thumbRect].size.width;
CGFloat value;
if(pt.x <= [self thumbRect].size.width/2.0)
value = self.minimumValue;
else if(pt.x >= self.bounds.size.width - thumbWidth/2.0)
value = self.maximumValue;
else {
CGFloat percentage = (pt.x - thumbWidth/2.0)/(self.bounds.size.width - thumbWidth);
CGFloat delta = percentage * (self.maximumValue - self.minimumValue);
value = self.minimumValue + delta;
}
if(gesture.state == UIGestureRecognizerStateBegan){
[UIView animateWithDuration:0.35 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
[self setValue:value animated:YES];
[super sendActionsForControlEvents:UIControlEventValueChanged];
} completion:nil];
}
else [self setValue:value];
if(gesture.state == UIGestureRecognizerStateChanged)
[super sendActionsForControlEvents:UIControlEventValueChanged];
}
Where I also used a method to return the frame of my custom thumbRect:
- (CGRect)thumbRect {
CGRect trackRect = [self trackRectForBounds:self.bounds];
return [self thumbRectForBounds:self.bounds trackRect:trackRect value:self.value];
}
I also have my slider animate to the position where the user first taps, over 0.35 seconds. Which I reckon looks pretty sweet, so I included that in that code.
If you don't want that, simply try this:
- (void)tapAndSlide:(UILongPressGestureRecognizer*)gesture
{
CGPoint pt = [gesture locationInView: self];
CGFloat thumbWidth = [self thumbRect].size.width;
CGFloat value;
if(pt.x <= [self thumbRect].size.width/2.0)
value = self.minimumValue;
else if(pt.x >= self.bounds.size.width - thumbWidth/2.0)
value = self.maximumValue;
else {
CGFloat percentage = (pt.x - thumbWidth/2.0)/(self.bounds.size.width - thumbWidth);
CGFloat delta = percentage * (self.maximumValue - self.minimumValue);
value = self.minimumValue + delta;
}
[self setValue:value];
if(gesture.state == UIGestureRecognizerStateChanged)
[super sendActionsForControlEvents:UIControlEventValueChanged];
}
I hope that makes sense, and helps you.
I converted the answer provided by DWilliames to Swift
Inside your viewDidAppear()
let longPress = UILongPressGestureRecognizer(target: self.slider, action: Selector("tapAndSlide:"))
longPress.minimumPressDuration = 0
self.addGestureRecognizer(longPress)
Class file
class TapUISlider: UISlider
{
func tapAndSlide(gesture: UILongPressGestureRecognizer)
{
let pt = gesture.locationInView(self)
let thumbWidth = self.thumbRect().size.width
var value: Float = 0
if (pt.x <= self.thumbRect().size.width / 2)
{
value = self.minimumValue
}
else if (pt.x >= self.bounds.size.width - thumbWidth / 2)
{
value = self.maximumValue
}
else
{
let percentage = Float((pt.x - thumbWidth / 2) / (self.bounds.size.width - thumbWidth))
let delta = percentage * (self.maximumValue - self.minimumValue)
value = self.minimumValue + delta
}
if (gesture.state == UIGestureRecognizerState.Began)
{
UIView.animateWithDuration(0.35, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut,
animations:
{
self.setValue(value, animated: true)
super.sendActionsForControlEvents(UIControlEvents.ValueChanged)
},
completion: nil)
}
else
{
self.setValue(value, animated: false)
}
}
func thumbRect() -> CGRect
{
return self.thumbRectForBounds(self.bounds, trackRect: self.bounds, value: self.value)
}
}
You should add a tap gesture on your UISlider.
Exemple :
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(sliderTapped:)];
[_slider addGestureRecognizer:tapGestureRecognizer];
In sliderTapped you can get the location and update the value of the slider :
- (void)sliderTapped:(UIGestureRecognizer *)gestureRecognizer {
CGPoint pointTaped = [gestureRecognizer locationInView:gestureRecognizer.view];
CGPoint positionOfSlider = _slider.frame.origin;
float widthOfSlider = _slider.frame.size.width;
float newValue = ((pointTaped.x - positionOfSlider.x) * _slider.maximumValue) / widthOfSlider;
[_slider setValue:newValue];
}
I create an example here : https://github.com/ali59a/tap-and-slide-in-a-UISlider
Here's my modification to the above:
class TapUISlider: UISlider {
func tapAndSlide(gesture: UILongPressGestureRecognizer) {
let pt = gesture.locationInView(self)
let thumbWidth = self.thumbRect().size.width
var value: Float = 0
if (pt.x <= self.thumbRect().size.width / 2) {
value = self.minimumValue
} else if (pt.x >= self.bounds.size.width - thumbWidth / 2) {
value = self.maximumValue
} else {
let percentage = Float((pt.x - thumbWidth / 2) / (self.bounds.size.width - thumbWidth))
let delta = percentage * (self.maximumValue - self.minimumValue)
value = self.minimumValue + delta
}
if (gesture.state == UIGestureRecognizerState.Began) {
UIView.animateWithDuration(0.35, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut,
animations: {
self.setValue(value, animated: true)
super.sendActionsForControlEvents(UIControlEvents.ValueChanged)
}, completion: nil)
} else {
self.setValue(value, animated: false)
super.sendActionsForControlEvents(UIControlEvents.ValueChanged)
}
}
func thumbRect() -> CGRect {
return self.thumbRectForBounds(self.bounds, trackRect: self.bounds, value: self.value)
}
}
Adding swift version of Ali AB.'s answer,
#IBAction func sliderTappedAction(sender: UITapGestureRecognizer)
{
if let slider = sender.view as? UISlider {
if slider.highlighted { return }
let point = sender.locationInView(slider)
let percentage = Float(point.x / CGRectGetWidth(slider.bounds))
let delta = percentage * (slider.maximumValue - slider.minimumValue)
let value = slider.minimumValue + delta
slider.setValue(value, animated: true)
}
}
I didn't check David Williames answer, but I'll post my solution in case someone is looking for another way to do it.
Swift 4
First create a custom UISlider so that it will detect touches on the bar as well :
class CustomSlider: UISlider {
override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
return true
}
}
(don't forget to set your slider to be this CustomSlider, on storyboard)
The on viewDidLoad of the view controller that is displaying the slider:
self.slider.addTarget(self, action: #selector(sliderTap), for: .touchDown)
(this is only used to pause the player when moving the slider)
Then, on your UISlider action:
#IBAction func moveSlider(_ sender: CustomSlider, forEvent event: UIEvent) {
if let touchEvent = event.allTouches?.first {
switch touchEvent.phase {
case .ended, .cancelled, .stationary:
//here, start playing if needed
startPlaying()
default:
break
}
}
}
And on your "sliderTap" selector method:
#objc func sliderTap() {
//pause the player, if you want
audioPlayer?.pause()
}
Suggestion: set the player "currentTime" before starting to play:
private func startPlaying() {
audioPlayer?.currentTime = Double(slider.value)
audioPlayer?.play()
}
Updated tsji10dra's answer to Swift 4:
#IBAction func sliderTappedAction(sender: UITapGestureRecognizer) {
if let slider = sender.view as? UISlider {
if slider.isHighlighted { return }
let point = sender.location(in: slider)
let percentage = Float(point.x / slider.bounds.size.width)
let delta = percentage * (slider.maximumValue - slider.minimumValue)
let value = slider.minimumValue + delta
slider.setValue(value, animated: true)
// also remember to call valueChanged if there's any
// custom behaviour going on there and pass the slider
// variable as the parameter, as indicated below
self.sliderValueChanged(slider)
}
}
My solution is quite simple:
class CustomSlider: UISlider {
override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
let newValue = <calculated_value>
self.setValue(newValue, animated: false)
super.sendActions(for: UIControlEvents.valueChanged)
return true
}}
This works for me in iOS 13.6 & 14.0
No need to add gesture only override beginTracking function like this :
#objc
private func sliderTapped(touch: UITouch) {
let point = touch.location(in: self)
let percentage = Float(point.x / self.bounds.width)
let delta = percentage * (self.maximumValue - self.minimumValue)
let newValue = self.minimumValue + delta
if newValue != self.value {
value = newValue
sendActions(for: .valueChanged)
}
}
override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
sliderTapped(touch: touch)
return true
}
I completed #DWilliames solution for a UISlider subclass containing minimum and maximumValueImages.
Additionally I implemented a functionality for user touches in the areas outside the trackArea (means either the area around the minimum or the maximumValueImage). Touching these areas moves the slider/changes the value in intervals.
- (void) tapAndSlide: (UILongPressGestureRecognizer*) gesture {
CGPoint touchPoint = [gesture locationInView: self];
CGRect trackRect = [self trackRectForBounds: self.bounds];
CGFloat thumbWidth = [self thumbRectForBounds: self.bounds trackRect: trackRect value: self.value].size.width;
CGRect trackArea = CGRectMake(trackRect.origin.x, 0, trackRect.size.width, self.bounds.size.height);
CGFloat value;
if (CGRectContainsPoint(trackArea, touchPoint)) {
if (touchPoint.x <= trackArea.origin.x + thumbWidth/2.0) {
value = self.minimumValue;
}
else if (touchPoint.x >= trackArea.origin.x + trackArea.size.width - thumbWidth/2.0) {
value = self.maximumValue;
}
else {
CGFloat percentage = (touchPoint.x - trackArea.origin.x - thumbWidth/2.0)/(trackArea.size.width - thumbWidth);
CGFloat delta = percentage*(self.maximumValue - self.minimumValue);
value = self.minimumValue + delta;
}
if (value != self.value) {
if (gesture.state == UIGestureRecognizerStateBegan) {
[UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveEaseInOut animations: ^{
[self setValue: value animated: YES];
} completion: ^(BOOL finished) {
[self sendActionsForControlEvents: UIControlEventValueChanged];
}];
}
else {
[self setValue: value animated: YES];
[self sendActionsForControlEvents: UIControlEventValueChanged];
}
}
}
else {
if (gesture.state == UIGestureRecognizerStateBegan) {
if (touchPoint.x <= trackArea.origin.x) {
if (self.value == self.minimumValue) return;
value = self.value - 1.5;
}
else {
if (self.value == self.maximumValue) return;
value = self.value + 1.5;
}
CGFloat duration = 0.1;
[UIView animateWithDuration: duration delay: 0 options: UIViewAnimationOptionCurveEaseInOut animations: ^{
[self setValue: value animated: YES];
} completion: ^(BOOL finished) {
[self sendActionsForControlEvents: UIControlEventValueChanged];
}];
}
}
}
To expand on the answer of Khang Azun- for swift 5 put the following in a UISlider custom class:
override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
let percent = Float(touch.location(in: self).x / bounds.size.width)
let delta = percent * (maximumValue - minimumValue)
let newValue = minimumValue + delta
self.setValue(newValue, animated: false)
super.sendActions(for: UIControl.Event.valueChanged)
return true
}
At the risk of being chastised by the iOS pure community...
Here is a solution for Xamarin iOS C# converted from David Williames Answer.
Sub class UISlider:
[Register(nameof(UISliderCustom))]
[DesignTimeVisible(true)]
public class UISliderCustom : UISlider
{
public UISliderCustom(IntPtr handle) : base(handle) { }
public UISliderCustom()
{
// Called when created from code.
Initialize();
}
public override void AwakeFromNib()
{
// Called when loaded from xib or storyboard.
Initialize();
}
void Initialize()
{
// Common initialization code here.
var longPress = new UILongPressGestureRecognizer(tapAndSlide);
longPress.MinimumPressDuration = 0;
//longPress.CancelsTouchesInView = false;
this.AddGestureRecognizer(longPress);
this.UserInteractionEnabled = true;
}
private void tapAndSlide(UILongPressGestureRecognizer gesture)
{
System.Diagnostics.Debug.WriteLine($"{nameof(UISliderCustom)} RecognizerState {gesture.State}");
// need to propagate events down the chain
// I imagine iOS does something similar
// for whatever recogniser on the thumb control
// It's not enough to set CancelsTouchesInView because
// if clicking on the track away from the thumb control
// the thumb gesture recogniser won't pick it up anyway
switch (gesture.State)
{
case UIGestureRecognizerState.Cancelled:
this.SendActionForControlEvents(UIControlEvent.TouchCancel);
break;
case UIGestureRecognizerState.Began:
this.SendActionForControlEvents(UIControlEvent.TouchDown);
break;
case UIGestureRecognizerState.Changed:
this.SendActionForControlEvents(UIControlEvent.ValueChanged);
break;
case UIGestureRecognizerState.Ended:
this.SendActionForControlEvents(UIControlEvent.TouchUpInside);
break;
case UIGestureRecognizerState.Failed:
//?
break;
case UIGestureRecognizerState.Possible:
//?
break;
}
var pt = gesture.LocationInView(this);
var thumbWidth = CurrentThumbImage.Size.Width;
var value = 0f;
if (pt.X <= thumbWidth / 2)
{
value = this.MinValue;
}
else if (pt.X >= this.Bounds.Size.Width - thumbWidth / 2)
{
value = this.MaxValue;
}
else
{
var percentage = ((pt.X - thumbWidth / 2) / (this.Bounds.Size.Width - thumbWidth));
var delta = percentage * (this.MaxValue - this.MinValue);
value = this.MinValue + (float)delta;
}
if (gesture.State == UIGestureRecognizerState.Began)
{
UIView.Animate(0.35, 0, UIViewAnimationOptions.CurveEaseInOut,
() =>
{
this.SetValue(value, true);
},
null);
}
else
{
this.SetValue(value, animated: false);
}
}
}
From Apple,
https://developer.apple.com/forums/thread/108317
Now this works fine on iOS 10 and iOS 11. You can slide as usual and thanks to the above code you can tap on slider and it slides automatically. However in iOS 12 this doesn't work. You have to force touch on it for tap to work
Here is my solution that works :
import UIKit
class CustomSlider: UISlider {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
private func setupView() {
addTapGesture()
}
private func addTapGesture() {
let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
addGestureRecognizer(tap)
}
#objc private func handleTap(_ sender: UITapGestureRecognizer) {
let location = sender.location(in: self)
let percent = minimumValue + Float(location.x / bounds.width) * maximumValue
setValue(percent, animated: true)
sendActions(for: .valueChanged)
}
}