I am creating a camera roll feature similar to snapchat where the camera is the bottom layer and then after tapping a button the camera roll appears. The camera roll does not occupy the whole screen the search bar on the top is still maintained and upon dismissal with a swipe gesture down the camera is still running. I am not sure how this affect is achieved. Is it done by using a scroll view or a segue of some kind? Thank you for your help.
Below is the video in question
Snap Chat Camera Roll
Firstly, this type of effect cannot be achieved using the standard camera UIImagePickerController. You will need to create your own camera view.
Here is a good guide to get you started: https://github.com/codepath/ios_guides/wiki/Creating-a-Custom-Camera-View
You could also try using a custom library that can be easily customized such as: https://github.com/omergul/LLSimpleCamera/
Now, in terms of the actual visual, I do not believe there is any actual segue/change of viewcontroller involved. The camera view is probably always on screen (except perhaps when it is fully covered by the Memories screen), it is simply overlayed by other things.
The Memories screen is most likely 'presented' in a custom manner. The show/dismissal logic can be achieved by attaching a UIPanGestureRecognizer to the UIView and translating the view up and down on pan event. If the pan's y value passes a certain threshold up or down, it automatically continues its animation to show or hide the view.
Related
I'm looking to recreate the functionality that's show in this video for the picture:
https://www.youtube.com/watch?v=zEREoIcoQHE
A long press is done, a view appears, and when the user swipes up far enough, the options come up at the bottom. If the user continues to drag up higher and then lets go, the main view animates to bounce back down to the middle of the screen. If the user swipes all the way down, the view animates away.
I recognize there is a lot going on here and a lot of different pieces and that this is a very broad question. I'm more or less looking for a place to get started with it. The only thing I really recognize here is I guess a scrollview. I know how to do all of the basic stuff with presenting and dismissing the different views, but the dragging and the scrolling and the snapping back into place is where I'm not sure where to begin.
Is that all just scrollView code I need to learn? For example I guess there's a way to detect when the scroll has been scrolled far enough up to trigger presenting the options view. What is making the view bounce back into place after dragging up and releasing? etc.
What tools are used to achieve this kind of behavior?
If I am not mistaken thats the "Apple's" 3D touch APIs magic ✨
Check out their documentation
You might be interested in :
ViewControllerPreviews: Using the UIViewController previewing APIs, which demonstrates peek (preview) and pop (commit), as well as peek quick actions
Reference: https://developer.apple.com/library/content/samplecode/ViewControllerPreviews/Introduction/Intro.html#//apple_ref/doc/uid/TP40016546
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.
Trying to create an app that uses the UIImagePickerController for its picture taking activities. I'm using a cameraOverlayView to accomplish this (for now, it just contains two buttons, one for Taking/Keeping the Picture and the other one for Canceling/Retaking). The steps below outline what is occurring.
UIImagePickerController.view (with cameraOverlayView) is shown
I click "Shoot" and the imagePicker does its magic and I'm able to get an image out of it. However going past the image acquisition section (after I dismiss the custom view), the imagePicker goes onto "still" preview screen mode without any controls other than the "<" back button at the top of the screen. I'd like to avoid that and instead continue to use my custom view provided to the cameraOverlayView to handle "Keep/Retake" actions until I'm finished.
As you can see in the image above, there is "black" band at the bottom of the view with my two custom buttons in it. I have no idea how the black band gets there since I did not add it. My custom View only has the two buttons.
Attempting to add an UIImageView on the fly (to display a still preview of the image taken to the user while still keeping my action buttons) has the effect below .
The red arrow is pointing to an extra section below the UIImage I added after acquiring the picture data from the imagePicker.
That section is actually displaying the live preview the imagePicker is constantly producing.
What I'd like to accomplish is to be able to get the bounds of that live preview section being displayed so I can calculate the correct bounds of the UIImage I'm adding on the fly since getting the height correctly will absolutely fail when ported to different devices.
Any suggestions?
In storyboard, I have buttons attached to main view as siblings to SCNView(both buttons and SCNView are subviews of main view). At launch time, the buttons appear on screen before the SCNView does. This is quite unfortunate. Do you have any idea how to fix this?
//edit: added button programatically in viedDidLoad: as a subview of SCNView..Still the same problem.
SettingsButton and View appear before SceneView. This happens on iPhone 5,5c and lower and on iPads.(3 for sure, don't know for others)
Code for adding view programatically:
let uv = UIView(frame:myFrame)
uv.backgroundColor = UIColor.blackColor
sceneView.addSubview(uv)// scene view from storyboard
Thats it. How can iOS take 5-10s to load an app, but than rushes with adding views to the screen in an unpredictable order.. Couldn't it just take 0.2s more and present view properly? Really stupid problem
I imagine if you check via debugger breakpoints or logging in viewDidLoad, you'll find that the SCNView instance is indeed in the view hierarchy immediately.
What you're seeing is that said view's SceneKit content does not appear immediately. Depending on what you're doing with SceneKit, it may take some time to load content and prepare for rendering, and during that time the rest of the view hierarchy remains visible. That delay is probably unavoidable — you might be able to minimize it by optimizing asset formats, reducing the amount of stuff in your scene, etc. So it sounds like the key issue here is getting your app launch experience to look the way you want while accounting for the delay.
A good way to do that might be to show a splash image of some sort until SceneKit is ready to display. You could put a UIImageView in your storyboard, set up to obscure everything with a splash screen (possibly the same launch image iOS displays before your app takes over), then hide that image view (with a fade out even?) when SceneKit starts rendering.
To find out when SceneKit starts rendering, make one of your objects the scene renderer delegate and implement renderer:didRenderScene:atTime:. That method gets called on every frame, so you can use it to catch when the first frame has been rendered (and then ignore it for subsequent frames).
I know this has been probably asked before but I've seen many approaches and i don't know which is best for me, so plz don't send me a link to another post unless it addresses my problem directly.
I have a controller which has a uiview on the top (like a header) (this header is bigger than it seems because is partially hidden on top). on that view i have a uibutton which now with a touch up inside shows the entire header view and taping again returns it to its starting position (changing frame with animation). I want to also be able to drag the view but only changing position on the y axis(dragging up and down)... i was thinking of adding the dragInside/Outside event to the button but this doesn't give me the position of the finger... and also want to know when the user releases the drag so the view ends animation to any of its two possible states (showing or partially hidden). Is this a "touches began" , "touches moved" , "touches ended" thing? if it is please provide a code example. I also want to do this with another view but this is on the left side... same thing but this one moves on the X axis... any help is appreciated. or maybe it can be made with drag event if i only can save a CGpoint of last touch, maybe that's better, any other suggestions
Look at using a UIPanGestureRecognizer to detect the touch movements. Use the translationInView: of the gesture to set the view y position. The translation is the total movement since the start of the gesture so you don't need to remember and accumulate the offset position yourself.
The main thing to worry about while implementing this is bounding the y position of the view so that no matter how far the user drags the view won't go too high or low on the screen.
Use a UIPanGestureRecognizer, that's a class dedicated to handling such drag/pan gestures.
Everything is described here in Apple's documentation, including examples, so you should find your answer here.
There is also some sample code in Apple Developer Library that shows you how to use Gesture Recognizers if needed.