I'm currently drawing some mockups of my future iPhone app.
One of the app's functionalities is to display a bar graph showing the evolution of a value over time. Users can perform few gestures on the graph :
swipe/drag to move through time;
pinch to zoom in or zoom out (and therefore display a longer or shorter period of time);
double tap to add a cursor to the graph (i.e. a vertical line with a label on top).
What I'm afraid of is users not noticing these gestures. Of course, I would provide buttons for doing the same tasks, but if users ended up only using those, the interface's usability would not be very great...
Therefore, I am wondering if there is any way to show some visual clues to indicate the presence of gestures on the interface. Do you know any app that does something similar?
I think if you animate mentioned graph behavior it would be a great clue for user to perform this actions by fingers. For example if he(she) choose another date you should move you graph through time smoothly with easyInOut animation. Or if user changed scale you should gradually zoom from scale 1 to scale 2.
Related
If you go to Apple Photos and do pinch zoom you can zoom in/out to change the number of columns in the grid. I assume it uses UICollectionView, however, I have no idea how it obtains this animation.
It's not difficult to change the number of columns in UICollectionView programmatically, I don't quite get the animation.
Any ideas?
It looks like the gesture triggers a new layout. There's a whole class dedicated to switching between layouts gracefully: UICollectionViewTransitionLayout. The docs say in part:
You can use UICollectionViewTransitionLayout as-is or subclass it to
provide specialized behavior for your app. A common use for transition
layouts is to create interactive transitions, such as those that are
driven by gesture recognizers or touch events.
Unlike a regular time-based animation, the transition between layouts is driven by a transitionProgress property that you update, so the transition can easily track a gesture. You can see exactly that kind of thing happening in Photos: if you alternate between pinching and zooming, the transition tracks that by going back and forth.
It's possible, perhaps likely, that Photos uses a subclass of UICollectionViewTransitionLayout in order to provide a more polished user experience, but if you're looking to emulate what Photos does, I think this class is the right way to start.
How can I know when the user is zooming in or zooming out? I want to start an animation if the user zooms after some level. Is it possible to know this when the event zoomstart is triggered?
How can I know when the user is zooming in or zooming out?
At every zoom level, calculate how much map.getZoom() has changed.
Is it possible to know this when the event zoomstart is triggered?
No.
Consider the following scenario: A user, using a touchscreen (phone/tablet).
The user puts two fingers down on the screen. Half a frame after, one of the fingers moves a couple of pixels towards the center, triggering a pinch-zoom with a tiny change in the zoom level.
Your code catches the zoomstart and zoom events that happen inmediately after. "I know!" - your code says - "The user is zooming out!".
And then the user starts moving their fingers wider and wider, zooming in. And your code gets confused.
But the user changes their mind, and then starts zooming out for whatever reason. And then in again. And then out again. And then they lift the fingers and the zoom snaps to a zoom level.
This is why you can not know what the final zoom level is going to be when you listen to a zoomstart or zoom event in Leaflet.
I got an app that allows users to add content to a canvas. I would like to be able to offer the user an ability to move, rotate, resize, reflect this content. Currently I'm doing this with gestures, but would like to know if there is some sort of open-source widget that draws a box around the view and adds 4 buttons to do these functions:
rotate 90 degrees
rotate freely
resize
delete
Can anyone think of an open source framework that I can add to my project to create controls like the ones displayed?
I can probably build this by hand, but debugging gesture recognizers and view rotation is not the most fun thing, so I'm looking for something more polished.
Thank you!
Here's a link to an open source control on cocoa controls that looks like something you could use: TDResizerView.
"TDResizerView is used to resize and rotate an imageview with single finger"
Sounds like a good place to start from, even if you need to modify it.
I've never used this particular control though, so take my word for what it's worth.
edit: Also keep in mind that on iOS, users generally expect gestures. Forcing them to use the handles instead of pinching or rotating may be bad for your user experience, depending on why you want the handles instead.
In my app, I drew a graph using Core Graphics (inside a view, inside a view). Not a graphing calc app though, it graphs patient data and marks it every six months, and it is larger than the screen, so the user needs to have some way to move around. I was wondering if there is an easy way to implement pinch to zoom, or to flick with momentum. I was planning on just using UITouch to get notified when these actions were performed, but it doesnt really give you a lot of information. For example, all you get with the pinch to zoom is the ratio that they have zoomed, and all you get with the flick is the direction that they have flicked. So, I was just going to implement basic flicks without momentum, and simple pinch to zoom without being able to move around too.
But I figured I would ask here first, to see if anyone has a better idea about how to do this (easily).
EDIT: I found lots of places that tell you how to do this with photos, but none with core graphics or something like that, thanks.
I ended up using a UIScrollView, which implements pinch to zoom, and flick automatically (well, almost).
Please pardon my lack of Photoshop skills, but I'm curious what type of strategy Apps like Facebook and AP Mobile News are using for the 'label slider' in their applications. Here's a quick snippet outlining what I'm talking about as I'm sure the name I'm labeling the utility as is being butchered: http://dl-client.getdropbox.com/u/57676/slider.jpg
Essentially the user can touch the label and glide it along the X axis. It has a smooth bounce effect also once it hits the edges. This gives quite a bit more real estate if you need to present more on the screen than what your portrait mode allows for and is thus very valuable.
Is it a matter of just creating a UILabel that's wider than the screen with a bit of Touch API + Core Animation? Would love insight on how to start tackling this thing.
You'll most likely want to use a UIScrollView, with a UILabel as its content view. Size the label appropriately to your content, and then set the contentSize property of the scrollview to that size.
I created a similar control, and it's much easier than you think. It's just a UIScrollView with a series of UIButtons added to it. You could use labels instead of buttons - just depends on the feel you want. I think Facebook is probably using labels for theirs.
In any case, you'll probably want to use a series of components rather than one component (which is what Ben suggested) in the event that you want to, say, style the "selected" label differently from the others. It also makes hit detection a little easier.
You get the bounce effect for free by default - you may have noticed that most scroll views in iPhone apps do the same thing. It can be turned off as well.