iOS => UIScrollView

Crear un UIScrollView

Cree una instancia de UIScrollView con un CGRect como marco.

Rápido

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

C objetivo

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

Tamaño de contenido de la vista de desplazamiento

La propiedad contentSize debe establecer en el tamaño del contenido desplazable. Esto especifica el tamaño del área desplazable. El desplazamiento es visible cuando el área desplazable, es decir, contentSize es más grande que el tamaño del marco UIScrollView .

Con Autolayout:

Cuando el contenido de la vista de desplazamiento se configura mediante la reproducción automática, debe tener un tamaño explícito tanto vertical como horizontalmente y tener los 4 bordes fijados a la vista de desplazamiento que contiene. De esa manera, contentSize se calcula automáticamente en función del contenido de la vista de desplazamiento y también se actualiza cuando se modifica el diseño del contenido.

A mano:

Rápido

scrollview.contentSize = CGSize(width: 640, height: 800)

C objetivo

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView con AutoLayout

Pasos simples para usar scrollview con autolayout.

Crear un nuevo proyecto con aplicación de vista única.
Seleccione el controlador de vista predeterminado y cambie su tamaño de pantalla a iPhone-4 pulgadas desde el inspector de atributos.
Agregue una vista de desplazamiento a la vista del controlador de vista de la siguiente manera y establezca el color de fondo en azul

Añadir restricciones en él como se muestra en la imagen de abajo

Lo que esto hará es, simplemente pegar cada borde de la vista de desplazamiento a la vista del controlador de vista

Escenario 1:

Ahora digamos que nuestro contenido es enorme, y queremos que se desplace horizontal y verticalmente.

Para esto,

Agregue un UIView a la vista de desplazamiento del marco (0,0,700,700). Le permite darle un color de fondo naranja para identificarlo de manera diferente.

Luego viene la parte importante, la necesitamos para desplazarnos horizontal y verticalmente.

Seleccione la vista naranja y agregue las siguientes restricciones

Déjame explicarte lo que hicimos en el paso anterior.

Fijamos la altura y el ancho a 700.
Establecemos un espacio al final para scrollview = 0 que le dice a scrollview que el contenido se puede desplazar horizontalmente.
Configuramos el espacio inferior para scrollview = 0, que le dice a scrollview que el contenido se puede desplazar verticalmente.

Ahora ejecuta el proyecto y comprueba.

Escenario 2: Consideremos un escenario en el que sabemos que el ancho del contenido será igual al ancho del desplazamiento, pero la altura es mayor que la vista del desplazamiento.

Siga los pasos para desplazar el contenido verticalmente.

Eliminar la restricción de ancho en el caso anterior.
Cambie el ancho de la vista naranja para que coincida con el ancho de la vista de desplazamiento.
Presione la tecla Ctrl y arrastre desde la vista naranja a la vista de desplazamiento y agregue restricciones de ancho igual .

¡¡¡Y hecho!!! Simplemente ejecute y verifique si se desplaza verticalmente

Escenario 3:

Ahora queremos desplazarnos solo horizontalmente y no verticalmente.

Sigue los pasos para desplazarte horizontalmente por el contenido.

Deshaga todos los cambios para lograr restricciones como se indica a continuación (es decir, restaurar las restricciones originales que lograron el desplazamiento vertical y horizontal )

Verifique el marco de la vista naranja, que debería ser (0,0,700,700)
Eliminar la restricción de altura de la vista naranja.
Cambie la altura de la vista naranja para que coincida con la altura de la vista de desplazamiento.
Presione la tecla Ctrl y arrastre desde la vista naranja a la vista de desplazamiento y agregue una restricción de alturas iguales .

¡¡¡Y hecho!!! Simplemente ejecute y verifique si se desplaza verticalmente

Desplazar contenido con diseño automático habilitado

Este proyecto es un ejemplo autocontenido hecho completamente en el Interface Builder. Debes poder trabajar en 10 minutos o menos. Luego puedes aplicar los conceptos que aprendiste a tu propio proyecto.

Aquí solo uso UIView s pero pueden representar cualquier vista que te guste (es decir, botón, etiqueta, etc.). También elegí el desplazamiento horizontal porque las capturas de pantalla del guión gráfico son más compactas para este formato. Sin embargo, los principios son los mismos para el desplazamiento vertical.

Conceptos clave

El UIScrollView solo debe usar una subvista. Esta es una 'Vista UIV' que sirve como vista de contenido para contener todo lo que deseas desplazar.
Haga que la vista de contenido y el padre de la vista de desplazamiento tengan alturas iguales para el desplazamiento horizontal. (Anchos iguales para desplazamiento vertical)
Asegúrese de que todo el contenido desplazable tenga un ancho definido y esté anclado en todos los lados.

Iniciar un nuevo proyecto

Puede ser solo una aplicación de vista única.

Guión gráfico

En este ejemplo, haremos una vista de desplazamiento horizontal. Seleccione el Controlador de vista y luego elija Forma libre en el Inspector de tamaño. Hacer el ancho 1,000 y la altura 300 . Esto solo nos da el espacio en el guión gráfico para agregar contenido que se desplazará.

Añadir una vista de desplazamiento

Agregue un UIScrollView y fije los cuatro lados a la vista raíz del controlador de vista.

Añadir una vista de contenido

Agregue un UIView como una subvista a la vista de desplazamiento. Esta es la clave. No intente agregar muchas subvistas a la vista de desplazamiento. Sólo agregue un solo UIView . Esta será su vista de contenido para las otras vistas que desea desplazar. Fije la vista de contenido a la vista de desplazamiento en los cuatro lados.

Alturas iguales

Ahora en el Esquema del documento, Comando haga clic en la vista de contenido y en la vista principal de la vista de desplazamiento para seleccionarlos. Luego, establezca las alturas para que sean iguales (Control </ kbd arrastre desde la Vista de contenido a la Vista de desplazamiento>). Esto también es clave. Debido a que nos estamos desplazando horizontalmente, la vista de contenido de la vista de desplazamiento no sabrá qué tan alta debe ser a menos que la configuremos de esta manera.

Nota:

Si estuviéramos haciendo que el contenido se desplace verticalmente, entonces estableceríamos el ancho de la vista de contenido para que sea igual al ancho del elemento primario de la vista de desplazamiento.

Agregar contenido

Agrega tres UIView s y dales todas las restricciones. Utilicé márgenes de 8 puntos para todo.

Restricciones:

Vista verde: fija los bordes superior, izquierdo e inferior. Hacer el ancho 400.
Vista roja: fija los bordes superior, izquierdo e inferior. Hacer el ancho 300.
Vista morada: pin los cuatro bordes. Haz el ancho cualquiera que sea el espacio restante (268 en este caso).

Establecer las restricciones de ancho también es clave para que la vista de desplazamiento sepa cuán amplia será la vista de contenido.

Terminado

Eso es todo. Puede ejecutar su proyecto ahora. Debe comportarse como la imagen de desplazamiento en la parte superior de esta respuesta.

Estudio adicional

Activar / Desactivar desplazamiento

La propiedad scrollEnabled almacena un valor Boolean que determina si el desplazamiento está habilitado o no.
Si el valor de esta propiedad es verdadero / SÍ, el desplazamiento está habilitado, de lo contrario no. El valor predeterminado es true

Rápido

scrollview.isScrollEnabled = true

C objetivo

scrollview.scrollEnabled = YES;

Zoom In / Out UIImageView

Crear instancia de UIScrollView

let scrollview = UIScrollView.init(frame: self.view.bounds)

Y luego establecer estas propiedades:

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate

Para acercar y alejar la imagen, debemos especificar la cantidad que el usuario puede acercar y alejar. Hacemos esto configurando los valores de las propiedades minimumZoomScale y maximumZoomScale de la vista de desplazamiento. Ambos están configurados en 1.0 por defecto.

Y zoomScale a 1.0, que especifica el factor de zoom para el zoom mínimo y máximo.

Para admitir el zoom, debemos establecer un delegado para su vista de desplazamiento. El objeto delegado debe cumplir con el protocolo UIScrollViewDelegate . Esa clase delegada debe implementar el método viewForZoomingInScrollView() y devolver la vista a zoom.

Modifique su ViewController como se muestra

class ViewController: UIViewController, UIScrollViewDelegate

Luego agregue la siguiente función de delegado a la clase.

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

Ahora crea la instancia de UIImageView

Hacer esta variable como variable de clase

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

Y luego agregarlo a scrollview

scrollView?.addSubview(imageView)

Referencia

Detectar cuándo UIScrollView terminó de desplazarse con métodos delegados

scrollViewDidEndDecelerating: esto le dice al delegado que la vista de desplazamiento ha terminado de desacelerar el movimiento de desplazamiento.

C objetivo:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

Rápido:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

Restringir la dirección de desplazamiento

Puede restringir las direcciones a las que el usuario puede desplazarse utilizando el siguiente código:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

Cada vez que el usuario se desplaza en el eje x, el desplazamiento del contenido de scrollView se establece en 0.
Obviamente, puede cambiar de x s a y s y, por lo tanto, bloquear la dirección para que sea solo horizontal.

También debe asegurarse de colocar este código en el método delegado scrollViewDidScroll(_ scrollView: UIScrollView) . De lo contrario, no conseguirás que funcione.

Además, asegúrese de haber importado el UIScrollViewDelegate en su declaración de clase, así:

class ViewController: UIViewController, UIScrollViewDelegate

... y configura el delegado de scrollView a self en algún método como viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

iOS
UIScrollView

Buscar..

Crear un UIScrollView

Tamaño de contenido de la vista de desplazamiento

ScrollView con AutoLayout

Desplazar contenido con diseño automático habilitado

Conceptos clave

Iniciar un nuevo proyecto

Guión gráfico

Terminado

Estudio adicional

Activar / Desactivar desplazamiento

Zoom In / Out UIImageView

Ahora crea la instancia de UIImageView

Detectar cuándo UIScrollView terminó de desplazarse con métodos delegados

C objetivo:

Rápido:

Restringir la dirección de desplazamiento