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.
Related
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.
I'm building an iOS application that will be drawing diagrams for the user to see and manipulate (move, add, remove elements) and I'm having trouble choosing how to implement the actual rendering.
I find the default cocoa-touch controls to be too limited for this purpose yet graphics frameworks such as Quartz/OpenGL ES/Cocos2D seem a bit overkill.
Can anyone suggest an approach to this situation or perhaps a library better suited to my needs?
Thank you.
You can have each drawn object (box, association) be a custom UIView subclass added as a separate subview of your main view. Each subview can catch events from finger touches.
Apple's Touches sample code shows how to receive events on subviews and move them in response to dragging motions.
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).
I have horizontal list for which I'm implementing my own scrolling logic. I have the "touch and drag" scrolling working great, but I'm having trouble with the "flick" gesture. All the built in scrollable views have the feature that if you "flick" the view it scrolls faster or slower based on the intensity of the flick.
Does anyone has any suggestion how do that for my view?
What I'm doing right now is changing the UIView.center.x coordinate of my custom UIView to scroll it across the screen
I would strongly suggest you figure out how to make use of the built in UIScrollView class. Apple has invested a LOT of effort to make scrolling feel 'right'. You may be able to recreate some, or even all, of that feel, but it'll take a lot of work. Better to piggy back off of what's already been done.
If you want to implement your own scroll view, you'll have to make the view scroll based on the length of the sweeping distance and the speed at witch it went across the screen. Taking these parameters as input and using simple geometry math you could calculate how much further the view should scroll after the sweep has ended(touchesEnded event).
Ofcourse this is not as simple as it sounds, making the flick gesture just feel right and natural is much harder.
If you really are set on doing this yourself, Drew McCormack has a great article on MacResearch where he explains some of the physics behind momentum-based scrolling. His implementation uses HTML, CSS, and JavaScript, but the core principles could be brought across to your custom UIView subclass.
I'm developing Piano App for iPhone.
I'd like to develop smooth-scrollable keyboard (like Music Sampler).
I put a custom view(1440px x 120px) in UIScrollView.
I wanted to use OpenGL because Quartz is too slow.
But I couldn't make OpenGL view in 1440px.
Any idea to make a faster & large-sized custom view?
Thank you.
Any instance of UIView has a maximum size of 1024x1024. Doesn't matter if it is OpenGL or not. You can have a scrollable area larger than that, but you will have to build it from multiple tiled views.
Using OpenGL for this would be overkill and a bad idea. You'll waste a lot of time setting up things that are already provided for you in UIViews, such as touch handling.
There are two ways for laying out nonstandard keyboards on the iPhone that I've seen. The first is to create a static UIImageView that contains a representation of your entire keyboard, capture touch events within this view, and match the location of those touch events to where your prerendered keys are on the keyboard. If the user hit one of your virtual keys, you overlay some sort of image that shows the key popping out at you and you process the keypress. I believe this is the approach that many of the calculator applications take.
An alternative way is to set up each of your keys as separate UIViews, lay them out within a larger superview, and have each do processing of their touch events. This is what I do in the interface shown here. The lower menu consists of two submenus, and within the submenus each of the menu buttons are separate UIViews. Their content (the border, gloss, and text) is rendered via Quartz, but that rendering only happens once. Because these views are layer-backed, they cache their drawn content and animate and scroll very smoothly. Touch events trigger each menu item's action. Note that the top half of the menu is contained within a UIScrollView so that you can scroll for more options.
My personal recommendation is to use the latter approach, because dynamically drawing your piano keys at startup lets you experiment with different key sizes and shapes without having to redo your art every time.