Entiendo la edad de los Puntales y los Resortes método de alineación, el tamaño y la distribución de puntos de vista en el Interface Builder. Sin embargo, me parece no puede averiguar cómo distribuir uniformemente vistas con diseño automático con Xcode 5. Hay una manera de hacerlo usando Xcode 4, pero esa opción se ha ido.

Tengo 7 botones dispuestos en una pila vertical. En una de 3.5″ diseño, se ve muy bien. Cuando me vista previa de la pantalla en el 4″ diseño, todos los botones quedan apretadas, y hay una gran cantidad de espacio por debajo del último botón.

Quiero permanecer a la misma altura, pero quiero que el espacio entre ellos para ser capaz de flex por lo que puede difundirse a través de la pantalla.

Manantiales en el Diseño Automático: Distribuir los puntos de vista de manera uniforme, con las limitaciones, en Xcode 5

He sido capaz de llegar a la altura de los botones a la flexión y llenar el espacio, pero que no es mi comportamiento deseado. Me gustaría aprender a utilizar Diseño Automático para sustituir a mi viejo Resortes de la conducta, pero me parece que no puede encontrar alguna manera de hacerlo a través de Interface Builder.

Yo estoy bien con el botón de la parte superior, ya sea ser un fijo en el espacio desde el borde superior o proporcional espacio desde el borde superior, lo mismo para el botón de la parte inferior y el borde inferior. Aquellos que son menos importantes para mí, yo estoy bien con cualquiera.

Pero realmente necesito averiguar cómo distribuir uniformemente el espacio extra entre cada uno de los elementos en la vista.

  • En realidad, si usted realmente desea puede ir a la derecha en el uso de resortes y amortiguadores. Su guión gráfico puede tener diseño automático desactivado. O, si desea utilizar tanto en diseño automático y manantiales-y-struts juntos, hacen una punta (.xib archivo) con un superview que contiene los botones, ajustar la punta no utilizar el auto de diseño, configurar los resortes y amortiguadores; luego, en el código de carga de la punta, tire de la superview, y la inserta en su interfaz. – Sin embargo, he respondido a su pregunta, es decir, cómo hacerlo con diseño automático.
  • posibles duplicados de Uniformemente el espacio de múltiples puntos de vista dentro de un contenedor de vista
InformationsquelleAutor Kenny Wyland | 2014-01-01

2 Comentarios

  1. 84

    EDITAR tenga en cuenta que en iOS 9 esta técnica no será necesario, porque un UIStackView llevará a cabo la distribución automática. Voy a añadir otra respuesta explicando cómo funciona.

    Cómo Realizar una Distribución uniforme Mediante el diseño Automático

    La forma más sencilla de hacer esto en el Interface Builder solo (en lugar de la construcción de las restricciones en el código) es el uso de «espaciador» vistas:

    1. Posición de la parte superior y los botones de la parte inferior absolutamente.

    2. Coloque el espaciador entre las vistas de todos los botones. El uso de restricciones a la posición horizontal (centrado horizontal es el más sencillo) y a establecer sus anchos.

    3. Hacer restricciones entre cada uno de los botones y el espaciador de la vista de arriba y de abajo, con una Constante de 0.

    4. Ahora seleccione todas las espaciador de puntos de vista y establecer sus alturas son iguales.

    La primera captura de pantalla me muestra la configuración del IB:

    Manantiales en el Diseño Automático: Distribuir los puntos de vista de manera uniforme, con las limitaciones, en Xcode 5

    Tengo deliberadamente no corregida por el «fuera de lugar vistas» porque quiero que se vea lo que se ve mientras yo estoy diseñando las restricciones. Aquí está el resultado, tanto de 4 pulgadas y una pantalla de 3.5 pulgadas:

    Manantiales en el Diseño Automático: Distribuir los puntos de vista de manera uniforme, con las limitaciones, en Xcode 5

    He dejado el espaciador vistas de negro, sólo para mostrar cómo esta técnica funciona, pero, por supuesto, en la vida real sería hacerlos transparentes y por lo tanto invisible! Por lo que el usuario ve sólo sus botones, uniformemente distribuidas en la altura de la pantalla.

    La razón para el uso de esta técnica es que, aunque la noción de igualdad se realiza la distribución de los valores que usted está pidiendo, las limitaciones pueden aplicar la igualdad sólo entre los aspectos de puntos de vista; por lo tanto necesitamos las vistas adicionales (el espaciador puntos de vista), así que tenemos cosas que podemos hacer de la igualdad a otras cosas (aquí, la altura de la estrella de vistas).

    Otros Enfoques

    Obviamente, un enfoque más flexible es asignar las restricciones en el código. Esto puede sonar desalentador, pero hay un montón de código de terceros por ahí para ayudar a usted, como este tipo de cosas.

    Por ejemplo, si tenemos una (posiblemente invisible) superview cuya altura actúa como un límite máximo para dictar la distribución vertical de los cuatro botones, se puede anclar sus tops para el centro vertical de la que superview con un constant de 0 pero un multiplier de 0.000001, 0.666667, 1.33333, y 2.0 respectivamente (si tenemos cuatro botones); ahora los botones estancia en vertical distribuido incluso como el superview cambios de tamaño en respuesta a la altura de la pantalla o lo que sea. [En Xcode 5.1, será posible establecer que en el Interface Builder, pero en las primeras versiones de Xcode no es posible.]

    • Estoy descontenta con ambas opciones, pero eso es culpa de Apple, no el tuyo. No he necesitado usar espaciadores ya que estaban haciendo todas las páginas web con tablas y 1 px de los gifs transparentes. suspiro Gracias por la respuesta completa.
    • Yo generalizada una solución a este problema en mi costumbre UITabBar/UITabBarController de reemplazo. Sólo tienes que comprobar las pruebas de integración para mi Auto Restricciones de Diseño de generación. El proyecto está en Github, GGTabBar
    • Ugh, estuvo de acuerdo. Buena solución en virtud de la limitación de Autodiseño circunstancias, pero caray, se siente como que estamos de vuelta en la década de los 90 diseñar sitios web con tablas. UIToolbar ha espaciador flexible de los elementos, que es lo que se necesita aquí, ¿por qué no podemos tener como un elemento de diseño?
    • Esta solución, los usuarios de los multiplicadores y no requiere espaciadores: stackoverflow.com/a/25898949/202711
  2. 10

    En iOS 9 /Xcode 7 este problema va a ser trivialmente resuelto en IB. Simplemente seleccione los botones (o lo que se desea distribuir verticalmente) y seleccione Editor > Incrustar En > Pila de Vista. A continuación, sólo tiene que configurar la pila de vista:

    • Proporcionar restricciones que la posición y el tamaño de la pila en la propia vista. Por ejemplo, el pin de los cuatro bordes de la pila de ver a los cuatro bordes de su superview.

    • Conjunto de la pila de vista de sus atributos. En este caso queremos eje Vertical, alineación de Relleno, Igual Espaciamiento de distribución.

    ¡Eso es todo! Sin embargo, usted puede ser curioso acerca de cómo funciona esto, debido a que todavía es posible hacer la misma cosa manualmente en el código. Una pila de vista realiza la distribución, no mediante la inserción de espaciador vistas, sino que se inserta espaciador guías. Un guía (un UILayoutGuide) es un objeto ligero que se comporta como una vista para efectos de las restricciones de diseño, pero no es un punto de vista y por lo tanto no tiene que ser invisible y no tiene la sobrecarga de una vista.

    Para ilustrar, lo voy a hacer en el código de lo que la pila de vista está haciendo. Suponer tenemos cuatro puntos de vista para distribuir verticalmente. Les damos las restricciones para todo, pero su distribución:

    • Todos ellos tienen una altura absoluta restricciones

    • Su izquierda está anclada a la superview la izquierda, y su derecho se fija a la superview del derecho

    • La parte superior de la vista superior se fija a la superview la parte superior y la parte inferior vista parte inferior está fijado para el superview la parte inferior

    Ahora, presumir que tenemos referencias de los cuatro puntos de vista como views, una matriz. Entonces:

    let guides = [UILayoutGuide(), UILayoutGuide(), UILayoutGuide()]
    for guide in guides {
        self.view.addLayoutGuide(guide)
    }
    NSLayoutConstraint.activateConstraints([
        //guide heights are equal
        guides[1].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
        guides[2].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
        //guide widths are arbitrary, let's say 10
        guides[0].widthAnchor.constraintEqualToConstant(10),
        guides[1].widthAnchor.constraintEqualToConstant(10),
        guides[2].widthAnchor.constraintEqualToConstant(10),
        //guide left is arbitrary, let's say superview margin
        guides[0].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
        guides[1].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
        guides[2].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
        //bottom of each view is top of following guide
        views[0].bottomAnchor.constraintEqualToAnchor(guides[0].topAnchor),
        views[1].bottomAnchor.constraintEqualToAnchor(guides[1].topAnchor),
        views[2].bottomAnchor.constraintEqualToAnchor(guides[2].topAnchor),
        //top of each view is bottom of preceding guide
        views[1].topAnchor.constraintEqualToAnchor(guides[0].bottomAnchor),
        views[2].topAnchor.constraintEqualToAnchor(guides[1].bottomAnchor),
        views[3].topAnchor.constraintEqualToAnchor(guides[2].bottomAnchor)
    ])
    

    (Obviamente, yo podría hacer que el código más guapo y el más corto mediante bucles, pero tengo deliberadamente desenrolla los lazos de la claridad, de modo que usted puede ver el patrón y la técnica).

Dejar respuesta

Please enter your comment!
Please enter your name here