I'm trying to create a UISlider that will have the ability to drag upwards, and to the right. Think of the slider looking like a capital L with the slider thumb-button positioned at the bend after each slide action is performed.
I've looked and found this: UICircularSlider
But it seems too much for what I need done. I'm not sure UISlider is the way to go, but it's what comes to mind for easiest functionality.
Is there a way to do this?
Going with 3rd party libraries is definitely one way to go, but the normal way using all the normal objective C components would be having 2 UISliders, rotate one of the 90 degrees using CGAffineTransformRotate. Then you start the second one as the other one ends and hide the ThumbImage on the first one so it kind of gives you the feeling that they are continues. Once again, this way definitely is not a tidy way to do it, just no headaches of working with new libraries.
P.S: You can make your own subclass of UISlider and implement this in that class, so you can reuse it if you needed it again.
Here's my suggestion:
Make 2 sliders, rotate one 90 degrees and hide the thumb.
Add a gesture recognizer to the horizontal (active) slider's thumb image and set the direction to UISwipeGestureRecognizerDirectionUp.
At an up swipe event, show the vertical slider's thumb and hide the horizontal slider's thumb.
On the downside, this method doesn't report the vertical location, so you might wanna use UITouch, call the locationInView method, and update the thumb frame accordingly. Beats the purpose of using a slider, but achieves what you're trying to achieve.
U can make 2 view to make it.:
bottomview that detects rotate gestures
topview with image of circular slider in that
Example of control : https://github.com/nathanday/ndrotator
Related
Wondering if the above can be created using UISlider? If not, what other ways can this be accomplished?
You can set components of a UISlider, such as the currentThumbImage ( see: "Appearance of Sliders"1).
However, it is almost certainly easier to just re-implement a slider for this much customization. Simply use background UIImageView with the scale image, and then add a separate UIView (or UIImageView) for the arrow. Finally, attach a UIPanGestureRecognizer to the arrow view to allow a user translate the view vertically.
You can change a lot in the appearance of a UISlider like setting the thumb to a red arrow. You can also replace the background image with the inches ruler and with different rulers for the different device types and display sizes.
The one thing that I don't see is that you turn the slider to work vertically. I know them only working left to right.
If I'm right, your only chance is to have a ruler as background image and a view that contains the arrow and a label with the actual value. That whole view can be pawned and tapped using Gesture Listener.
In my app, I want to add scrolling lyrics, like UIPickerView rolling lyrics, according to the song. I tried Cloud Label In Code4App (http://code4app.net/ios/Tab-cloud/5235d23f6803fa2f7b000000) but I'm not understanding that code since I'm new to Obj-C!
Can anyone please help me or suggest tutorials?
I don't think you're going to be able to use a UIPickerView for what you're describing since I don't think there's any way to do a slow controlled scroll on a UIPickerView, especially while changing the text characteristics continuously.
I think you might be better off using a UITableView, animating the content offset to scroll, and using attributed text to change the highlights.
I don't know how to get that circular UIPickerView "look" you're trying to achieve though. That might be more complicated...
I agree with Lyndsey that a picker view is not the right tool for what you are trying to do.
If you are a beginner at Objective C this is probably over your head. Way, way over your head even.
You would need to use Core Animation on the layers of a set of text views, and rotate those views around the Y axis, with the center of rotation being behind the view. You'd need to manipulate the transformation matrixes that you apply to each layer to get a perspective effect (applying a value of around -1/500.0 to the m34 entry in the CATransform3D)
For now I would suggest giving up on 3D rolling perspective, and just using UIView animation (look at the method animateWithDuration:animations: and it's cousins. That's nice and easy to use.
I'm working on a control that looks like a wheel and is used for fast or precise scrolling of content. Here's an example from coach's eye app:
My first take looks like this:
Currently the vertical lines are implemented as set of UIViews. Sure enough these vertical line views could be easily replaced with image views to customise the look.
Each time user pans:
I modify frame.origin.x on all of the vertical line views
If some of the views go off screen - I remove them
If there's a gap on the left or on the right I create new views to fit the place
When user finishes the pan gesture, I start repeat NSTimer (with like 0.05 of a second) to animate decelerating of wheel movement. On each loop of timer in a nutshell:
Calculate distance to move lines and move them
Calculate velocity deceleration amount and adjust the velocity
A couple of questions:
Are there any iOS frameworks (e.g. CoreGraphics, CoreAnimation, UIKitDynamics) that are suited better for implementing these tasks than UIKit APIs I have used?
Can you suggest a better / more correct way to implement "infinite scrolling wheel" control ?
Can you suggest a better way to implement deceleration after user finishes panning the wheel?
Thanks
I had made my "infinite scrolling wheel" control by customizing SSRollingButtonScrollView. I think you should look at it once. I hope it will help you.
Apple already have a nice algorithm implemented for acceleration and deceleration - in UIScrollView. And you can use that, behind the scenes, to control other views / interaction. This is enabled by connecting the pan gesture from the scroll view to another view and acting as the delegate of the scroll view.
Check out the Enhancing User Experience with Scroll Views WWDC video for guidance.
I want to implement a slider-like component like the one at the bottom of this screenshot taken from Roambi. For those who haven't used Roambi, this slider is double ranged, i.e. you can define the ranges from the blue bars at the two ends. And then to indicate which data region you're interested, you move the grey area in between these blue bars to the left/right.
To implement this, two things come to my mind:
The left and right blue bars are UIViews. I handle touch events on these views to define the range. The middle area in between these two bars is also a UIView. I handle touch events on this view to move it left/right in order to define the data region.
I can implement a double ranged UISlider in order to get the functionality of the blue bars. (I already learned how to do this.) But then I don't know how to move the body of the slider to define the data range. Is this possible?
Also, could there be another way of implementing this?
You might find these projets interesting:
iosrangeslider
Wicked iOS Range Slider: Part Two
CMRangeSlider
A custom iOS control that gives you a UISlider like UI for selecting a range of values.
https://github.com/muZZkat/NMRangeSlider
I would like to know how to implement the slider similar to the one in the Ipad default calendar application. I have attached the image below
If you see at the bottom, it acts like a slider which allows us to select any month either by just pressing it or sliding to it.
It would be great if anyone could tell me the name of that control. I tried using UISlider but I see that it allows only 3 options:
setThumbImage
setMinimumTrackImage
setMaximumTrackImage
If that control is indeed a slider control, could anyone tell me how I would be able to insert multiple images/ text
Thanks
It may be more complex than you'd like, but you could make your own:
Make a background that has UILabels for the dates
Make a selection box
In the UIViewController you could put something such as:
touchesMoved -
Make the selection box's x value equal to the touch
touchesEnded -
Make the selection box's x value equal to the touch's last x value
The touches moved would allow dragging of the selection box, and the touchesEnded would allow tap selection.
Then you would simply animate the selection box to the x value.
(This is an extremely simplified version, but you could do this pretty easily.)
This can be achieved by using UIScrollView. Add UIButtons programmatically having background images and text as well on them as per your requirement.
You can refer tutorial1 tutorial2 in which on screen only 1 page(Image) is displayed. You need to do some calculation for applying same logic to fit your requirement. i.e. Your scrollview will be smaller(in height) and bigger(in width) as displayed in image, you will be adding UIButtons in spite of images and most important at a time displaying more than 1 item but it won't be difficult. The Main part is only programmatically scrolling.