Estoy tratando de reproducir una presentación que tengo actualmente en una aplicación de Android, pero no sé cómo hacerlo en iOS, especialmente porque el que determinaba la altura del iPhone 5.

Sé cómo explicar esto en «Android», pero he estado tratando durante los últimos días para hacer esto en iOS pero no acabo de conseguir que funcione.

Mejor manera de explicarlo:

  1. Quiero dos diseños. La parte superior de diseño debe tomar hasta un 40% y la parte inferior debe tomar hasta 60%.
  2. En la parte superior de diseño, que debe ser de tres botones que llenan todo el espacio posible (Esencialmente 1/3 del espacio)
  3. En la parte inferior de diseño, quiero un imageView y, a continuación, un textView en la parte superior de eso.

Esta es una pintura de la maqueta. Es esto posible en iOS? Me siento de que los diseños son mucho más difíciles de crear que en android.

La creación de un porcentaje basado en iOS diseño

  • Es usted el uso de Auto-Diseño en IB? O tal vez saber sobre Resortes y amortiguadores?
  • Yo no he escuchado acerca de «Resortes y amortiguadores». Podría implementar que el uso de la interface builder?
  • disanji.net/iOS_Doc/#documentation/DeveloperTools/Conceptual/…
  • Tenga en cuenta que los resortes y amortiguadores es la vieja manera de hacerlo, Apple quiere que usted use Auto de Diseño, de aquí en adelante, así que si vas a invertir tu tiempo es mejor hacerlo de aprendizaje de Diseño Automático. Y sí, es horrible para el uso, pero es mucho más fácil con la próxima versión de Xcode.
  • ¿Qué es cada uno de los «contenedor» llamada en iOS? (el 40% y el 60% de los contenedores?) Sólo vacío de vista? Estoy acostumbrado a llamar a ellos layouts en Android.
  • Usted por lo general se refieren a ellos como subvistas de la vista principal. En la aplicación de los términos que sería UIViews, o de una subclase de los mismos (tales como UIScrollView), que se añaden a la raíz (principal) de la vista, ya sea a través de la interfaz de generador o a través de programación a través de la addSubview: método de la raíz de la vista.
  • Bien, creo que me estoy acostumbrando. Es allí una manera de dividir el subvistas hasta 60/40?

InformationsquelleAutor EGHDK | 2013-08-11

5 Comentarios

  1. 71

    Con Xcode 6.0, ahora se puede especificar proporcional de la anchura o la altura en el Interface Builder.
    Pasos para el porcentaje de la altura de superview:

    Mientras tanto el niño y su superview son seleccionados, agregar un «ser igual a la altura» de la restricción (o «igualdad de ancho» si usted desea tener un ancho proporcional).

    La creación de un porcentaje basado en iOS diseño

    A continuación, cambiar el «multiplicador» de la restricción que acaba de agregar a la proporción que usted necesita. Por ejemplo, al 50%, el cambio a 2.

    Si quieres especificar el interior como porcentaje de la superview, puede invertir los elementos de la obligación:

    La creación de un porcentaje basado en iOS diseño

    Ahora usted puede utilizar un multiplicador de 0.5 (o cualquier otro porcentaje que se necesita):

    La creación de un porcentaje basado en iOS diseño

    En su caso específico, se puede definir un «ser igual a la altura» de la restricción de entre el 2 niños de puntos de vista y cambiar el multiplicador de 1,5 (la parte inferior en 1,5 el tamaño de la parte superior) o 0.6667 si los artículos son a la inversa.

    • Hola, he encontrado que si selecciono tanto niño y superview, todos los elementos en el ‘Pin’ sería desactivada, ¿cómo puede usted seleccionar el «ser igual a la altura» de la restricción y el añadido? Tal vez me pierda de algo y por favor, la figura me? gracias.
    • ¿cómo usted igual a super vista ??
    • Para crear una restricción que cruza varias vistas en la vista de jerarquía, es generalmente más fácil el Control de arrastre de la vista para el contenedor de vista en la Interfaz del Generador de vista de esquema. En la restricción de superposición que aparece, configure la requerida restricciones para la vista. developer.apple.com/library/ios/documentation/UserExperience/…
    • ¿Cómo puedo utilizar este método para especificar la posición proporcional para un artículo? Por ejemplo: un elemento que se coloca siempre en el 20% de los dispositivos de la altura de la parte superior.
    • Potente, yo siempre evitar el establecimiento de los valores como la verdad, no sé lo que es. Nunca pensó que hemos seleccionado varios elementos, a continuación se hace relación para nosotros para crear cosas como esta.
    • Por qué no existe una opción para «Proporcional Anchura/Altura»? La configuración de «anchos Iguales» no es intuitivo y se mete los puntos de vista que intenta posición.
    • La posición de una vista de un cierto por ciento de la parte de arriba, me gustaría poner una «restricción vertical en un recipiente» y establezca su multiplicador a algún valor que es menor que 1 (o más de 1 si el posicionamiento es desde la parte inferior).

  2. 37

    Contrario a las otras respuestas, creo que debería al menos considerar el diseño automático del sistema. Fue creado para hacer más fácil construir predecible diseños como el que he descrito. El diseño automático está gobernado por restricciones que se colocan en los puntos de vista en el diseño. Usted puede crear las restricciones visualmente o mediante programación. Visualmente, su primer punto de vista sería algo como esto:

    La creación de un porcentaje basado en iOS diseño

    Las líneas azules que ver que hay una serie de restricciones que especificar el inter-botón espaciado, el espacio alrededor de los botones, y la altura y el ancho de los botones. Se puede ver un par de las limitaciones que tienen un = en ellos, he seleccionado los tres botones y les dio un «ser igual a la altura» de la restricción.

    Hay un buen formato visual de la sintaxis que le permite describir las limitaciones como las cadenas. Tome un minuto para mirar el documento vinculado — no va a tomar mucho más tiempo para aprender lo suficiente de que usted puede leer las cadenas. Por ejemplo, la parte superior de diseño pueden ser especificados como esto:

    V:[button1]-[button2(==button1)]-[button3(==button1)]

    El paréntesis ==button1 dice que el sistema de diseño para hacer button2 y button3 la misma altura que button1. El - indica que el estándar de separación no debe ser utilizado entre los botones, se puede especificar un espaciado diferente si lo desea. Por 10 puntos, espaciado, hacer esto:

    V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

    Una vez que usted tiene una cadena, puede convertirse en una restricción usando el método: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

    Algunas restricciones pueden no estar especificado, ya sea visualmente o con las cadenas descrito anteriormente. Las principales son aquellos en los que se desea establecer una constante (pero desigual) de la relación entre los dos puntos de vista, como con su parte superior e inferior de las presentaciones. Que quiero uno de esos para llevar hasta el 40% del espacio vertical disponible, y el otro a tomar un 60%. Hacer esto usando el método: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. Por ejemplo:

    NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                         attribute:NSLayoutAttributeHeight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:topView
                                                        multiplier:1.5
                                                          constant:0];

    Que le da una restricción que establece la altura de bottomView a 1,5 veces la altura de topView (que es lo que quieres, ya que 60/40 = 1.5).

    Si usted cree restricciones mediante programación, puede agregarlos a la vista apropiada cuando se crea (o de carga) a la vista de jerarquía. La vista del controlador de -viewDidLoad método es un buen lugar para hacerlo.

    • Quiero usar autodiseño aunque. ¿Estoy diciendo que no quiero utilizar en cualquier lugar? Estoy confundido? Por favor, hágamelo saber si me dicen que en algún lugar. Mi punto, es que quiero utilizar el auto de diseño, y no se utiliza el código para lograr esto
    • También, los botones que se explica a utilizar en el diseño automático es bueno y está bien, pero sigo teniendo problemas en hacer 40/60 en el interface builder.
    • Además, los botones deben tomar hasta 1/3 de la vista, la configuración de ellos igual a la otra todavía no la tiene que rellenar el punto de vista de que están anidadas en.
    • Diseño automático no significa ningún código, significa que la configuración de las restricciones que especifican cómo los puntos de vista pueden ser establecidos. (¿Cuál es la razón detrás de su no exigencia del código?) Algunos de los que usted puede hacer visualmente, pero con algunas restricciones (como su 40/60 split) sólo se puede hacer con el código. Como para los botones: si tienes 3 botones y nada de espacio entre o alrededor de ellos, estableciendo que todas sean de la misma altura que significa que va a tomar cada uno hasta 1/3 del espacio. Así que acaba de establecer las alturas iguales y las limitaciones de espacio a 0.
    • Bueno, esto es sólo difícil de entender viniendo de android que algo como 40/60 sólo puede hacerse en el código, pero yo estaba buscando una respuesta sólida sobre la que. Algunas personas eran darme las respuestas que usted podría aparentemente lograr 40/60 con diseño automático.
    • Que puede lograr un 40/60 ruptura con diseño automático, pero, de nuevo, de diseño automático no significa ningún código. Diseño automático significa que el marco puede exponer sus puntos de vista de forma automática en tiempo de ejecución de acuerdo a las restricciones que usted especifique. A pesar de las muchas restricciones que pueden ser especificadas visualmente, otros no, y sin embargo todos son parte de la auto sistema de diseño. Trate de no estancarnos en las comparaciones con Android-Android es prácticamente obligados a hacer las cosas de forma proporcional debido a la amplia variedad de tamaños de pantalla que tiene que lidiar con. Medición absoluta es más factible en iOS gracias a la disminución de los tamaños de pantalla.
    • Todavía estoy tratando de hacer el 1/3 botones espaciado, pero no puedo ir a trabajar. Ocupan 1/3 del espacio, pero quiero tomar hasta 1/3 del espacio disponible en la vista. Es eso posible?
    • No estoy seguro que entiendo que el último comentario completamente, pero parece que tenemos una restricción en uno de los botones que se establece la altura. Compruebe cada uno de los botones para una restricción como la altura es igual a 42′ y el cambio de altura de más de 5′ (o algún pequeño valor mínimo). Yo era capaz de hacer que su totalidad en el editor visual.
    • Bueno, voy a tratar de nuevo.
    • Sí, traté de establecer un pequeño valor min, y puedo seleccionar todos los tres botones y haga clic en «alturas igual», pero se quedan del mismo tamaño, y no llenar la vista.
    • permítanos continuar esta discusión en el chat
    • +1 se Puede especificar una restricción tal como su c en Xcode 5.1.1 Interface Builder? Me gustaría limitar un UIButton‘s tirados a un 10% de su superview ancho.
    • No, usted necesita para crear restricciones a lo que sucede en el código como he descrito en la respuesta. No dejes que eso te detenga, aunque … no es difícil en absoluto.
    • ha ‘hacer diseños más fácil»….oh que era bueno para una risa.

  3. 2

    No sé acerca del uso de autodiseño como yo no lo uso, pero en el código sin ella, puede crear dos UIViews y establecer sus marcos para:

    CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
    CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

    Y, a continuación, en la parte superior de la vista, usted puede agregar los botones con marcos (suponiendo que la vista se denomina view1):

    CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
    CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
    CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
  4. 1

    Usted necesita añadir un par de limitaciones para hacer que funcione. Así que aquí está una breve descripción de lo que usted necesita:

    1. Tendrá espaciado horizontal de las restricciones. Si para la parte superior de la vista, porque tiene cero de la distancia a la parte superior. Otro para la parte inferior de la vista, debido a su distancia a la parte inferior es cero. Uno de los más restricción entre los dos puntos de vista, porque ellos también han cero espaciado entre uno y otro.

    2. El mismo principio se aplica a los botones dentro de la vista superior. Poner los botones con el tamaño correcto en el interior de la parte superior de la vista y agregar las limitaciones similares, pero ahora tiene tres elementos (en lugar de dos). Así que las limitaciones para el cero de la separación de la parte superior, inferior y entre los botones.

    Al agregar componentes a la vista, se va a crear algunas restricciones para usted. Agregar uno a uno superior y el otro en la parte inferior, se va a crear tanto una separación de la parte superior y el espaciamiento entre cada uno de los otros. Para editarlos, sólo tiene que ir a inspector, quinta ficha (gobernante) y podrás ver la lista de restricciones. Por último, puede que desee para tratar de restricciones de menú (no sé si hay un nombre conocido para esto). Es en la esquina inferior derecha de la Interfaz del Generador de lienzo. Ver la imagen:

    La creación de un porcentaje basado en iOS diseño

    Por favor, hágamelo saber si usted necesita más ayuda.

    • Primero haga clic en el XIB o de la historia de la junta de archivo y desactive la casilla de auto-diseño de la casilla de verificación para que pueda ver estas opciones 🙂
    • Eso es correcto, @MahmoudFayez . Se me olvidó mencionar que. Gracias.
    • Pensé automático de tamaño no estaba disponible en diseño automático?
    • Como por la recompensa «me gustaría saber cómo hacer esto para iOS 6+ (Sin resortes y amortiguadores. Solo auto-layout), y me gustaría saber cómo hacer esto en el interface builder.»
    • Usted puede deshabilitar el diseño Automático como Mahmoud dijo. Creo que es la manera más fácil para el que viene de otro SDK como Android. Pero para hacer eso con Autodiseño, básicamente, para cada UIView/UIButton, vas a necesitar los siguientes restricciones: 1. El espaciamiento Horizontal para ambos UIViews set a 0 (super vista). Uno más ajustado a cero la distancia entre uno y otro (el espacio a la vista, en lugar de super view). 2. El mismo principio para los botones sobre el espaciado de la parte superior, inferior y a cada uno de los otros.
    • Usted puede elaborar sobre esto en su respuesta? «1. El espaciamiento Horizontal para ambos UIViews set a 0 (super vista). Uno más ajustado a cero la distancia entre uno y otro (el espacio a la vista, en lugar de super view). 2. El mismo principio para los botones sobre el espaciado de la parte superior, inferior y a cada uno de los otros» me pierdo después de decir «Uno más ajustado a cero…»
    • Dame un par de minutos y voy a publicar con información más detallada.
    • Donde lo voy a hacer en el interface builder?
    • He añadido más detalles a mi respuesta. Por favor, hágamelo saber si usted necesita información más detallada.
    • permítanos continuar esta discusión en el chat

  5. 0

    Esto se puede hacer automáticamente cuando el uso de Storyboards (puede que tenga que cambiar una configuración o dos aquí y allá). Cuando usted crea su interfaz gráfica de usuario, usted puede alternar entre los tamaños de pantalla (3.5 y 4 pulgadas) para asegurarse de que se ven bien en ambos. Véase la respuesta a esta pregunta.

    También se puede ver este tutorial. Eso te dará una idea sobre cómo trabajar con la interfaz gráfica de usuario diseños.

    • Esta respuesta no es lo suficientemente específica como para ser útil, para esta pregunta, en mi humilde opinión. En particular, la solicitada «40%/60%» relación NO es fácil de hacer uso de Storyboards. Ni los dos enlaces en la respuesta a arrojar luz sobre cómo lograr que (AFAIK, basado en una breve mirada).
    • Hm, verdad @ToolmakerSteve. Yo no sé en qué estaba pensando cuando he publicado esto… hace 4 años.

Dejar respuesta

Please enter your comment!
Please enter your name here