Quiero establecer un UIImageView con un UIImage y poner este imageview dentro de un UIScrollView para obtener un zoom de esta imagen;
y quiero que esta UIImageView y UIScrollView para caber en el rect en el centro de la vista…es posible?

  • Así que usted quiere que la imagen de zoom con una pizca, pero todo lo demás en el desplazamiento que se mantengan de la misma?
  • sí………….
  • Sí, definitivamente es posible. ¿Has probado alguna cosa? La mayoría de lo que usted está describiendo, se puede hacer en el interface builder / storyboard
InformationsquelleAutor CrazyDev | 2012-07-03

4 Comentarios

  1. 90
    1. Configurar su controlador de vista como un <UIScrollViewDelegate>
    2. Llamar su UIScrollView el tamaño que desee para el rectángulo en el centro de la vista. Establecer el máximo de zoom en el inspector de algo más grande que 1. Como 4 o 10.
    3. Haga clic derecho sobre el desplazamiento de ver y conectar el delegado de su punto de vista controlador.
    4. Llamar su UIImageView en el UIScrollView y establecer con cualquier imagen que desee. Hacer el mismo tamaño que el UIScrollView.
    5. Ctrl + arrastrar el formulario que UIImageView a la .h de su controlador de Vista para crear un IBOutlet para la UIImageView, llamar algo inteligente como imageView.
    6. Agregue este código:

      -(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
      {
          return self.imageView;
      }
    7. Ejecutar la aplicación y la pizca y el pan a su antojo.

    • Se puede hacer un ejemplo de esto, pero a través de programación?
    • por mucho, el más simple y más clara la solución que he encontrado
    • Paulson Podemos restringir el zoomout para el tamaño de la imagen. No quiero que el usuario para alejar el tamaño de la imagen. U puede pls help me?
  2. 29

    Descarga este y este archivos. Los necesitará para manejar toca.

    Añadir a su vista el scrollView delegado <UIScrollViewDelegate> y declarar los puntos de venta:

     @property (nonatomic, retain) IBOutlet UIScrollView *imageScrollView;
     @property (nonatomic, retain) UIImageView *imageView;

    Importar el archivo descargado dentro de la pantalla y hacer:

    #import "TapDetectingImageView.h"
    #define ZOOM_STEP 2.0
    @interface myView (UtilityMethods)
    - (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center;
    @end
    @implementation myView
    @synthesize imageScrollView, imageView;
    - (void)viewDidLoad
    {
    [super viewDidLoad];
    //Setting up the scrollView    
    imageScrollView.bouncesZoom = YES;
    imageScrollView.delegate = self;
    imageScrollView.clipsToBounds = YES;
    //Setting up the imageView
    imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage.png"]];
    imageView.userInteractionEnabled = YES;
    imageView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin);
    //Adding the imageView to the scrollView as subView
    [imageScrollView addSubview:imageView];
    imageScrollView.contentSize = CGSizeMake(imageView.bounds.size.width, imageView.bounds.size.height);
    imageScrollView.decelerationRate = UIScrollViewDecelerationRateFast;
    //UITapGestureRecognizer set up
    UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
    UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
    UITapGestureRecognizer *twoFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTwoFingerTap:)];
    [doubleTap setNumberOfTapsRequired:2];
    [twoFingerTap setNumberOfTouchesRequired:2];
    //Adding gesture recognizer
    [imageView addGestureRecognizer:doubleTap];
    [imageView addGestureRecognizer:twoFingerTap];
    [singleTap release];
    [doubleTap release];
    [twoFingerTap release];
    //calculate minimum scale to perfectly fit image width, and begin at that scale
    float minimumScale = 1.0;//This is the minimum scale, set it to whatever you want. 1.0 = default
    imageScrollView.maximumZoomScale = 4.0;
    imageScrollView.minimumZoomScale = minimumScale;
    imageScrollView.zoomScale = minimumScale;
    [imageScrollView setContentMode:UIViewContentModeScaleAspectFit];
    [imageView sizeToFit];
    [imageScrollView setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];
    }
    - (void)scrollViewDidZoom:(UIScrollView *)aScrollView {
    CGFloat offsetX = (imageScrollView.bounds.size.width > imageScrollView.contentSize.width)? 
    (imageScrollView.bounds.size.width - imageScrollView.contentSize.width) * 0.5 : 0.0;
    CGFloat offsetY = (imageScrollView.bounds.size.height > imageScrollView.contentSize.height)? 
    (imageScrollView.bounds.size.height - imageScrollView.contentSize.height) * 0.5 : 0.0;
    imageView.center = CGPointMake(imageScrollView.contentSize.width * 0.5 + offsetX, 
    imageScrollView.contentSize.height * 0.5 + offsetY);
    }
    - (void)viewDidUnload {
    self.imageScrollView = nil;
    self.imageView = nil;
    }
    #pragma mark UIScrollViewDelegate methods
    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return imageView;
    }
    #pragma mark TapDetectingImageViewDelegate methods
    - (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
    //zoom in
    float newScale = [imageScrollView zoomScale] * ZOOM_STEP;
    if (newScale > self.imageScrollView.maximumZoomScale){
    newScale = self.imageScrollView.minimumZoomScale;
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
    [imageScrollView zoomToRect:zoomRect animated:YES];
    }
    else{
    newScale = self.imageScrollView.maximumZoomScale;
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
    [imageScrollView zoomToRect:zoomRect animated:YES];
    }
    }
    - (void)handleTwoFingerTap:(UIGestureRecognizer *)gestureRecognizer {
    //two-finger tap zooms out
    float newScale = [imageScrollView zoomScale] / ZOOM_STEP;
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
    [imageScrollView zoomToRect:zoomRect animated:YES];
    }
    #pragma mark Utility methods
    - (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {
    CGRect zoomRect;
    //the zoom rect is in the content view's coordinates. 
    //   At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.
    //   As the zoom scale decreases, so more content is visible, the size of the rect grows.
    zoomRect.size.height = [imageScrollView frame].size.height / scale;
    zoomRect.size.width  = [imageScrollView frame].size.width  / scale;
    //choose an origin so as to get the right center.
    zoomRect.origin.x    = center.x - (zoomRect.size.width  / 2.0);
    zoomRect.origin.y    = center.y - (zoomRect.size.height / 2.0);
    return zoomRect;
    }

    Hecho!

    Básicamente lo que este código es añadir el imageView como subvista de la imageScrollView.

    A continuación, se añade la TapDetecting métodos de la clase para el scrollView, con el fin de reconocer el número de grifos – el pellizco al usuario hacer y añadir funcionalidades de zoom.

    Puede establecer el minimumScale de la imagen, si deja 1.0 la imagen debe mostrarse tal cual es (si se establece que es un poco menor que la que se está a escala), y el maximumZoomScale, le sugiero que deje a 4, está bien!

    Ahora, usted puede cargar imágenes mediante programación a partir de ahí.

    La última cosa que usted tiene que hacer es insertar un UIScrollView en el interior de su archivo xib y enlace a imageScrollView. Usted tendrá la imagen en el centro perfecto, puede hacer doble toque en él para hacer zoom, pellizcar para hacer zoom como se establece en el código.

    • Esto es como una receta de cocina. Los pasos de un derecho, pero no explican por qué debe hacerlo de esta manera. Esto ayudaría a él y a otros en el extremo más.
    • Esto es, básicamente, el código que estoy usando en mis aplicaciones. Voy a explicar
    • No me malinterpreten – el código es bueno, pero el por qué es importante también. De lo contrario, él no sabe cómo resolver un problema similar.
    • Seguro, y tienes razón! Sólo pensé que los comentarios de código se auto-explicativo! Gracias por darse cuenta de mí, sin embargo.
    • en la doble toque ,cuando se utiliza el zoom de una imagen se escala tanto como scrollview y sale de la pantalla .cómo resolverlo?
  3. 6

    Con Swift 4 y iOS 11, puede utilizar uno de los dos siguientes soluciones para resolver su problema.


    #1. El uso de inserciones

    ViewController.swift

    import UIKit
    final class ViewController: UIViewController {
    private let scrollView = ImageScrollView(image: UIImage(named: "image")!)
    override func viewDidLoad() {
    view.backgroundColor = .black
    view.addSubview(scrollView)
    scrollView.frame = view.frame
    scrollView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }
    }

    ImageScrollView.swift

    import UIKit
    final class ImageScrollView: UIScrollView {
    private let imageView = UIImageView()
    override var frame: CGRect {
    didSet {
    if frame.size != oldValue.size { setZoomScale() }
    }
    }
    required init(image: UIImage) {
    super.init(frame: .zero)
    imageView.image = image
    imageView.sizeToFit()
    addSubview(imageView)
    contentSize = imageView.bounds.size
    contentInsetAdjustmentBehavior = .never //Adjust content according to safe area if necessary
    showsVerticalScrollIndicator = false
    showsHorizontalScrollIndicator = false
    alwaysBounceHorizontal = true
    alwaysBounceVertical = true
    delegate = self
    }
    required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
    }
    //MARK: - Helper methods
    func setZoomScale() {
    let widthScale = frame.size.width / imageView.bounds.width
    let heightScale = frame.size.height / imageView.bounds.height
    let minScale = min(widthScale, heightScale)
    minimumZoomScale = minScale
    zoomScale = minScale
    }
    }
    extension ImageScrollView: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return imageView
    }
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
    let imageViewSize = imageView.frame.size
    let scrollViewSize = scrollView.bounds.size
    let verticalInset = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.height) / 2 : 0
    let horizontalInset = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width) / 2 : 0
    scrollView.contentInset = UIEdgeInsets(top: verticalInset, left: horizontalInset, bottom: verticalInset, right: horizontalInset)
    }
    }

    #2. El Uso De Diseño Auto

    ViewController.swift

    import UIKit
    final class ViewController: UIViewController {
    private let scrollView = ImageScrollView(image: UIImage(named: "image")!)
    override func viewDidLoad() {
    view.backgroundColor = .black
    view.addSubview(scrollView)
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
    override func viewDidLayoutSubviews() {        
    scrollView.setZoomScale()
    }
    }

    ImageScrollView.swift

    import UIKit
    final class ImageScrollView: UIScrollView {
    private let imageView = UIImageView()
    private var imageViewBottomConstraint = NSLayoutConstraint()
    private var imageViewLeadingConstraint = NSLayoutConstraint()
    private var imageViewTopConstraint = NSLayoutConstraint()
    private var imageViewTrailingConstraint = NSLayoutConstraint()
    required init(image: UIImage) {
    super.init(frame: .zero)
    imageView.image = image
    imageView.sizeToFit()
    addSubview(imageView)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageViewLeadingConstraint = imageView.leadingAnchor.constraint(equalTo: leadingAnchor)
    imageViewTrailingConstraint = imageView.trailingAnchor.constraint(equalTo: trailingAnchor)
    imageViewTopConstraint = imageView.topAnchor.constraint(equalTo: topAnchor)
    imageViewBottomConstraint = imageView.bottomAnchor.constraint(equalTo: bottomAnchor)
    NSLayoutConstraint.activate([imageViewLeadingConstraint, imageViewTrailingConstraint, imageViewTopConstraint, imageViewBottomConstraint])
    contentInsetAdjustmentBehavior = .never //Adjust content according to safe area if necessary
    showsVerticalScrollIndicator = false
    showsHorizontalScrollIndicator = false
    alwaysBounceHorizontal = true
    alwaysBounceVertical = true
    delegate = self
    }
    required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
    }
    //MARK: - Helper methods
    func setZoomScale() {
    let widthScale = frame.size.width / imageView.bounds.width
    let heightScale = frame.size.height / imageView.bounds.height
    let minScale = min(widthScale, heightScale)
    minimumZoomScale = minScale
    zoomScale = minScale
    }
    }
    extension ImageScrollView: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return imageView
    }
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
    let yOffset = max(0, (bounds.size.height - imageView.frame.height) / 2)
    imageViewTopConstraint.constant = yOffset
    imageViewBottomConstraint.constant = yOffset
    let xOffset = max(0, (bounds.size.width - imageView.frame.width) / 2)
    imageViewLeadingConstraint.constant = xOffset
    imageViewTrailingConstraint.constant = xOffset
    layoutIfNeeded()
    }
    }

    Fuentes:

    • Excelente! gracias por proporcionar los márgenes de opción.

Dejar respuesta

Please enter your comment!
Please enter your name here