Slider determines gravity - ios

So far I've created a rectangle that starts from the bottom and moves upward using UiDynamicAnimator. I would like the user to determine the "strength" of the negative gravity. I want the user to determine the value through a slider.
This is my code so far:
import UIKit
class ViewController: UIViewController {
var orangeSquare: UIView?
var animator: UIDynamicAnimator?
override func viewDidLoad() {
super.viewDidLoad()
func sliderChanged(sender: AnyObject) {
var sliderValue = sender.value
}
//Create animation
let dim = CGRectMake(100, 500, 200, 100)
orangeSquare = UIView(frame: dim)
orangeSquare?.backgroundColor = UIColor.orangeColor()
//Add item to the screen
self.view.addSubview(orangeSquare!)
//Initialize the animator
animator = UIDynamicAnimator(referenceView: self.view)
//Add gravity
let gravity = UIGravityBehavior(items: [orangeSquare!])
let direction = CGVectorMake(0.0, sliderValue)
gravity.gravityDirection = direction
//Collision
let boundries = UICollisionBehavior(items: [orangeSquare!])
boundries.translatesReferenceBoundsIntoBoundary = true
//Add animations
animator?.addBehavior(boundries)
animator?.addBehavior(gravity)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
I get two errors:
"Ambiguous use of ´value´" and
"Use of unresolved identifier ´sliderValue´"
How do I convert ´sliderValue´ into a float with just one decimal point?

your code is missing a few things. sliderValue is an unresolved identifier because you have only declared it within sliderChanged but are referring to it in the main body of viewDidLoad. Also, I think that your use of value is ambiguous because you have declared the parameter to the function as AnyObject, whose value could be any one of a number of things!
Your code was missing a mechanism linking a change in the value of the slider with a change in the gravity behaviour. As such, I've implemented this using an explicit target attached to the slider object. I've also thrown in a label showing the magnitude of the gravitational force. This is quite rough but I think it achieves what you were looking to do.
import UIKit
class ViewController: UIViewController {
var dynamicAnimator : UIDynamicAnimator!
var gravityBehaviour : UIGravityBehavior!
var orangeSquare : UIView!
var slider : UISlider!
var sliderLabel : UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Subviews
self.orangeSquare = {
let oS : UIView = UIView(frame: CGRect(origin: CGPoint(x: (self.view.frame.width / 2) - 100, y: 500), size: CGSize(width: 200, height: 200)))
oS.backgroundColor = UIColor.orange
return oS
}()
self.slider = UISlider(frame: CGRect(origin: CGPoint(x: 100, y: 100), size: CGSize(width: self.view.frame.width - 400, height: 50)))
self.slider.addTarget(self, action: #selector(self.sliderValueDidChange), for: UIControlEvents.allTouchEvents)
self.slider.minimumValue = -5
self.slider.maximumValue = 5
self.slider.value = 0
self.sliderLabel = UILabel(frame: CGRect(origin: CGPoint(x: self.view.frame.width - 100, y: 100), size: CGSize(width : 50, height: 50)))
self.sliderLabel.backgroundColor = UIColor.red
self.sliderLabel.textAlignment = NSTextAlignment.center
self.sliderLabel.textColor = UIColor.white
self.sliderLabel.text = String(self.slider.value)
// Assemble
self.view.addSubview(self.orangeSquare)
self.view.addSubview(self.slider)
self.view.addSubview(self.sliderLabel)
// Configure dynamic behaviours
self.dynamicAnimator = UIDynamicAnimator(referenceView: self.view)
self.gravityBehaviour = UIGravityBehavior(items: [self.orangeSquare])
self.gravityBehaviour.gravityDirection = CGVector(dx: 0, dy: 0)
// Configure boundaries
let boundaries : UICollisionBehavior = UICollisionBehavior(items: [self.orangeSquare])
boundaries.translatesReferenceBoundsIntoBoundary = true
self.dynamicAnimator.addBehavior(self.gravityBehaviour)
self.dynamicAnimator.addBehavior(boundaries)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func sliderValueDidChange() {
// When the slider value changes, update the label text and the gravity vector
self.sliderLabel.text = String((round(self.slider.value) * 10) / 10)
self.gravityBehaviour.gravityDirection = CGVector(dx: 0, dy: CGFloat(-1 * self.slider.value))
}
}
Hope that helps. All best!

import UIKit
class ViewController: UIViewController {
var dynamicAnimator : UIDynamicAnimator!
var gravityBehaviour : UIGravityBehavior!
var orangeSquare : UIView!
var slider : UISlider!
var sliderLabel : UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Subviews
self.orangeSquare = {
let oS : UIView = UIView(frame: CGRect(origin: CGPoint(x: (self.view.frame.width / 2) - 100, y: 500), size: CGSize(width: 200, height: 200)))
oS.backgroundColor = UIColor.orangeColor()
return oS
}()
self.slider = UISlider(frame: CGRect(origin: CGPoint(x: self.view.frame.width - 100, y: 100), size: CGSize(width: self.view.frame.width - 300, height: 150)))
self.slider.addTarget(self, action: #selector(self.sliderValueDidChange), forControlEvents: UIControlEvents.AllTouchEvents)
self.slider.minimumValue = -10
self.slider.maximumValue = 10
self.slider.value = 0
self.sliderLabel = UILabel(frame: CGRect(origin: CGPoint(x: self.view.frame.width - 100, y: 200), size: CGSize(width : 50, height: 50)))
self.sliderLabel.backgroundColor = UIColor.redColor()
self.sliderLabel.textAlignment = NSTextAlignment.Center
self.sliderLabel.textColor = UIColor.whiteColor()
self.sliderLabel.text = String(self.slider.value)
// Assemble
self.view.addSubview(self.orangeSquare)
self.view.addSubview(self.slider)
self.view.addSubview(self.sliderLabel)
// Configure dynamic behaviours
self.dynamicAnimator = UIDynamicAnimator(referenceView: self.view)
self.gravityBehaviour = UIGravityBehavior(items: [self.orangeSquare])
self.gravityBehaviour.gravityDirection = CGVector(dx: 0.0, dy: 0.0)
// Configure boundaries
let boundaries : UICollisionBehavior = UICollisionBehavior(items: [self.orangeSquare])
boundaries.translatesReferenceBoundsIntoBoundary = true
self.dynamicAnimator.addBehavior(self.gravityBehaviour)
self.dynamicAnimator.addBehavior(boundaries)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func sliderValueDidChange() {
// When the slider value changes, update the label text and the gravity vector
self.sliderLabel.text = String((round(self.slider.value) * 10) / 10)
self.gravityBehaviour.gravityDirection = CGVector(dx: 0, dy: CGFloat(-1 * self.slider.value))
}
}

Related

Programmatically creating Label that shows Slider value on each scene on ScrollView

im kinda new to the programming world specifically on swift.
Ive started to practice a bit and im currently working on a demo app just to explore..
So right now what the app suppose to do is to show have a scroll view, and each screen shows a different "animal" or any other subject by an Image, a Label and an Icon, on the side theres a slider with 1-5 values which suppose to show how much you "love" that subject on a scale of 1 to 5.
everything works except I cant seem to add a label to each of the screens above the slider to show its current value.
with the current code it shows every screen with its appropriate image/label/icon, shows the right Page on the page indicator, and shows a working Slider,
only on the last frame the Slider have a Label that is connected to its value.
cant seem to figure it out
hopefully its clear enough, thanks alot.
(P.S Im fully aware that i might be doing this thing completely wrong in the first place, enlighten me its welcome)
class ViewController: UIViewController, UIScrollViewDelegate {
public var sliderLbl = UILabel()
#IBOutlet var mainScrollView: UIScrollView!
#IBOutlet var secondScrollView: UIScrollView!
var imageArray = [UIImage]()
var iconImg = [UIImage]()
var pageControl : UIPageControl = UIPageControl(frame: CGRect(x: 160, y: 420, width: 50, height: 100))
var subjects:[String] = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
mainScrollView.delegate = self
mainScrollView.frame = view.frame
imageArray = [pic1.png, pic2.png, pic3.png, pic4.png, pic5.png]
subjects = ["Dog", "Cat", "Mouse", "Cow", "Snake"]
iconImg = [icon1.png, icon2.png, icon3.png, icon4.png]
for i in 0..<imageArray.count{
let labelView = UILabel()
let imageView = UIImageView()
let subjIcon = UIImageView()
let oneSlider = UISlider()
let sliderLabel = sliderLbl
sliderLabel.textColor = UIColor.black
oneSlider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))
oneSlider.minimumValue = 1
oneSlider.maximumValue = 5
oneSlider.isUserInteractionEnabled = true
oneSlider.value = 1
oneSlider.tintColor = UIColor.darkGray
oneSlider.isContinuous = true
sliderLabel.text = "1"
labelView.text = subjects[i]
labelView.textColor = UIColor.darkGray
labelView.textAlignment = .center
imageView.alpha = 0.85
imageView.image = imageArray[i]
imageView.contentMode = .center
subjIcon.image = iconImg[i]
subjIcon.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xPosition, y: -50, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height)
labelView.frame = CGRect(x: xPosition, y: -250, width: self.mainScrollView.frame.width, height: self.mainScrollView.frame.height)
iconImg.frame = CGRect(x: xPosition, y: 500, width: self.mainScrollView.frame.width, height: 150)
oneSlider.frame = CGRect(x: xPosition, y: 250, width: 50, height: 130)
sliderLabel.frame = CGRect(x: xPosition+20, y: 180, width: self.mainScrollView.frame.width, height: 80)
mainScrollView.contentSize.width = mainScrollView.frame.width * CGFloat(i + 1)
// Add subViews
mainScrollView.addSubview(subjIcon)
mainScrollView.addSubview(imageView)
mainScrollView.addSubview(labelView)
mainScrollView.bringSubview(toFront: subjIcon)
oneSlider.addTarget(self, action: #selector(sliderSlid(_:)) ,for: UIControlEvents.valueChanged)
mainScrollView.addSubview(sliderLabel)
mainScrollView.addSubview(oneSlider)
func configurePageControl() {
self.pageControl.numberOfPages = imageArray.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.red
self.pageControl.pageIndicatorTintColor = UIColor.lightGray
self.pageControl.currentPageIndicatorTintColor = UIColor.green
self.view.addSubview(pageControl)
}
configurePageControl()
}
}
func sliderSlid(_ sender: UISlider) {
sliderLbl.text = String(Int(roundf(sender.value)))
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = round(mainScrollView.contentOffset.x / mainScrollView.frame.size.width)
pageControl.currentPage = Int(pageNumber)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

Swift UIScrollView snap to subview width without pagingEnabled

How can i implement UIScrollView when swiping snap to its subviews width. I need it to behave like pagingEnabled but i cant enable paging because i need my entire view can be swipe to scroll. if i do pagingEnable its impossible because scrollview bounds will be change to subviews width.
is there any possible way to do this.
please check the image for more details
import UIKit
class ViewController: UIViewController{
var navigationScroller: UIScrollView!
var contentScroller: UIScrollView!
var navContainer: UIView!
var contentContainer: UIView!
var selfWidth:CGFloat?
var navigationLabels = ["EVENTS", "MEMBERS", "SECTORS", "ORGANIZATIONS", "SEARCH", "EVENTS", "MEMBERS"]
private var buttonsTextFontAndSize: UIFont = UIFont(name: "HelveticaNeue-Light", size: 14)!
override func viewDidLoad() {
super.viewDidLoad()
selfWidth = self.view.frame.width
let frameWidth = self.view.frame.width
let frameHeight = self.view.frame.height
//let navscrollPosition = CGFloat( (frameWidth/2) - (75.0/2) )
navContainer = UIView(frame: CGRectMake(0.0, 75.0, frameWidth, 40.0))
navContainer.backgroundColor = UIColor(red:0, green:0.302, blue:0.522, alpha:1)
navigationScroller = UIScrollView(frame: CGRectMake(0.0, 0.0, frameWidth, 40.0))
navigationScroller.backgroundColor = UIColor.clearColor()
navigationScroller.pagingEnabled = false
navigationScroller.showsHorizontalScrollIndicator = false
navigationScroller.showsVerticalScrollIndicator = false
navigationScroller.clipsToBounds = false
navigationScroller.contentInset = UIEdgeInsetsZero
//navigationScroller.userInteractionEnabled = false
//navigationScroller.
addNavigationLabels(navigationScroller)
self.view.addSubview(navContainer)
navContainer.addSubview(navigationScroller)
navigationScroller.contentSize = CGSize(width: 150.0 * CGFloat(navigationLabels.count),height: 40.0)
navigationScroller.contentOffset = CGPoint(x: 170.0, y:0.0)
contentContainer = UIView(frame: CGRectMake(0.0, 115.0, frameWidth, frameHeight-115.0))
contentContainer.backgroundColor = UIColor.clearColor()
contentScroller = UIScrollView(frame: CGRectMake(0.0, 0.0, frameWidth, frameHeight-115.0))
contentScroller.backgroundColor = UIColor.clearColor()
contentScroller.pagingEnabled = true
contentScroller.showsHorizontalScrollIndicator = false
contentScroller.showsVerticalScrollIndicator = false
contentScroller.clipsToBounds = true
contentScroller.contentInset = UIEdgeInsetsZero
//contentScroller.addSubview(navContainer)
addContents(contentScroller)
self.view.addSubview(contentContainer)
contentContainer.addSubview(contentScroller)
contentScroller.contentSize = CGSize(width: frameWidth * CGFloat(navigationLabels.count),
height: frameHeight-115.0)
//contentScroller.delegate = self
navigationScroller.delegate = self
}
//MARK: -View Appeared function
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// MARK: -Adding navigation labels fron navigation labels array
private func addNavigationLabels(navScrollView:UIScrollView){
var buttonsXPosition: CGFloat = 0
var buttonNumber = 0
for navLabel in navigationLabels {
var navButton: UIButton!
let red = CGFloat(buttonNumber) - 0.9
let frameWidth = self.view.frame.width
navButton = UIButton(frame: CGRectMake(buttonsXPosition, 0, frameWidth/3, 40.0))
navButton.titleLabel!.font = buttonsTextFontAndSize
navButton.contentHorizontalAlignment = .Center
navButton.backgroundColor = UIColor(red:red , green:0.114, blue:0.286, alpha:1)
navButton.setTitle(navLabel, forState: UIControlState.Normal)
navButton.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)
navScrollView.addSubview(navButton)
buttonsXPosition = frameWidth/3 + buttonsXPosition
buttonNumber++
}
}
func buttonAction(sender:UIButton!){
print("pressed")
}
// MARK: -Adding navigation labels fron navigation labels array
private func addContents(contentScroller:UIScrollView){
var buttonsXPosition: CGFloat = 0
var buttonNumber = 0
let frameWidth = self.view.frame.width
let frameHeight = self.view.frame.height
for navLabel in navigationLabels {
var navButton: UIButton!
navButton = UIButton(frame: CGRectMake(buttonsXPosition, 40.0, frameWidth, frameHeight-155))
navButton.titleLabel!.font = buttonsTextFontAndSize
navButton.contentHorizontalAlignment = .Center
navButton.backgroundColor = UIColor.darkGrayColor()
navButton.setTitle(navLabel, forState: UIControlState.Normal)
contentScroller.addSubview(navButton)
buttonsXPosition = frameWidth + buttonsXPosition
buttonNumber++
}
}
}
app view
You can implement UIScrollViewDelegate's method scrollViewWillEndDragging:withVelocity:targetContentOffset: and modify the offset at it will finish decelerating to match the width that you wish.
Something like this:
class ScrollSample: NSObject, UIScrollViewDelegate {
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let targetOffset = targetContentOffset.memory.x
// Round the offset to be a multiple of scrollview width
let roundedOffset = round(targetOffset / scrollView.frame.width) * scrollView.frame.width
targetContentOffset.memory = CGPoint(x: roundedOffset, y: 0)
}
}

Why doesn't my snow fall to the ground?

I am trying to make a application (in swift) where snow falls in the background. The only problem is I have added the gravity animation, however the snow just stays where it is.
Here is my code:
ViewController.swift
import UIKit
#IBDesignable
class ViewController: UIViewController {
#IBInspectable var BgColor:UIColor = UIColor.whiteColor()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = BgColor
/*listSubviewsOfView(self.view)*/ /*Not needed to answer this*/
var snow = Snow(frame: CGRect(x: 0, y: 0, width: 5, height: 5))
snow.opaque = false
self.view.addSubview(snow)
let animator = UIDynamicAnimator(referenceView: self.view)
let gravity = UIGravityBehavior(items: [snow])
let direction = CGVectorMake(0.0, 1.0)
gravity.gravityDirection = direction
animator.addBehavior(gravity)
/*
var snow = Snow(frame: CGRect(x: 0, y: 0, width: 5, height: 5))
snow.opaque = false
snow.viewHeight = UIScreen.mainScreen().bounds.height
snow.addSubview(snow)
let animator = UIDynamicAnimator(referenceView: view)
let gravity = UIGravityBehavior(items: [snow])
animator.addBehavior(gravity)
*/
}
/*Not needed to solve this*/
/*
func listSubviewsOfView(views: UIView) {
var index = 0
let randomNumbers = [Int](1...24).shuffle()
for view in views.subviews
{
if let _ = view.restorationIdentifier
{
view.setValue(String(Int(randomNumbers[index])), forKey: "updateText")
index++
}
if index == randomNumbers.count {
break
}
}
}
*/
}
Snow.swift:
import Foundation
import UIKit
#IBDesignable
class Snow:UIView
{
var viewHeight = CGFloat(0)
/*
required init(coder aDecoder: NSCoder) {
//Initilse UIView
super.init(coder: aDecoder)!
}
*/
override func drawRect(rect: CGRect) {
let path = UIBezierPath(ovalInRect: rect)
UIColor.whiteColor().setFill()
path.fill()
}
}
The question is, why does my snow stay on top of the screen at (0,0) and not fall down even though I have told it to have the gravity affect?
Make animator and gravity properties of your view controller.
import UIKit
#IBDesignable
class ViewController: UIViewController {
#IBInspectable var BgColor:UIColor = UIColor.whiteColor()
var animator: UIDynamicAnimator? = nil;
let gravity = UIGravityBehavior()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.blackColor()
let snow = Snow(frame: CGRect(x: 0, y: 0, width: 5, height: 5))
snow.opaque = false
self.view.addSubview(snow)
animator = UIDynamicAnimator(referenceView:self.view);
animator?.addBehavior(gravity)
gravity.addItem(snow)
let direction = CGVectorMake(0.0, 1.0)
gravity.gravityDirection = direction
}
}

How to implement range slider in Swift

I'm trying to implement Range Slider and I used custom control called NMRangeSlider.
But when I use it, the slider doesn't appear at all. Could it be also because it's all written in Objective-C?
This is how I've currently implemented it:
var rangeSlider = NMRangeSlider(frame: CGRectMake(16, 6, 275, 34))
rangeSlider.lowerValue = 0.54
rangeSlider.upperValue = 0.94
self.view.addSubview(rangeSlider)
To create a custom Range Slider I found a good solution here: range finder tutorial iOS 8 but I needed this in swift 3 for my project. I updated this for Swift 3 iOS 10 here:
in your main view controller add this to viewDidLayOut to show a range slider.
override func viewDidLayoutSubviews() {
let margin: CGFloat = 20.0
let width = view.bounds.width - 2.0 * margin
rangeSlider.frame = CGRect(x: margin, y: margin + topLayoutGuide.length + 170, width: width, height: 31.0)
}
create the helper function to print slider output below viewDidLayoutSubviews()
func rangeSliderValueChanged() { //rangeSlider: RangeSlider
print("Range slider value changed: \(rangeSlider.lowerValue) \(rangeSlider.upperValue) ")//(\(rangeSlider.lowerValue) \(rangeSlider.upperValue))
}
Create the file RangeSlider.swift and add this to it:
import UIKit
import QuartzCore
class RangeSlider: UIControl {
var minimumValue = 0.0
var maximumValue = 1.0
var lowerValue = 0.2
var upperValue = 0.8
let trackLayer = RangeSliderTrackLayer()//= CALayer() defined in RangeSliderTrackLayer.swift
let lowerThumbLayer = RangeSliderThumbLayer()//CALayer()
let upperThumbLayer = RangeSliderThumbLayer()//CALayer()
var previousLocation = CGPoint()
var trackTintColor = UIColor(white: 0.9, alpha: 1.0)
var trackHighlightTintColor = UIColor(red: 0.0, green: 0.45, blue: 0.94, alpha: 1.0)
var thumbTintColor = UIColor.white
var curvaceousness : CGFloat = 1.0
var thumbWidth: CGFloat {
return CGFloat(bounds.height)
}
override init(frame: CGRect) {
super.init(frame: frame)
trackLayer.rangeSlider = self
trackLayer.contentsScale = UIScreen.main.scale
layer.addSublayer(trackLayer)
lowerThumbLayer.rangeSlider = self
lowerThumbLayer.contentsScale = UIScreen.main.scale
layer.addSublayer(lowerThumbLayer)
upperThumbLayer.rangeSlider = self
upperThumbLayer.contentsScale = UIScreen.main.scale
layer.addSublayer(upperThumbLayer)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
func updateLayerFrames() {
trackLayer.frame = bounds.insetBy(dx: 0.0, dy: bounds.height / 3)
trackLayer.setNeedsDisplay()
let lowerThumbCenter = CGFloat(positionForValue(value: lowerValue))
lowerThumbLayer.frame = CGRect(x: lowerThumbCenter - thumbWidth / 2.0, y: 0.0,
width: thumbWidth, height: thumbWidth)
lowerThumbLayer.setNeedsDisplay()
let upperThumbCenter = CGFloat(positionForValue(value: upperValue))
upperThumbLayer.frame = CGRect(x: upperThumbCenter - thumbWidth / 2.0, y: 0.0,
width: thumbWidth, height: thumbWidth)
upperThumbLayer.setNeedsDisplay()
}
func positionForValue(value: Double) -> Double {
return Double(bounds.width - thumbWidth) * (value - minimumValue) /
(maximumValue - minimumValue) + Double(thumbWidth / 2.0)
}
override var frame: CGRect {
didSet {
updateLayerFrames()
}
}
override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
previousLocation = touch.location(in: self)
// Hit test the thumb layers
if lowerThumbLayer.frame.contains(previousLocation) {
lowerThumbLayer.highlighted = true
} else if upperThumbLayer.frame.contains(previousLocation) {
upperThumbLayer.highlighted = true
}
return lowerThumbLayer.highlighted || upperThumbLayer.highlighted
}
func boundValue(value: Double, toLowerValue lowerValue: Double, upperValue: Double) -> Double {
return min(max(value, lowerValue), upperValue)
}
override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
let location = touch.location(in: self)
// 1. Determine by how much the user has dragged
let deltaLocation = Double(location.x - previousLocation.x)
let deltaValue = (maximumValue - minimumValue) * deltaLocation / Double(bounds.width - thumbWidth)
previousLocation = location
// 2. Update the values
if lowerThumbLayer.highlighted {
lowerValue += deltaValue
lowerValue = boundValue(value: lowerValue, toLowerValue: minimumValue, upperValue: upperValue)
} else if upperThumbLayer.highlighted {
upperValue += deltaValue
upperValue = boundValue(value: upperValue, toLowerValue: lowerValue, upperValue: maximumValue)
}
// 3. Update the UI
CATransaction.begin()
CATransaction.setDisableActions(true)
updateLayerFrames()
CATransaction.commit()
sendActions(for: .valueChanged)
return true
}
override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
lowerThumbLayer.highlighted = false
upperThumbLayer.highlighted = false
}
}
Next add the thumb layer subclass file RangeSliderThumbLayer.swift and add this to it:
import UIKit
class RangeSliderThumbLayer: CALayer {
var highlighted = false
weak var rangeSlider: RangeSlider?
override func draw(in ctx: CGContext) {
if let slider = rangeSlider {
let thumbFrame = bounds.insetBy(dx: 2.0, dy: 2.0)
let cornerRadius = thumbFrame.height * slider.curvaceousness / 2.0
let thumbPath = UIBezierPath(roundedRect: thumbFrame, cornerRadius: cornerRadius)
// Fill - with a subtle shadow
let shadowColor = UIColor.gray
ctx.setShadow(offset: CGSize(width: 0.0, height: 1.0), blur: 1.0, color: shadowColor.cgColor)
ctx.setFillColor(slider.thumbTintColor.cgColor)
ctx.addPath(thumbPath.cgPath)
ctx.fillPath()
// Outline
ctx.setStrokeColor(shadowColor.cgColor)
ctx.setLineWidth(0.5)
ctx.addPath(thumbPath.cgPath)
ctx.strokePath()
if highlighted {
ctx.setFillColor(UIColor(white: 0.0, alpha: 0.1).cgColor)
ctx.addPath(thumbPath.cgPath)
ctx.fillPath()
}
}
}
}
Finally add the track layer subclass file RangeSliderTrackLayer.swift and add the following to it:
import Foundation
import UIKit
import QuartzCore
class RangeSliderTrackLayer: CALayer {
weak var rangeSlider: RangeSlider?
override func draw(in ctx: CGContext) {
if let slider = rangeSlider {
// Clip
let cornerRadius = bounds.height * slider.curvaceousness / 2.0
let path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
ctx.addPath(path.cgPath)
// Fill the track
ctx.setFillColor(slider.trackTintColor.cgColor)
ctx.addPath(path.cgPath)
ctx.fillPath()
// Fill the highlighted range
ctx.setFillColor(slider.trackHighlightTintColor.cgColor)
let lowerValuePosition = CGFloat(slider.positionForValue(value: slider.lowerValue))
let upperValuePosition = CGFloat(slider.positionForValue(value: slider.upperValue))
let rect = CGRect(x: lowerValuePosition, y: 0.0, width: upperValuePosition - lowerValuePosition, height: bounds.height)
ctx.fill(rect)
}
}
}
Build Run and Get:
UPDATE:
It did not show to me, because it was all white. So the solution, without using any other framework and sticking with this one - you need to set all the views for all the components and then it will display well:
I have tried to import it in Swift as I used it before in Objective-C code, but without any luck. If I set everything properly and add it either in viewDidLoad() or viewDidAppear(), nothing gets displayed. One thing is worth mentioning, though - when I enter View Debug Hierarchy, the slider actually is there on the canvas:
But it's simply not rendered with all the colors that I did set before adding in it to the view. For the record - this is the code I used:
override func viewDidAppear(animated: Bool) {
var rangeSlider = NMRangeSlider(frame: CGRectMake(50, 50, 275, 34))
rangeSlider.lowerValue = 0.54
rangeSlider.upperValue = 0.94
let range = 10.0
let oneStep = 1.0 / range
let minRange: Float = 0.05
rangeSlider.minimumRange = minRange
let bgImage = UIView(frame: rangeSlider.frame)
bgImage.backgroundColor = .greenColor()
rangeSlider.trackImage = bgImage.pb_takeSnapshot()
let trackView = UIView(frame: CGRectMake(0, 0, rangeSlider.frame.size.width, 29))
trackView.backgroundColor = .whiteColor()
trackView.opaque = false
trackView.alpha = 0.3
rangeSlider.trackImage = UIImage(named: "")
let lowerThumb = UIView(frame: CGRectMake(0, 0, 8, 29))
lowerThumb.backgroundColor = .whiteColor()
let lowerThumbHigh = UIView(frame: CGRectMake(0, 0, 8, 29))
lowerThumbHigh.backgroundColor = UIColor.blueColor()
rangeSlider.lowerHandleImageNormal = lowerThumb.pb_takeSnapshot()
rangeSlider.lowerHandleImageHighlighted = lowerThumbHigh.pb_takeSnapshot()
rangeSlider.upperHandleImageNormal = lowerThumb.pb_takeSnapshot()
rangeSlider.upperHandleImageHighlighted = lowerThumbHigh.pb_takeSnapshot()
self.view.addSubview(rangeSlider)
self.view.backgroundColor = .lightGrayColor()
}
Using the method for capturing the UIView as UIImage mentioned in this question:
extension UIView {
func pb_takeSnapshot() -> UIImage {
UIGraphicsBeginImageContextWithOptions(bounds.size, false, UIScreen.mainScreen().scale)
drawViewHierarchyInRect(self.bounds, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
Other solution:
You can also try sgwilly/RangeSlider instead, it's written in Swift and therefore you won't even need a Bridging Header.
try this code :
override func viewDidLayoutSubviews() {
let margin: CGFloat = 20.0
let width = view.bounds.width - 2.0 * margin
rangeSlider.frame = CGRect(x: margin, y: margin + topLayoutGuide.length,
width: width, height: 31.0)
}
I implemented the range slider using :
https://github.com/Zengzhihui/RangeSlider
In the GZRangeSlider class, there is a method called :
private func setLabelText()
In that method, just put :
leftTextLayer.frame = CGRectMake(leftHandleLayer.frame.minX - 0.5 * (kTextWidth - leftHandleLayer.frame.width), leftHandleLayer.frame.minY - kTextHeight, kTextWidth, kTextHeight)
rightTextLayer.frame = CGRectMake(rightHandleLayer.frame.minX - 0.5 * (kTextWidth - leftHandleLayer.frame.width), leftTextLayer.frame.minY, kTextWidth, kTextHeight)
to animate the lower and upper labels..
This one is working well for me and its in swift.. just try it..

UIView changing its position in swift

How do I make a UIView slide up with a touch of a button from its original position and them bring it back down with a touch of a button? Using Swift and Xcode 6.
I have currently tried this:
#IBOutlet weak var DynView: UIView!
#IBAction func btnUp(sender: AnyObject) {
}
You have to implement an animation changing the DynView position on click. Here's an example:
#IBAction func btnUp(sender: AnyObject) {
let xPosition = DynView.frame.origin.x
let yPosition = DynView.frame.origin.y - 20 // Slide Up - 20px
let width = DynView.frame.size.width
let height = DynView.frame.size.height
UIView.animateWithDuration(1.0, animations: {
dynView.frame = CGRect(x: xPosition, y: yPosition, width: width, height: height)
})
}
Hi create this extends if you want. For Swift
Create File Extends.Swift and add this code
/**
Extension UIView
by DaRk-_-D0G
*/
extension UIView {
/**
Set x Position
:param: x CGFloat
by DaRk-_-D0G
*/
func setX(#x:CGFloat) {
var frame:CGRect = self.frame
frame.origin.x = x
self.frame = frame
}
/**
Set y Position
:param: y CGFloat
by DaRk-_-D0G
*/
func setY(#y:CGFloat) {
var frame:CGRect = self.frame
frame.origin.y = y
self.frame = frame
}
/**
Set Width
:param: width CGFloat
by DaRk-_-D0G
*/
func setWidth(#width:CGFloat) {
var frame:CGRect = self.frame
frame.size.width = width
self.frame = frame
}
/**
Set Height
:param: height CGFloat
by DaRk-_-D0G
*/
func setHeight(#height:CGFloat) {
var frame:CGRect = self.frame
frame.size.height = height
self.frame = frame
}
}
For Use (inherits Of UIView)
inheritsOfUIView.setX(x: 100)
button.setX(x: 100)
view.setY(y: 100)
I kinda combined the two most voted answers into one and updated to Swift 3. So basically created an extension that animates a view moving to a different position:
extension UIView {
func slideX(x:CGFloat) {
let yPosition = self.frame.origin.y
let height = self.frame.height
let width = self.frame.width
UIView.animate(withDuration: 1.0, animations: {
self.frame = CGRect(x: x, y: yPosition, width: width, height: height)
})
}
}
// MARK: - Properties
var bottomViewHeight: CGFloat = 200
var isViewHide = false
private let bottomView: UIView = {
let view = UIView()
view.backgroundColor = .red
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private let showHideButton: UIButton = {
let button = UIButton()
button.setTitle("Show / Hide", for: .normal)
button.setTitleColor(.black, for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
button.addTarget(self, action: #selector(showHideButtonTapped(_:)), for: .touchUpInside)
return button
}()
// MARK: - Lifecycle
override func loadView() {
super.loadView()
view.addSubview(bottomView)
NSLayoutConstraint.activate([
bottomView.heightAnchor.constraint(equalToConstant: bottomViewHeight),
bottomView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
bottomView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
bottomView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])
view.addSubview(showHideButton)
NSLayoutConstraint.activate([
showHideButton.widthAnchor.constraint(equalToConstant: 200),
showHideButton.heightAnchor.constraint(equalToConstant: 50),
showHideButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
showHideButton.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor)
])
}
override func viewDidLoad() {
super.viewDidLoad()
showHideView(isShow: isViewHide)
}
// MARK: - Selectors
#objc func showHideButtonTapped(_ sender: UIButton) {
print("👆 HIDE / SHOW BUTTON")
showHideView(isShow: isViewHide)
}
// MARK: - Functions
private func showHideView(isShow: Bool) {
if isShow {
UIView.animate(withDuration: 0.4) {
self.bottomView.transform = CGAffineTransform(translationX: 0, y: self.bottomViewHeight)
}
} else {
UIView.animate(withDuration: 0.4) {
self.bottomView.transform = CGAffineTransform(translationX: 0, y: 0)
}
}
isViewHide = !isViewHide
}

Resources