locked
need image previwer for xamarin ios RRS feed

  • Question

  • User395788 posted

    Image can be loaded in the view, user can zoom in zoom out image with double tap and two fingers. when user double tap on image the particular area will zoom in.

    In short Similar to native ios image viewer.

    Thursday, July 16, 2020 12:07 PM

Answers

  • User369979 posted

    @Abhishek575757 Do you have any update here?

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 21, 2020 10:10 AM

All replies

  • User369979 posted

    We could use a UIScrollView to wrap your image view and then enable the zooming feature on the scroll view. Therefore, the image view could be pinched. Here is the code:

    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();
    
        UIScrollView scrollView = new UIScrollView(View.Bounds);
        UIImageView imgView = new UIImageView(UIImage.FromBundle("scenery.jpg"));
        imgView.TranslatesAutoresizingMaskIntoConstraints = false;
        scrollView.AddSubview(imgView);
    
        imgView.LeadingAnchor.ConstraintEqualTo(scrollView.LeadingAnchor).Active = true;
        imgView.TopAnchor.ConstraintEqualTo(scrollView.TopAnchor).Active = true;
        imgView.TrailingAnchor.ConstraintEqualTo(scrollView.TrailingAnchor).Active = true;
        imgView.BottomAnchor.ConstraintEqualTo(scrollView.BottomAnchor).Active = true;
        imgView.HeightAnchor.ConstraintEqualTo(300).Active = true;
        imgView.WidthAnchor.ConstraintEqualTo(300).Active = true;
    
        View.AddSubview(scrollView);
    
        scrollView.Delegate = new MyScrollViewDelegate(imgView);
        scrollView.MaximumZoomScale = 10;
        scrollView.MinimumZoomScale = 0.2f;
    }
    
    // Use delegate to indicate which control needs to be manipulated
    public class MyScrollViewDelegate : UIScrollViewDelegate
    {
        UIView zoomingView;
        public MyScrollViewDelegate(UIView view)
        {
            zoomingView = view;
        }
        public override UIView ViewForZoomingInScrollView(UIScrollView scrollView)
        {
            return zoomingView;
        }
    }
    

    Here is the effect: Adjust the scroll view's frame to fit your requirement.

    Friday, July 17, 2020 7:26 AM
  • User369979 posted

    @Abhishek575757 Do you have any update here?

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 21, 2020 10:10 AM
  • User395788 posted

    thanks , I have created one with below code:- it will work on double tap as well with two figure zoom.

    private void LoadImage() { try {

                ZoomImage = new UIImageView(new CGRect(0, 0, View.Frame.Size.Width, View.Frame.Size.Height))
                {
                    ContentMode = UIViewContentMode.ScaleAspectFit,
                    Image = PreviewImage.Image,
                    UserInteractionEnabled = true
                };
    
                scrollView = new UIScrollView(new CGRect(0, 0, View.Frame.Width, View.Frame.Height))
                {
                    MinimumZoomScale = _minimumzoomscale,
                    MaximumZoomScale = _mediumzoomscale
    
    
                };
    
                scrollView.ViewForZoomingInScrollView = (scrollView) => { return ZoomImage; };
                scrollView.DidZoom += ZoomingEnd;
                scrollView.AddSubview(ZoomImage);
                View.AddSubview(scrollView);
    
    
                ZoomImage.AddGestureRecognizer(new UITapGestureRecognizer(tap =>
                {
                    if (scrollView.ZoomScale > _minimumzoomscale)
                    {
    
    
                        UIView.Animate(0.5, 0, UIViewAnimationOptions.CurveEaseOut,
                         () =>
                         {
                             scrollView.ZoomScale = _minimumzoomscale;
    
    
                         }, null);
    
                    }
                    else
                    {
                        var point = tap.LocationInView(ZoomImage);
                        var _scale = _mediumzoomscale;
                        var scrollSize = scrollView.Frame.Size;
    
    
                        var size = new CGSize(width: scrollSize.Width / _scale, height: scrollSize.Height / _scale);
                        var origin = new CGPoint(x: point.X - size.Width / 2, y: point.Y - size.Height / 2);
                        var width = scrollSize.Width / _scale;
                        var height = scrollSize.Height / _scale;
                        var x = point.X - size.Width / 2;
                        var y = point.Y - size.Height / 2;
                        UIView.Animate(0.5, 0, UIViewAnimationOptions.CurveEaseIn,
                        () =>
                        {
                            scrollView.ZoomToRect(new CGRect(x, y, width, height), true);
    
                        }, null);
    
    
                    }
    
                })
                {
                    NumberOfTapsRequired = 2
                });
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
    
    
        }
    
    
    
        private void ZoomingEnd(object sender, EventArgs e)
        {
            try
            {
    
                if (scrollView.ZoomScale > 1)
                {
    
                    var ratioW = ZoomImage.Frame.Width / ZoomImage.Image.Size.Width;
                    var ratioH = ZoomImage.Frame.Height / ZoomImage.Image.Size.Height;
                    var ratio = ratioW < ratioH ? ratioW : ratioH;
                    var newWidth = ZoomImage.Image.Size.Width * ratio;
                    var newHeight = ZoomImage.Image.Size.Height * ratio;
                    var conditionLeft = newWidth * scrollView.ZoomScale > ZoomImage.Frame.Width;
                    var left = 0.5 * (conditionLeft ? newWidth - ZoomImage.Frame.Width : (scrollView.Frame.Width - scrollView.ContentSize.Width));
                    var conditioTop = newHeight * scrollView.ZoomScale > ZoomImage.Frame.Height;
                    var top = 0.5 * (conditioTop ? newHeight - ZoomImage.Frame.Height : (scrollView.Frame.Height - scrollView.ContentSize.Height));
                    scrollView.ContentInset = new UIEdgeInsets(top: (nfloat)top, left: (nfloat)left, bottom: (nfloat)top, right: (nfloat)left);
    
                }
                else
                {
    
                    scrollView.ContentInset = UIEdgeInsets.Zero;
                }
            }
            catch (Exception ex)
            {
    
            }
        }
    
    Thursday, August 6, 2020 8:25 PM
  • User395788 posted

    Thanks for the code. it is helpful

    Thursday, August 6, 2020 8:28 PM