Compañeros de desarrollo, estoy teniendo problemas con AutoLayout en Interface Builder (Xcode 5 / iOS 7). Es muy básico e importante, así que creo que todos deberían saber cómo funciona esto correctamente. Si esto es un error en Xcode, ¡es crítico!

Entonces, cada vez que tengo una jerarquía de vistas como esta me encuentro con problemas:

>UIViewController
>> UIView
>>>UIScrollView
>>>>UILabel (or any other comparable UIKit Element)

El UIScrollView tiene restricciones sólidas, por ejemplo, 50 px de cada lado (no hay problema). Luego agrego una restricción de espacio superior al UILabel (no hay problema) (e incluso puedo fijar el alto / ancho de la etiqueta, no cambia nada, pero debería ser innecesario debido al tamaño intrínseco de la etiqueta)

El problema comienza cuando agrego una restricción final a UILabel:

Por ejemplo, espacio final a: Supervisión igual: 25

Ahora ocurren dos advertencias, y no entiendo por qué:

A) Ambigüedad de tamaño de contenido desplazable (la vista de desplazamiento tiene altura / anchura de contenido desplazable ambiguo)

B) Vistas fuera de lugar (Etiqueta esperada: x = -67 Real: x = 207

Hice este ejemplo mínimo en un proyecto nuevo que puedes descargar y adjunté una captura de pantalla. Como puede ver, Interface Builder espera que la etiqueta se asiente fuera del límite de UIScrollView (el rectángulo punteado naranja). La actualización del marco de la etiqueta con la herramienta Resolver problemas lo mueve allí mismo.

Tenga en cuenta: si reemplaza el UIScrollView con un UIView, el comportamiento es el esperado (el marco de la etiqueta es correcto y de acuerdo con la restricción). Parece que hay un problema con UIScrollView o me estoy perdiendo algo importante.

Cuando ejecuto la aplicación sin actualizar el marco de la etiqueta como lo sugiere IB, está bien ubicado, exactamente donde se supone que debe estar y el UIScrollView es desplazable. Si actualizo el marco, la etiqueta está fuera de la vista y el UIScrollView no se desplaza.

¡Ayúdame, Obi-Wan Kenobi! ¿Por qué el diseño ambiguo? ¿Por qué la vista fuera de lugar?

Puede descargar el proyecto de muestra aquí y probar si puede descubrir qué está pasando: https://github.com/Wirsing84/AutoLayoutProblem

Así que lo resolví de esta manera:

1. Dentro del UIScrollView complemento a UIView(podemos llamarlo contentView);

2. En esto contentView, establezca los márgenes superior, inferior, izquierdo y derecho en 0 (por supuesto, del scrollViewcual es el superView); Establecer también alinea el centro horizontal y verticalmente ;

Terminado .

Ahora puede agregar todos sus puntos de vista en el que contentView, y el contentSizede la scrollViewse ajustará automáticamente de acuerdo con el contentView.

Actualizar:

Algunos casos especiales están cubiertos por este video publicado por @Sergio en los comentarios a continuación.

Este error me llevó un tiempo rastrear, inicialmente intenté fijar el tamaño del ScrollView pero el mensaje de error dice claramente "tamaño del contenido". Me aseguré de que todo lo que anclaba desde la parte superior de ScrollView también estuviera fijado en la parte inferior. De esa forma, ScrollView puede calcular la altura de su contenido al encontrar la altura de todos los objetos y restricciones. Esto resolvió la altura del contenido ambiguo, el ancho es bastante similar ... Inicialmente tenía la mayoría de las cosas X centradas en ScrollView, pero también tenía que fijar los objetos a un lado de ScrollView. No me gusta esto porque el iPhone6 ​​podría tener una pantalla más ancha, pero eliminará el error 'ancho de contenido ambiguo'.

Xcode 11+

La forma más sencilla de usar autolayout:

1. Agregue UIScrollViewy 0,0,0,0anclarlo a la supervista (o el tamaño deseado)
2. Agregue UIViewScrollView, fíjelo 0,0,0,0a los 4 lados y céntrelo horizontallyy vertically.
3. En el inspector de tamaño, cambio bottomy align center Yprioridad a 250. (para cambio de desplazamiento horizontal trailingy align center X)
4. Agregue todas las vistas que necesita en esta vista. No olvide establecer la restricción inferior en la vista más baja.
5. Seleccione el UIScrollView, seleccione el inspector de tamaño y deseleccione Content Layout Guides.

Es la respuesta a mi pregunta con respuesta propia UIScrollView + Vista centrada + Tamaño de contenido desplazable ambiguo + muchos tamaños de iPhone .

¡Pero también cubre completamente su caso!

Entonces, aquí está el estado inicial para el caso más simple:

1. scrollView con 0 restricciones a todos los bordes
2. Botón centrado horizontal y vertical con restricciones de ancho y altura fijas
3. Y, por supuesto, advertencias molestas Has ambiguous scrollable content width y Has ambiguous scrollable content height.

Todo lo que tenemos que hacer es:

• Agregue 2 restricciones adicionales, por ejemplo "0" para el espacio final y / o inferior para nuestra vista (mire el ejemplo en la captura de pantalla a continuación).

Importante: debe agregar restricciones finales y / o inferiores . No es "líder y superior", ¡no funciona!

Puede verificarlo en mi proyecto de ejemplo , que muestra cómo solucionar este problema.

PD

Según la lógica, esta acción debería causar "restricciones conflictivas". ¡Pero no!

No sé por qué funciona y cómo Xcode detecta qué restricción tiene más prioridad (porque no tengo la prioridad de estas restricciones explícitamente). Estaré agradecido si alguien explica, por qué funciona en los comentarios a continuación.

Xcode 11+, Swift 5

Si se pregunta por qué todas las respuestas ya no funcionan, asegúrese de haber anclado la vista de contenido (la que ha colocado dentro de la vista de desplazamiento) a la Guía de diseño de contenido de la vista de desplazamiento y NO a la Guía de diseño de marco.

Los bordes de la vista de contenido (inicial, posterior, superior, inferior) no deben fijarse como los principales en la imagen: a la Guía de diseño de cuadros

pero así: a la Guía de diseño de contenido.

Y luego la mayoría de las respuestas funcionarán para usted.

El enfoque más simple ahora es así:

1. Poner vista de desplazamiento en la vista raíz
2. Ancla todos los lados de la vista de desplazamiento a la supervista
3. Tome otra UIView (la llamará vista de contenido) y colóquela dentro de la vista de desplazamiento
4. Fije todos los lados de la vista de contenido para desplazarse por la Guía de diseño de contenido de la vista
5. Fije el ancho de la vista de contenido para que sea igual a la Guía de diseño del marco de la vista de desplazamiento
6. Arregle la altura de la vista de contenido de la forma que desee (en el ejemplo a continuación utilicé una restricción de altura constante)

En general, su estructura en la implementación más simple se verá así

UIViewDebe crear una como una subvista de la UIScrollViewque se describe a continuación:

• UIViewController
• UIView 'Vista principal'
  • UIScrollView
    • UIView 'Vista de contenedor'
      • [Tu contenido]

El segundo paso es hacer las UIScrollViewrestricciones. Hice esto con las restricciones superior, inferior, inicial y final de su superView.

Luego agregué las restricciones para el contenedor de UIScrollViewy aquí es donde comienza el problema. Cuando coloca las mismas restricciones (arriba, abajo, al principio y al final), el Guión gráfico muestra un mensaje de advertencia:

"Tiene ancho de contenido desplazable ambiguo" y "Tiene altura de contenido desplazable ambiguo"

Continúe con las mismas restricciones anteriores, y solo agregue las restricciones Equal Heighty Equal Widtha su Vista de contenedor en relación con la Vista principal y no con su UIScrollView. En otras palabras, las restricciones de la Vista de contenedor están vinculadas a la UIScrollViewsupervista de.

Después de eso, no tendrá advertencias en su Guión gráfico y puede continuar agregando las restricciones para sus subvistas.

Tuve el mismo problema. Desmarca esta casilla de verificación. Ya que está configurando el tamaño del contenido en el código.

Finalmente lo descubrí, espero que sea más fácil de entender.

A menudo puede omitir esa advertencia agregando una vista de UIV base a la vista de desplazamiento como una "vista de contenido", como se mencionó, y que tenga el mismo tamaño que su vista de desplazamiento y, en esta vista de contenido, configure estos 6 parámetros.

Como puede ver, ¡necesita 6 parámetros totales! Lo cual ... en circunstancias normales, está duplicando 2 restricciones, pero esta es la forma de evitar este error del guión gráfico.

Sé que puedo llegar tarde, pero la próxima solución resuelve este tipo de problemas sin código adicional , solo usando guiones gráficos:

Para su vista de contenido, debe establecer restricciones para los espacios iniciales / finales / superiores / inferiores para la vista de desplazamiento y esto no cambiará el marco de la vista de contenido , de esta manera:

Por supuesto, debe crear restricciones adicionales para la vista de contenido para que la vista de desplazamiento pueda conocer el tamaño del contenido. Por ejemplo, ajuste la altura fija y el centro x.

Espero que esto ayude.

Para mí, agregar un contentViewrealmente no funcionó como se sugiere. Además, crea una sobrecarga debido a la vista agregada (aunque no considero que esto sea un gran problema). Lo que funcionó mejor para mí fue simplemente desactivar la verificación de ambigüedad para mi scrollView. Todo se presenta bien, así que creo que está bien en casos simples como el mío. Pero tenga en cuenta que si hay otras restricciones para su scrollViewdescanso, el Generador de interfaces no le advertirá más al respecto.

Eche un vistazo a este tutorial realmente rápido y preciso sobre cómo hacer que la vista de desplazamiento funcione y se pueda desplazar completamente con el diseño automático. Ahora, lo único que todavía me deja perplejo es por qué el tamaño del contenido de la vista de desplazamiento siempre es más grande de lo necesario.

http://samwize.com/2014/03/14/how-to-use-uiscrollview-with-autolayout/

Vea a continuación: vista de contenido en vista de desplazamiento vertical y horizontal centralizada. tiene un error de ambigüedad, asegúrese siempre de que dos agregados en la vista de desplazamiento desde su vista de contenido es 1). espacio de botón al contenedor. 2) espacio final a restricción que se resalta en la captura de pantalla,

estas restricciones significan en el desplazamiento cuánto se puede desplazar después de la altura o el ancho de la vista de contenido.

Te puede ayudar.

Resolví este tipo de problema para mi vista usando "Resolver problemas de diseño automático"> "Agregar restricciones faltantes" para la Vista seleccionada

Las siguientes dos restricciones resuelven mi problema:

trailing = Stack View.trailing - 10
bottom = Stack View.bottom + 76

en el que: final, inferior son los finales, inferior de UIScrollView

Usando contentView ( UView) como en el interior de contenedores UIScrollView, se adhieren a los bordes ( top, bottom, trailing, leading) de supervista ( UIScrollView) y contentViewdeben tener equalwidthy equalheighta supervista. Esas son restricciones. Y llamada de método:

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    self.scrollView.contentSize = self.contentView.frame.size;
}

Problemas resueltos para mí.

Enfoque Swift 4+:

1) Establezca los márgenes superior, inferior, izquierdo y derecho de UIScrollView en 0

2) Dentro del UIScrollView, agregue un UIView y establezca los márgenes superior, inferior, inicial y posterior a 0 (igual a los márgenes de UIScrollView).

3) La parte más importante es establecer el ancho y la altura, donde la restricción de altura debe tener una prioridad baja .

private func setupConstraints() {

    // Constraints for scrollView
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Constraints for containerView
    containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

    let heightConstraint = containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
    heightConstraint.priority = UILayoutPriority(rawValue: 250)
    heightConstraint.isActive = true
}

La respuesta de @Matteo Gobbi es perfecta, pero en mi caso, la vista de desplazamiento no se puede desplazar, elimino " alinear centro Y " y agrego " altura> = 1 ", la vista de desplazamiento se desplazará

Las personas que luchan con uiscrollview que no se desplazan solo configuran la restricción inferior de su vista de contenido con el diseño inferior de su última vista (que está dentro de su vista de contenido). No olvide eliminar la restricción Y central.

Descanse todas las restricciones son las mismas que se definieron anteriormente. La vista de desplazamiento solo se preocupa por obtener la altura máxima de su vista de contenido, y la estamos configurando como la restricción inferior de la última vista, lo que significa que la vista de desplazamiento cambiará automáticamente su compensación de contenido.

En mi caso, la última vista era UILable con ninguna propiedad de líneas = 0 (que ajusta automáticamente su altura dependiendo de su contenido) para que aumente dinámicamente la altura de uilable y, finalmente, nuestra área desplazable aumenta debido a que el diseño inferior de uilable está alineado con la parte inferior de nuestra vista de contenido, lo que obliga a scrollview a aumentar su desplazamiento de contenido.

Hice un video en
youtube Scroll StackViews usando solo Storyboard en Xcode

Creo que 2 tipos de escenarios pueden aparecer aquí.

La vista dentro de scrollView -

1. no tiene ningún contenido intrínseco Tamaño (p UIView. ej. )
2. tiene su propio contenido intrínseco Tamaño (p UIStackView. ej. )

Para una vista desplazable verticalmente en ambos casos, debe agregar estas restricciones:

1. 4 restricciones desde arriba, izquierda, abajo y derecha.

2. Ancho igual a vista de desplazamiento (para dejar de desplazarse horizontalmente)

No necesita ninguna otra restricción para las vistas que tienen su propia altura de contenido intrínseco.

Para las vistas que no tienen una altura de contenido intrínseca, debe agregar una restricción de altura. La vista se desplazará solo si la restricción de altura es mayor que la altura de scrollView.

import UIKit

class ViewController: UIViewController {

    //
    let scrollView: UIScrollView = {

        let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        return sv
    }()

    let lipsumLbl: UILabel = { // you can use here any of your subview

        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.text = """
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend nisi sit amet mi aliquet, ut efficitur risus pellentesque. Phasellus nulla justo, scelerisque ut libero id, aliquet ullamcorper lectus. Integer id iaculis nibh. Duis feugiat mi vitae magna tincidunt, vitae consequat dui tempor. Donec blandit urna nec urna volutpat, sit amet sagittis massa fringilla. Pellentesque luctus erat nec dui luctus, sed maximus urna fermentum. Nullam purus nibh, cursus vel ex nec, pulvinar lobortis leo. Proin ac libero rhoncus, bibendum lorem sed, congue sapien. Donec commodo, est non mollis malesuada, nisi massa tempus ipsum, a varius quam lorem vitae nunc.

        Cras scelerisque nisi dolor, in gravida ex ornare a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae nisl id erat sollicitudin accumsan sit amet viverra sapien. Etiam scelerisque vulputate ante. Donec magna nibh, pharetra sed pretium ac, feugiat sit amet mi. Vestibulum in ipsum vitae dui vehicula pulvinar eget ut lectus. Fusce sagittis a elit ac elementum. Fusce iaculis nunc odio, at fermentum dolor varius et. Suspendisse consectetur congue massa non gravida. Sed id elit vitae nulla aliquam euismod. Pellentesque accumsan risus dolor, eu cursus nibh semper id.

        Vestibulum vel tortor tellus. Suspendisse potenti. Pellentesque id sapien eu augue placerat dictum. Fusce tempus ligula at diam lacinia congue in ut metus. Maecenas volutpat tellus in tellus maximus imperdiet. Integer dignissim condimentum lorem, id luctus nisi maximus at. Nulla pretium, est sit amet mollis eleifend, tellus nulla viverra dolor, ac feugiat massa risus a lectus. Pellentesque ut pulvinar urna, blandit gravida ipsum. Nullam volutpat arcu nec fringilla auctor. Integer egestas enim commodo, faucibus neque ac, rutrum magna. Vivamus tincidunt rutrum auctor. Cras at rutrum felis. Fusce elementum lorem ut pharetra venenatis.
        """
        lbl.textColor = .darkGray
        lbl.font = UIFont.systemFont(ofSize: 16)
        lbl.numberOfLines = 0
        return lbl
    }()

    //======================================================================//
    //
    // MARK:- viewDidLoad
    //
    override func viewDidLoad() {
        super.viewDidLoad()

        setupViews()
        setupAutoLayout()
    }

    func setupViews() {

        title = "ScrollView Demo"
        view.backgroundColor = .white
        view.addSubview(scrollView)
        scrollView.addSubview(lipsumLbl)
    }

    func setupAutoLayout() {

        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        lipsumLbl.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        lipsumLbl.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        lipsumLbl.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        lipsumLbl.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        lipsumLbl.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    }
}

Salida:

En mi caso, recibí el problema de tamaño de contenido incorrecto y ambigüedad de tamaño de contenido en iPad, pero estaba funcionando en el caso de iPhone. He realizado los siguientes cambios en el guión gráfico para resolver el problema.

1. Agregue scrollview en UIView y agregue restricciones iniciales, superiores, finales e inferiores a 0,0,0,0.
2. Establezca la altura de la vista de desplazamiento según los requisitos para, por ejemplo. 100
3. Agregue UIView a la vista de desplazamiento y agregue restricciones iniciales, superiores, finales e inferiores a 0,0,0,0 y alinee las restricciones de centro (X) y centro (Y).
4. Anule la selección de "Guías de diseño de contenido" en el inspector de tamaño de la vista de desplazamiento.

El desplazamiento vertical

1. Agregue un UIScrollView con restricciones 0,0,0,0 a la supervista.
2. Agregue una vista UIView en ScrollView, con restricciones 0,0,0,0 a la supervista.
3. Agregue la misma restricción de ancho para UIView a UIScrollView.
4. Añadir altura a UIView.
5. Agregue elementos con restricciones a la vista UIView.
6. Para el elemento más cercano al fondo, asegúrese de que tenga una restricción al fondo de UIView.

Lo que hice fue crear una vista de contenido separada como se muestra aquí.

La vista de contenido es de forma libre y puede tener todas las subvistas agregadas con sus propias restricciones en relación con contentView.

El UIScrollView se agrega al controlador de vista principal.

Programáticamente agrego el contentView que está vinculado a través de IBOutlet a la clase y establezco el contentView de UIScrollView.

Recibía el mismo error ... he hecho lo siguiente

1. Ver (Supervisión)
2. ScrollView 0,0,600,600
3. UIView dentro de ScrollView: 0,0,600,600
4. UIView contiene vista de imagen, etiqueta

Ahora agregue líder / final / superior / inferior para scrollView (2) y luego UIView (3).

Seleccione Ver (1) y Ver (3) establecer igual altura y peso .. se resolvió mi problema.

He hecho el video que ayudará:

https://www.youtube.com/watch?v=s-CPN3xZS1A

[probado en XCode 7.2 y para iOS 9.2]

Lo que suprimió los errores y advertencias de Storyboard para mí fue establecer el tamaño intrínseco de la vista de desplazamiento y la vista de contenido (en mi caso, una vista de pila) en Placeholder . Esta configuración se encuentra en el inspector de tamaño en Storyboard. Y dice: establecer un tamaño de contenido intrínseco en tiempo de diseño solo afecta a una vista mientras se edita en Interface Builder. La vista no tendrá este tamaño de contenido intrínseco en tiempo de ejecución.

Entonces, supongo que no nos vamos a equivocar al configurar esto.

Nota: En el guión gráfico, he anclado todos los bordes de scrollview a la supervista y todos los bordes de stackview a la vista de desplazamiento. En mi código, configuré las traducciones de AutoresizingMaskIntoConstraints como falsas tanto para la vista de desplazamiento como para la vista de pila. Y no he mencionado un tamaño de contenido. Cuando la vista de pila crece dinámicamente, las restricciones establecidas en el guión gráfico aseguran que la pila sea desplazable.

La advertencia del guión gráfico me estaba volviendo loco y no quería centrar las cosas horizontal o verticalmente solo para suprimir la advertencia.

Si alguien está teniendo un comportamiento en el que nota la barra de desplazamiento en los desplazamientos correctos pero el contenido no se mueve, este hecho probablemente valga la pena considerar:

También puede usar restricciones entre el contenido de la vista de desplazamiento y los objetos fuera de la vista de desplazamiento para proporcionar una posición fija para el contenido de la vista de desplazamiento, haciendo que ese contenido parezca flotar sobre la vista de desplazamiento.

Eso es de la documentación de Apple . Por ejemplo, si accidentalmente fijó su Etiqueta / Botón / Img / Vista superior a la vista fuera del área de desplazamiento (¿Tal vez un encabezado o algo justo encima de la Vista de desplazamiento?) En lugar de la Vista de contenido, congelaría toda su Vista de contenido en su lugar.

Como se mencionó en las respuestas anteriores, debe agregar una vista personalizada dentro de la vista de desplazamiento:

Agregue todas sus subvistas a la vista de contenido. En algún momento verá que una vista de contenido de desplazamiento tiene una advertencia de tamaño de contenido ambigua, debe seleccionar la vista de contenido y hacer clic en el botón "Resolver problemas de diseño automático" (en la esquina inferior derecha del diseño IB), y seleccione "Agregar falta "restricciones".

A partir de ahora, cuando ejecute el proyecto, la vista de desplazamiento actualizará automáticamente su tamaño de contenido, sin necesidad de código adicional.

Solo tiene que asegurarse de que haya una manera de hacer una línea continua de restricciones desde la parte superior hasta la parte inferior de la vista de desplazamiento. [-XXX]

En mi caso, una vista de desplazamiento de desplazamiento horizontal, también necesitaba agregar restricciones de ancho y alto para cada elemento secundario de la vista de desplazamiento, aunque la nota técnica de Apple no lo dice.

Establezca el tamaño de ViewController (el que tiene el UIScrollView) en Forma libre en el inspector de tamaño en Interface Builder y todo debería funcionar.

Configuración de forma libre en el inspector de tamaño en Interface Builder para el controlador UIViewcontroller

Si todavía tiene problemas con UIScrollView, simplemente desactive las Guías de diseño de contenido (seleccione su ScrollView en xcode Interface Builder -> elija el inspector de tamaño en el panel derecho -> deseleccione 'Guías de diseño de contenido') O intente estos pasos: xcode 11 diseños de vista de desplazamiento - Puede ser útil para un nuevo estilo de diseño. Funciona bien en macOS 10.15.2, Xcode 11.3.1, para 05.02.2020

ver captura de pantalla

Usando Autolayout

Agregue su vista de desplazamiento dentro de una vista bien definida y luego agregue la vista de pila dentro de la vista de desplazamiento

Agregue las restricciones superior, izquierda, derecha, inferior, centro X y centro Y desde la vista de desplazamiento y la vista de pila a sus súper vistas relevantes

Asegúrese de que las restricciones estén vinculadas desde la vista de pila a la supervista correcta (vista de desplazamiento) ya que la configuración predeterminada actual es agregar una restricción Alinear superior y no una de Espacio superior.