Is it possible to render a tableview 'skewed'? - ios

I'm coding in Swift 2.0 for devices running iOS7+.
Is it possible to present a tableview in a skewed/diagonal/slanted format as indicated below?
Obviously if the answer is yes, what process would I need to go through to get the result?

Yes it's possible. Views in iOS have a transform property, of type CGAffineTransform. You can use that to make the view appear skewed. I don't know offhand how to create a transform that creates the skewing effect. I suggest doing some google searching.
The next issue you will face is interacting with taps. Changing the transform of a view does not transform the coordinate system applied to taps, so taps will still land on the non-skewed views. That will be much harder to sort out, and without doing a fair amount of research I don't have an answer for you on that one. (It would probably be possible to intercept touch events before they get to your table view and apply the inverse of your skewing transform to them so that you map the taps back to the rectangular coordinate system the table view is expecting.)

Related

How to get correct screen coordinate from UITapGestureRecognizer while VoiceOver is on

I'm currently working on an interactive view that relies heavily on the user's touch location. I have found that there are a few ways to interact with the UITapGestureRecognizer while VoiceOver is on, but when I tap my point the values given are very wrong. I've looked elsewhere, but my use case is outside of the norm so there is not a lot to tell me what is going on. Has anyone experienced this before?
I am aware that I can change accessibilityTrait to UIAccessibilityTraitAllowsDirectInteraction which will give me the correct screen point when used, but I would like to know what is causing this issue at the very least for the sake of knowledge. To interact with the UITapGestureRecognizer I either double tap or do a 3D touch by pressing on hard on the screen. The ladder method doesn't work for the tap gesture but will work for the pan gesture.
This is the only line I use to get my screen points. My map view is a UIImageView
CGPoint screenPoint = [tapGesture locationInView:map];
I'm using a map of a building and I try to tap the same corner or landmark for my testing. I know I can't hit the same exact point every time, but I do use a stylus and I can get pretty close.
Without VoiceOver on I would get the result: (35.500, 154.363)
With VoiceOver on and tapping in generally the same spot, I get : (187.500, 197.682)
The point I am using to test is on the left side of the screen and the result from VoiceOver being on is in the middle of the screen. I believe the y-axis value may have changed because of my tool bar's size, but I have no idea what is throwing off the x-axis value. If more information is needed let me know.
UPDATE: Upon further investigation, it turns out that the UITapGestureRecognizer will always return (187.500, 197.682) no matter where I touch in the map view when VoiceOver is on. That point seems to be the middle of the map view. Oddly enough though, the UIPanGestureRecognizer will give me the correct (x,y) for my view if I use the 3D touch while VoiceOver is on.
On a side note not relating to the problem at hand, it seems if I use the accessibility trait UIAccessibilityTraitAllowsDirectInteraction the method UIAccessibilityConvertFrameToScreenCoordinates returns a frame that is higher than my view. It works fine if I do not change the trait.
Your problem may deal with the reference point used when VoiceOver is on.
Verify what your point coordinates are referring to : view or screen coordinates ?
I suggest you take a look at the following elements :
accessibilityFrame
accessibilityFrameInContainerSpace
UIAccessibilityConvertFrameToScreenCoordinates
According to your project, the previous elements may be interesting to get your purposes.

How is the Instagram Stories cube transition done in iOS?

When swiping between stories in Instagrams new feature "Stories" (you know that cube-like transition when going from one story to another) I can't manage to understand how they do it!
First of all, if you dig deeper into the functionality you find that it works exactly like the UIPageViewControllers transition:
- It bounces when swiping fast from one view to another.
- You can pause the swipe in the middle of the transition by touching the screen.
The developing team couldn't have used a solution based on the more known workarounds out there, e.g:
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
Because as far as I know my two statement above is not possible to achieve with anything else than the PageViewController.
This leaves me thinking that the Instagram Developer Team gained access to a new transition style for the PageViewController, also known as Cube-scroll, or is it a workaround that I'm not aware of?
Any ideas?
I took a shot at recreating this functionality a while back. You can check the source code on GitHub: https://github.com/oyvind-hauge/OHCubeView
I'm using a scroll view (with paging enabled) and, for each subview I'm manipulating these as a function of the given view's current x-offset in the scroll view. The actual animations are done on each subview's layer using Core Animation (more specifically, transforming an identity matrix, given by CATransform3DIdentity, using the method CATransform3DRotate).
The shadow effects are also applied to the subview's layers (view.layer.opacity), with the amount of shadow determined by how much of the view is showing on screen.
My implementation solves both of your concerns (bounces when swiping, can pause swipes). I'm sure this could have also been implemented using the a UIPageViewController, but I hate working with those.
I think you are overthinking the controller's part here. The effect can easily be achieved using a CATransformLayer and three-sided cube-like view structure, where there is one view which aligns with the screen plane, and two others rotated -90 and 90 degrees on their y axis. Then, getting a pan gesture to rotate the scene. After a successful 90 degree turn (in either direction), you can either quickly reset the scene (so that keeping on rotating appears as if continues, but actually the camera shifted back to initial position) or you can have a full 360 degree rotation, and just update previous and next "pages". A single controller can handle this scene. If you prefer to have each page as a controller, it is possible, you can still use one controller for the scene, and then use the page controllers as child controllers, and setting their views as described above.
See this article for more information on CATransformLayer. Their example already creates something that is quite close to what you need.

how to get visible overlays in MapKit? (i.e. MKOverlay/MKOverlayRender from a Mapkit Ivew)

How does one get a list (array) of currently visible overlay from a MapkitView?
Background - for example I want to show direction arrows to the center of certain Overlay types on my mapkitview, however how do I get the visible ones? There seems to be no way to do this I can see? So do I need to got through all overlays (actually ~8000) and do my own check to see what would be showing on the screen? Seems a waste if MapKit would have already effectively done this as part of deciding what overlays need to be displayed at a given time.
I've been tinkering with some similar problems and the most efficient way I could figure out was to add the overlays as annotations as well, since MKOverlay implements MKAnnotation. Then you would be able to use annotationsInMapRect for the currently displayed mapRect. However this would also return any regular MKAnnotations, and only uses the calculated middle of the overlay. The only way (so far as I figured) to only get the overlays would be to iterate over each overlay and use:
-(BOOL)intersectsMapRect:(MKMapRect)mapRect;
on the currently visible mapRect.
If you found another way I'd be happy to hear!

Simulate 360 degree object rotation using multiple images on iOS

I would like to show a swipe-able 360 degree view of a product along a single axis by using multiple images stitched together to make it animated.
I'm new to iOS development, and am hoping to get pointed in the right direction to find libraries or built-in methods that could help me achieve this. I'm guessing this is a fairly common task, but I'm not even sure of the correct terminology. (I'm dabbling in RubyMotion as well, so that would be a bonus if it could work using that approach.)
how i might do it:
get an image showing up in the ui, running on the phone, base case :)
make a 'ThreeSixtyImageView' (subclass of UIView) that contains a big UIImageView.
keep an NSArray of UIImages in your ThreeSixtyImageView class; load up all your UIImages into that array.
keep a number that's an index into that array. when it changes, set the UIImageView image to the UIImage at that array index! hook up a button that increments the index (and show that image) to make sure that works.
add a UIPanGestureRecognizer to track touch state
when the pan gesture begins, remember which image you're on, and where they tapped (as an anchor point)
when the pan gesture updates, subtract the anchor and divide by something that feels nice to get 'how much user wants images to rotate'. this gives you a new image index value.
update your main UIImage with that new image index (into your array)
if there's a step here you don't understand, look in the examples included in the xcode/iOS documentation, and copy their code! the sample code is pretty good, and helped me a lot with editing XIB documents, and learning about GestureRecognizers.
good luck!

iOS class that allows an image to "drift" across screen?

I've seen a lot of helpful tutorials that show one how to:
make an image move according to a predefined path, or
move the image, a few pixels at a time, in response to a UIButton.
What I want to do is have the image "drift" arbitrarily according to an Vxy velocity I define, then have the button(s) change the velocity. (Yes, I'd have it slow down with time if no action made).
In other languages there might have been a way to do Change Pxy position by Vxy (to ad infinitum) unless button pushed. I believe GET was the command. I can think of a way to do that in iOS I suppose but that would involve setting up a series of 1 sec CGMutablePathRef anims. Alternatively, I have seen some talk of NSTimer: would it be a good practice to introduce some sort of delay: draw, delay, draw, delay.
Request: specific classes or terms I can search in the manuals for myself.
Iirc using uiview's animateWithDuration:completion is cheaper than using core animation. frame is an animatable property. So, yeah I think I would use an NSTimer to call your method for default calculation of the end frame of your view and then call animateWithDuration:completion there.
[deleted bad idea]
I ran across a wonderful tutorial for anyone considering such a project;
http://www.youtube.com/watch?v=nH_Rj152DRM
I believe the key "noob" problem I was having was in not realizing I should declare the instance variable for my sprite/ image in the
-(void) viewDidLoad{
then work on other properties of the animation in touches/ other user events. Once I figured that out, I am now capable of doing the heavy lifting for the rest of the project myself.

Resources