In my app I have a draggable UIView contained in a UIScrollView so that I can zoom it. This moving UIView has a UIPanGestureRecognizer but if I zoom in first and then I try to move the UIView, that does not happen and instead the scrolling is performed as if the UIPanGestureRecognizer is not detected.
This is my associated method to the UIPanGestureRecognizer:
func handlePan(recognizer: UIPanGestureRecognizer) {
if (self.panRec.state == UIGestureRecognizerState.Began) {
self.scrollViewContainer.scrollEnabled = false
}
else if (self.panRec.state == UIGestureRecognizerState.Ended) {
self.scrollViewContainer.scrollEnabled = true
}
let translation = recognizer.translationInView(self)
if let view = recognizer.view {
self.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
recognizer.setTranslation(CGPointZero, inView: self)
self.updatePinsPosition()
}
As you can see I try to disable scrolling when the the user taps in the draggable UIView and reactivate it at the end but it doesn't work. Where am I making a mistake? What am I missing?
UPDATE
So explain myself better, I have a UIScrollView which contains a UIView and inside this last there are some other UIViews acting as pinch, the azure ones. I decided to use a further UIView as container so that the sub views are zoomed all together by scrolling. So, my zoom code is the following:
class PhotoViewController: UIViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate, UIScrollViewDelegate {
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var containerView: ContainerController!
override func viewDidLoad() {
...
self.scrollView.delegate = self
self.scrollView.showsVerticalScrollIndicator = true
self.scrollView.flashScrollIndicators()
self.scrollView.minimumZoomScale = 1.0
self.scrollView.maximumZoomScale = 10.0
}
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
return self.containerView
}
}
You have to override this method of Scrollview Delegate in your ViewController for both zooming and panning
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {
scale *= [[[self.scrollView window] screen] scale];
[view setContentScaleFactor:scale]; // View which you want to Zoom & pan.
for (UIView *subview in view.subviews) {
[subview setContentScaleFactor:scale]; // all the Container Views
}
}
Hope it will help you to solve your problem.
Related
I have two viewControllers:
ViewController1
A complex stack of sub viewcontrollers with somewhere in the middle an imageView
ViewController2
A scrollView with an imageView embedded in it
What I'm trying to achieve is a transition between the two viewControllers which gets triggered by pinching the imageView from viewController 1 causing it to zoom in and switch over to viewController 2. When the transition has ended, the imageView should be zoomed in as far as it's been zoomed during the pinch gesture triggered transition.
At the same time I want to support panning the image while performing the zoom transition so that just like with the zoom, the image in the end state will be transformed to the place it's been panned to.
So far I've tried the Hero transitions pod and a custom viewController transitions I wrote myself. The problem with the hero transitions is that the image doesn't properly get snapped to the end state in the second viewController. The problem I had with the custom viewController transition is that I couldn't get both zooming and panning to work at the same time.
Does anyone have an idea of how to implement this in Swift? Help is much appreciated.
The question can be divided in to two:
How to implement pinch zoom and dragging using pan gesture on an imageView
How to present a view controller with one of its subviews (imageView in vc2) positioned same as a subview (imageView in vc1) in the presenting view controller
Pinch gesture zoom: Pinch zooming is easier to implement using UIScrollView as it supports it out of the box with out a need to add the gesture recogniser. Create a scrollView and add the view you'd like to zoom with pinch as its subview (scrollView.addSubview(imageView)). Don't forget to add the scrollView itself as well (view.addSubview(scrollView)).
Configure the scrollView's min and max zoom scales: scrollView.minimumZoomScale, scrollView.maximumZoomScale. Set a delegate for scrollView.delegate and implement UIScrollViewDelegate:
func viewForZooming(in scrollView: UIScrollView) -> UIView?
Which should return your imageView in this case and,
Also conform to UIGestureRecognizerDelegate and implement:
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool
Which should return true. This is the key that allows us have pan gesture recogniser work with the internal pinch gesture recogniser.
Pan gesture dragging: Simply create a pan gesture recogniser with a target and add it to your scroll view scrollView.addGestureRecognizer(pan).
Handling gestures: Pinch zoom is working nicely by this stage except you'd like to present the second view controller when pinching ends. Implement one more UIScrollViewDelegate method to be notified when zooming ends:
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat)
And call your method that presents the detail view controller presentDetail(), we'll implement it in a bit.
Next step is to handle the pan gesture, I'll let the code explain itself:
// NOTE: Do NOT set from anywhere else than pan handler.
private var initialTouchPositionY: CGFloat = 0
private var initialTouchPositionX: CGFloat = 0
#objc func panned(_ pan: UIPanGestureRecognizer) {
let y = pan.location(in: scrollView).y
let x = pan.location(in: scrollView).x
switch pan.state {
case .began:
initialTouchPositionY = pan.location(in: imageView).y
initialTouchPositionX = pan.location(in: imageView).x
case .changed:
let offsetY = y - initialTouchPositionY
let offsetX = x - initialTouchPositionX
imageView.frame.origin = CGPoint(x: offsetX, y: offsetY)
case .ended:
presentDetail()
default: break
}
}
The implementation moves imageView around following the pan location and calls presentDetail() when gesture ends.
Before we implement presentDetail(), head to the detail view controller and add properties to hold imageViewFrame and the image itself. Now in vc1, we implement presentDetail() as such:
private func presentDetail() {
let frame = view.convert(imageView.frame, from: scrollView)
let detail = DetailViewController()
detail.imageViewFrame = frame
detail.image = imageView.image
// Note that we do not need the animation.
present(detail, animated: false, completion: nil)
}
In your DetailViewController, make sure to set the imageViewFrame and the image in e.g. viewDidLoad and you'll be set.
Complete working example:
class ViewController: UIViewController, UIScrollViewDelegate, UIGestureRecognizerDelegate {
let imageView: UIImageView = UIImageView()
let scrollView: UIScrollView = UIScrollView()
lazy var pan: UIPanGestureRecognizer = {
return UIPanGestureRecognizer(target: self, action: #selector(panned(_:)))
}()
override func viewDidLoad() {
super.viewDidLoad()
imageView.image = // set your image
scrollView.delegate = self
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 10.0
scrollView.addSubview(imageView)
view.addSubview(scrollView)
scrollView.frame = view.frame
let w = view.bounds.width - 30 // padding of 15 on each side
imageView.frame = CGRect(x: 0, y: 0, width: w, height: w)
imageView.center = scrollView.center
scrollView.addGestureRecognizer(pan)
}
// NOTE: Do NOT set from anywhere else than pan handler.
private var initialTouchPositionY: CGFloat = 0
private var initialTouchPositionX: CGFloat = 0
#objc func panned(_ pan: UIPanGestureRecognizer) {
let y = pan.location(in: scrollView).y
let x = pan.location(in: scrollView).x
switch pan.state {
case .began:
initialTouchPositionY = pan.location(in: imageView).y
initialTouchPositionX = pan.location(in: imageView).x
case .changed:
let offsetY = y - initialTouchPositionY
let offsetX = x - initialTouchPositionX
imageView.frame.origin = CGPoint(x: offsetX, y: offsetY)
case .ended:
presentDetail()
default: break
}
}
// MARK: UIScrollViewDelegate
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imageView
}
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
presentDetail()
}
// MARK: UIGestureRecognizerDelegate
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
// MARK: Private
private func presentDetail() {
let frame = view.convert(imageView.frame, from: scrollView)
let detail = DetailViewController()
detail.imageViewFrame = frame
detail.image = imageView.image
present(detail, animated: false, completion: nil)
}
}
class DetailViewController: UIViewController {
let imageView: UIImageView = UIImageView()
var imageViewFrame: CGRect!
var image: UIImage?
override func viewDidLoad() {
super.viewDidLoad()
imageView.frame = imageViewFrame
imageView.image = image
view.addSubview(imageView)
view.addSubview(backButton)
}
lazy var backButton: UIButton = {
let button: UIButton = UIButton(frame: CGRect(x: 10, y: 30, width: 60, height: 30))
button.addTarget(self, action: #selector(back(_:)), for: .touchUpInside)
button.setTitle("back", for: .normal)
return button
}()
#objc func back(_ sender: UIButton) {
dismiss(animated: false, completion: nil)
}
}
seems like UIView.animate(withDuration: animations: completion:) should help you; for example, in animations block you can set new image frame, and in completion: - present second view controller (without animation);
I have an app that displays a bunch of pictures when the user presses the button from a text list view screen. I have a specific subclass that allows the user to pinch and zoom in, but I am curious as to what code I need to enter in my particular swift file to allow the user to double tap to zoom in and out. I get three errors using this code. Two say "Value of type 'ZoomingScrollView' has no member 'scrollview' or 'imageview' " and also " 'CGRectZero' is unavaiable in Swift" My code for the subclass that allows the user to zoom in is below along with the code I am using to double tap to zoom.
import UIKit
class ZoomingScrollView: UIScrollView, UIScrollViewDelegate {
#IBOutlet weak var viewForZooming: UIView? = nil {
didSet {
self.delegate = self
} }
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
return viewForZooming }
#IBAction func userDoubleTappedScrollview(recognizer: UITapGestureRecognizer) {
if let scrollV = self.scrollview {
if (scrollV.zoomScale > scrollV.minimumZoomScale) {
scrollV.setZoomScale(scrollV.minimumZoomScale, animated: true)
}
else {
//(I divide by 3.0 since I don't wan't to zoom to the max upon the double tap)
let zoomRect = self.zoomRectForScale(scrollV.maximumZoomScale / 3.0, center: recognizer.locationInView(recognizer.view))
self.scrollview?.zoomToRect(zoomRect, animated: true)
}
} }
func zoomRectForScale(scale : CGFloat, center : CGPoint) -> CGRect {
var zoomRect = CGRectZero
if let imageV = self.imageView {
zoomRect.size.height = imageV.frame.size.height / scale;
zoomRect.size.width = imageV.frame.size.width / scale;
let newCenter = imageV.convertPoint(center, fromView: self.scrollview)
zoomRect.origin.x = newCenter.x - ((zoomRect.size.width / 2.0));
zoomRect.origin.y = newCenter.y - ((zoomRect.size.height / 2.0));
}
return zoomRect; }}
The issue seems to be that you copied some code from a view controller that had a scrollView and imageView outlet. I'm guessing your viewForZooming: UIView is your image view that you are zooming on. You also don't have to reference self.scrollView anymore because self is the scroll view since you're subclassing scroll view :) I think the code below should fix your problem (note: it's in the latest swift syntax. what you posted was not, so you may have to switch the code back to the old style if necessary. You should try to use the latest Swift though). Good luck and let me know if you have questions.
import UIKit
class ZoomingScrollView: UIScrollView, UIScrollViewDelegate {
#IBOutlet weak var viewForZooming: UIView? = nil {
didSet {
self.delegate = self
} }
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
return viewForZooming }
#IBAction func userDoubleTappedScrollview(recognizer: UITapGestureRecognizer) {
if (zoomScale > minimumZoomScale) {
setZoomScale(minimumZoomScale, animated: true)
}
else {
//(I divide by 3.0 since I don't wan't to zoom to the max upon the double tap)
let zoomRect = zoomRectForScale(scale: maximumZoomScale / 3.0, center: recognizer.location(in: recognizer.view))
zoom(to: zoomRect, animated: true)
}
}
func zoomRectForScale(scale : CGFloat, center : CGPoint) -> CGRect {
var zoomRect = CGRect.zero
if let imageV = self.viewForZooming {
zoomRect.size.height = imageV.frame.size.height / scale;
zoomRect.size.width = imageV.frame.size.width / scale;
let newCenter = imageV.convert(center, from: self)
zoomRect.origin.x = newCenter.x - ((zoomRect.size.width / 2.0));
zoomRect.origin.y = newCenter.y - ((zoomRect.size.height / 2.0));
}
return zoomRect;
}
}
I want to move a view with in the parent view I am using UIPanGestureRecognizer to move view. I am using below code.
-(void)move:(UIPanGestureRecognizer *)recognizer {
CGPoint touchLocation = [recognizer locationInView:self.customeView];
self.view.center = touchLocation;
}
I want to use locationInView to move view instead of translationInView. Can anyone help me how to move the view with in the parentview using locationInView?
You are on the right track with the UIPanGestureRecognizer. You are likely missing the began and end gesture state handling. Here is a full solution I just put together in sample project (Swift) with a panView as a subclass of the view controller's root view.
class ViewController: UIViewController {
#IBOutlet weak var panView: UIView!
// records the view's center for use as an offset while dragging
var viewCenter: CGPoint!
override func viewDidLoad() {
super.viewDidLoad()
panView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(self.dragView)))
}
func dragView(gesture: UIPanGestureRecognizer) {
let target = gesture.view!
switch gesture.state {
case .began, .ended:
viewCenter = target.center
case .changed:
let translation = gesture.translation(in: self.view)
target.center = CGPoint(x: viewCenter!.x + translation.x, y: viewCenter!.y + translation.y)
default: break
}
}
}
You can try this
#interface ViewController ()
#property (weak, nonatomic) IBOutlet UIView *panView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//self.panView = self.panView -> self.view . self.panView is direct child of self.view
UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(move:)];
[self.panView addGestureRecognizer:panRecognizer];
// Do any additional setup after loading the view, typically from a nib.
}
-(void)move:(UIPanGestureRecognizer *)recognizer {
CGPoint centerPoint = [recognizer locationInView:self.view];
self.panView.center = centerPoint;
}
}
I have an UIScrollView with an UIImageView in it. Just a simple test case: The UIImageView is full width of the scroll view and centered to Y with auto layout. However, in the final result on my device it is not really centered by Y.
But i have the problem that when zooming the UIImageView with the scroll view it "drifts" to the bottom area – not just scaled in the center as it should be. It also "drifts" to the left when zoom out (at the very end of the video) and bounces back to the center.
I've made a small preview video of this behavior: https://www.youtube.com/watch?v=ivRNkzNrcEA
Here is my simple test code:
class TestController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var SCROLL: UIScrollView!
#IBOutlet weak var IMAGE: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
SCROLL.minimumZoomScale = 1;
SCROLL.maximumZoomScale = 6.0;
SCROLL.zoomScale = 1.0;
SCROLL.contentSize = IMAGE.frame.size;
SCROLL.delegate = self;
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
}
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
return IMAGE
}
func scrollViewDidZoom(scrollView: UIScrollView) {
}
func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
}
}
And here is my test auto layout:
I am not sure if it is possible to keep centering with just auto-layout. One approach that works for me is to to sub-class UIScrollView and modify layoutSubviews as illustrated in Apple WWDC example. Code below
-(void) layoutSubviews
{
[super layoutSubviews];
UIImageView *v = (UIImageView *)[self.delegate viewForZoomingInScrollView:self];
//Centering code
CGFloat svw = self.bounds.size.width;
CGFloat svh = self.bounds.size.height;
CGFloat vw = v.frame.size.width;
CGFloat vh = v.frame.size.height;
CGRect f = v.frame;
if (svw > vw)
{
f.origin.x = (svw - vw)/2.0;
}
else
{
f.origin.x = 0;
}
if (svh > vh)
{
f.origin.y = (svh - vh)/2.0;
}
else
{
f.origin.y = 0;
}
v.frame = f;
}
I have a UIView, that I have appear when a button is tapped, I am using it as a custom alert view essentially. Now when the user taps outside the custom UIView that I added to the main view, I want to hide the cusomt view, I can easily do this with customView.hidden = YES; but how can I check for the tap outside the view?
Thanks for the help
There are 2 approaches
First approach
You can set a tag for your custom view:
customview.tag=99;
An then in your viewcontroller, use the touchesBegan:withEvent: delegate
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
if(touch.view.tag!=99){
customview.hidden=YES;
}
}
Second approach
It's more likely that every time you want to popup a custom view, there's an overlay behind it, which will fill your screen (e.g. a black view with alpha ~0.4). In these cases, you can add an UITapGestureRecognizer to it, and add it to your view every time you want your custom view to show up. Here's an example:
UIView *overlay;
-(void)addOverlay{
overlay = [[UIView alloc] initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, self.view.frame.size.height)];
[overlay setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5]];
UITapGestureRecognizer *overlayTap =
[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(onOverlayTapped)];
[overlay addGestureRecognizer:overlayTap];
[self.view addSubview:overlay];
}
- (void)onOverlayTapped
{
NSLog(#"Overlay tapped");
//Animate the hide effect, you can also simply use customview.hidden=YES;
[UIView animateWithDuration:0.2f animations:^{
overlay.alpha=0;
customview.alpha=0;
}completion:^(BOOL finished) {
[overlay removeFromSuperview];
}];
}
Like in the answer of FlySoFast, I tried first approach and it worked I just shared to swift version of it. You can tag it of your custom view and the check the that view touched or not so we achieved our solution I guess.In the below I assign tag value of my custom view to 900.
customview.tag = 900
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch = touches.first!
if touch.view?.tag != 900 {
resetMenu()
}
}
I hope this answer will help to you
When you presenting custom alert view, add that custom alert view in to another full screen view, make that view clear by setting its backgroundColor clear. Add full screen view in main view, and add tapGesture in fullScreen invisible view, when ever it gets tap remove this view.
But if you will do this it will dismiss view even when you touch custom alert view for that you need to set delegate of tapGesture and implement this method
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
if ([touch.view isDescendantOfView:self.customAlertView])
{
return NO;
}
return YES;
}
with using function pointInside in Swift:
override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool {
if let view = customView {
//if UIView is open open
let newPoint = self.convertPoint(point, toView: view)
let pointIsInsideGenius = view.pointInside(newPoint, withEvent: event)
// tapping inside of UIView
if pointIsInsideGenius {
return true
} else {
// if tapped outside then remove UIView
view.removeFromSuperview()
view = nil
}
}
}
return false
}
You can use this library: https://github.com/huynguyencong/EzPopup
Init a PopUpController the view that you want to dismiss it when tap outside
let popup = PopupViewController(contentView: viewNeedToRemoveWhenTapOutside, position: .bottomLeft(position))
present(popup, animated: true, completion: nil)
You can make this by the way. The main tricks are a button that wraps the full screen behind your custom view. When you click on the button you simply dismiss your custom view. Here is the complete code.
Here is the complete custom uiview class
import Foundation
import UIKit
class CustomAlartView: UIView {
static let instance = CustomAlartView()
#IBOutlet var parentView: UIView!
#IBOutlet weak var mainView: UIView!
#IBOutlet weak var userInput: UITextField!
override init(frame: CGRect) {
super.init(frame: frame)
Bundle.main.loadNibNamed("CustomAlartView", owner: self, options: nil)
setupView()
}
//initWithCode to init view from xib or storyboard
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
// setupView()
}
#IBAction func tappedCancel(_ sender: Any) {
parentView.removeFromSuperview()
}
#IBAction func tappedOk(_ sender: Any) {
if userInput.text == "" {
print("\(userInput.text)")
}
else{
parentView.removeFromSuperview()
}
}
#IBAction func tappedOutside(_ sender: Any) {
print("click outside")
parentView.removeFromSuperview()
}
//common func to init our view
private func setupView() {
parentView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
parentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
mainView.layer.shadowColor = UIColor.gray.cgColor
mainView.layer.shadowOpacity = 1
mainView.layer.shadowOffset = CGSize(width: 10, height: 10)
mainView.layer.shadowRadius = 10
mainView.layer.cornerRadius = 15
mainView.layer.masksToBounds = true
}
enum alartType {
case success
case failed
}
func showAlart() {
UIApplication.shared.keyWindow?.addSubview(parentView)
}
}