UIImageView/UIScrollView forzando una relación de aspecto fija para adaptarse a la pantalla

Question

Estoy haciendo una aplicación simple para el iPad que consiste en una imagen gigante que puede acercarse/alejarse y navegar.

Esta imagen se coloca dentro de UIImageView, que luego se coloca dentro de UIScrollView.

La navegación y el zoom funcionan 100% bien; sin embargo, la imagen se carga en una relación de aspecto fija para adaptarse a la pantalla, y nunca cambiará (incluso cuando amplía).

Tengo la sensación de que Interface Builder está estableciendo algunas propiedades que no conozco, pero he intentado todo lo que se me ocurre para solucionarlo.

El problema:

Cuando la aplicación inicialmente cargas, el contenido dentro de la UIScrollView es de nuevo automáticamente de tamaño para caber exactamente la pantalla iPad por tener su relación de aspecto changed./fixed; la imagen real es gigante (mucho más grande que la resolución del iPad). Esta proporción de aspecto escalado permanece incluso cuando se acerca la imagen, y hace que la imagen parezca estirada.

No importa lo que intente, no puedo evitar que el iPad vuelva a escalar automáticamente mi imagen. Simplemente quiero que la aplicación comience con mi imagen mostrada normalmente (100% de zoom) en el iPad, con la parte que actualmente cabe en la pantalla del iPad como la esquina superior izquierda de la imagen.

Lo que he tratado de solucionarlo:

He intentado cambiar el contenido en modo UIImageView's en Interface Builder a "superior izquierda". Esto pareció funcionar perfectamente, pero luego me di cuenta de que el UIScrollView no le permitía desplazarse por la imagen más allá de la porción mostrada inicialmente (arriba a la izquierda). Puede hacer un acercamiento en la parte superior izquierda y desplazarse, pero nunca más allá de lo que se mostró inicialmente en la pantalla.

Código:

Aquí está el código que estoy usando para configurar los puntos de vista. imageScrollView es el UIScrollView, y imageView es el UIImageView. Ambos son IBOutlets.

// Set the needed attributes of the imageView 
    [imageView setImage:[UIImage imageNamed: @"TestImage.png"]]; 
    imageView.userInteractionEnabled = YES; 

    // Set a bunch of the imageScrollView attributes. 

    // calculate minimum scale to perfectly fit image width, and begin at that scale 
    float minimumScale = [imageScrollView frame].size.width/[imageView frame].size.width; 
    [imageScrollView setMinimumZoomScale:minimumScale]; 
    [imageScrollView setZoomScale:1]; 
    [imageScrollView setMaximumZoomScale:10]; 
    [imageScrollView setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)]; 
    [imageScrollView setScrollEnabled:YES]; 
    [imageScrollView setUserInteractionEnabled:YES]; 
    imageScrollView.clipsToBounds = YES; 
    imageScrollView.bounces = FALSE; 
    imageScrollView.bouncesZoom = FALSE; 

También tienen dos UIGestureRecongizers de manejar grifo de zoom, pero no creen que ellos son el problema. Cuando los comento, nada cambia.

Cualquier ayuda sería extremadamente apreciado.

Answer 1

lo fijé!

Para cualquier otra persona tienen el mismo problema, así es como me fijo el código:

La causa del error fue que Interface Builder estaba forzando a los puntos de vista de utilizar la ScaleToFillcontentMode.Establecer el ScrollView's contentMode en UIViewContentModeScaleAspectFit no funcionó por sí solo, ya que el imageView todavía se estaba distorsionando.

La solución:

El código siguiente tuvo que ser añadido al final de la instalación de la UIScrollView y UIImageView (dentro del método viewDidLoad()):

[imageScrollView setContentMode:UIViewContentModeScaleAspectFit]; 
    [imageView sizeToFit]; 
    [imageScrollView setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)]; 

Explicación:

Primero, el UIScrollView'scontentMode se establece en AspectFit, como sugirió @Mike. A continuación, se invoca sizeToFit() en imageView para anular las preconfiguraciones molestas de Interface Builder y para hacer que la imagen tenga el tamaño correcto.

La última línea es importante. Usted debe configurar el contentSize para el ScrollView DESPUÉS de cambiar el tamaño del imageView. De lo contrario, el ScrollView creerá que la imagen sigue siendo del tamaño de la pantalla del iPad y, por lo tanto, no creerá que haya nada para desplazarse. Establecer el tamaño de ScrollViewdespués de cambiar el tamaño del ImageView y cambiar el ScrollView'scontentMode hace que el ScrollView el tamaño real de la imagen.

Espero que haya ayudado!

Gracias por la ayuda de Mike, que me consiguió en el camino correcto :)

• Alex

Answer 2

Dado que el imageView es el contenido de la vista de desplazamiento, intente cambiar el modo de contenido ScrollView's al UIViewContentModeScaleAspectFit. Intente llamar al setNeedsDisplay en el imageview.

Answer 3

Para aquellos que luchan para fijar aspecto de la imagen en modo horizontal durante el uso de UICollectionView mientras que necesitan ser imagen pantalla completa.

En su - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath haga lo siguiente:

CGFloat newWidth = self.view.bounds.size.width; //if iPad in landscape and fullscreen value is 1024 
CGFloat newHeight = image.size.height/image.size.width * newWidth; 

cell.clipsToBounds = YES; 
cell.imageView.frame = CGRectMake(0, 0, newWidth, newHeight); 
cell.imageView.contentMode = UIViewContentModeScaleAspectFill; 
cell.imageView.image = image; 
cell.scrollView.contentSize = cell.imageView.frame.size; 

La clave es hacer ver la imagen del marco del tamaño correcto, manteniendo la relación de aspecto correcta.

Answer 4

Este código trabajó para mí: (Swift)

override func viewDidLayoutSubviews() { 
    super.viewDidLayoutSubviews() 

    let imgView = UIImageView(image: UIImage(named: "MyImage")) 
    imgView.contentMode = .ScaleAspectFit 
    var size = imgView.frame.size 
    size.height = size.height/size.width * scrollView.frame.width 
    size.width = scrollView.frame.width 
    imgView.frame.size = size 
    scrollView.addSubview(imgView) 
    scrollView.contentSize = size 
}