ios - app - best ipad games free

Creación de un diseño de iOS basado en porcentaje

Question

Estoy tratando de replicar un diseño que tengo actualmente en una aplicación de Android, pero no sé cómo hacerlo en iOS, especialmente debido a la altura del iPhone 5.

Sé cómo explicar esto en términos de "Android", pero durante los últimos días he intentado hacer esto en iOS, pero no logro que funcione.

La mejor manera de explicarlo:

1. Quiero dos diseños. El diseño superior debe ocupar un 40% y el inferior debe ocupar un 60%.
2. En el diseño superior, deben ser tres botones que llenen todo el espacio posible (esencialmente 1/3 del espacio)
3. En el diseño inferior, quiero un imageView, y luego un textView encima de eso.

Esta es una maqueta de pintura. ¿Es esto posible hacer en iOS? Siento que los diseños son mucho más difíciles de crear que los de Android.

Answer 1

Contrariamente a las otras respuestas, creo que al menos debes considerar el sistema de diseño automático. Fue creado para facilitar la creación de diseños predecibles como el que ha descrito. La reproducción automática se rige por las restricciones que usted coloca en las vistas en el diseño. Puedes crear esas restricciones visualmente o programáticamente. Visualmente, su primera vista se vería así:

Las líneas azules que ves son una serie de restricciones que especifican el espaciado entre botones, el espacio alrededor de los botones y las alturas y anchuras de los botones. Puede ver un par de restricciones que tienen un = en ellas. Seleccioné los tres botones y les asigné una restricción de "igual altura".

Hay una buena sintaxis de formato visual que te permite describir las restricciones como cadenas. Tómese un minuto para mirar el documento vinculado. No tardará mucho más que eso en aprender lo suficiente como para poder leer las cadenas. Por ejemplo, su diseño superior puede especificarse así:

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

La paréntesis ==button1 le dice al sistema de diseño que haga que button2 y button3 la misma altura que button1 . El - indica que se debe usar el espaciado estándar entre los botones; Puede especificar un espaciado diferente si lo desea. Para un espacio de 10 puntos, haga esto:

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

Una vez que tenga dicha cadena, puede convertirla en una restricción utilizando el método: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Algunas restricciones no se pueden especificar visualmente o con las cadenas descritas anteriormente. Las principales son aquellas en las que desea establecer una relación constante (pero desigual) entre dos vistas, al igual que con sus diseños superior e inferior. Desea que uno de ellos ocupe el 40% del espacio vertical disponible, y el otro que tome el 60%. Haga 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];

Eso le da una restricción que establece la altura de bottomView a 1.5 veces la altura de topView (que es lo que quiere, desde 60/40 = 1.5).

Si crea restricciones mediante programación, puede agregarlas a la vista apropiada cuando cree (o cargue) la jerarquía de vistas. El método de -viewDidLoad su controlador de -viewDidLoad es un buen lugar para hacerlo.

Answer 2

Es necesario agregar un par de restricciones para que funcione. Así que aquí hay una breve descripción de lo que necesita:

1. Necesitará restricciones de espaciado horizontal. Uno si para la vista superior, porque tiene cero distancia a la parte superior. Otro para la vista inferior, porque su distancia al fondo es cero. Una restricción más entre las dos vistas, porque también tienen cero espacio entre ellas.

2. El mismo principio se aplicará a los botones dentro de la vista superior. Coloque sus botones con el tamaño correcto dentro de la vista superior y agregue restricciones similares, pero ahora tiene tres elementos (en lugar de dos). Por lo tanto, las restricciones para el espaciado de cero en la parte superior, inferior y entre los botones.

Cuando agrega componentes a su vista, creará algunas restricciones para usted. Añadiendo una parte superior y la otra en la parte inferior, creará tanto el espacio en la parte superior como el espacio entre ellos. Para editarlos, simplemente vaya al inspector, quinta pestaña (regla) y verá la lista de restricciones. Por último, es posible que desee probar el menú de restricciones (no sé si hay un nombre conocido para esto). Está en la esquina inferior derecha del lienzo de Interface Builder. Vea la imagen:

Por favor, avíseme si necesita más ayuda.

Answer 3

Esto se puede hacer automáticamente cuando se usan guiones gráficos (es posible que tenga que cambiar uno o dos ajustes aquí y allá). Cuando cree su GUI, puede alternar entre los tamaños de pantalla (3.5 y 4 pulgadas) para asegurarse de que se vea bien en ambos. Vea la respuesta a esta pregunta .

También puedes ver este tutorial . Eso debería darle una idea de cómo trabajar con los diseños de GUI.

Answer 4

No sé sobre el uso de autolayout ya que no lo uso, pero en el código sin él, puede crear dos UIViews y establecer sus marcos en:

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 luego, en la vista superior, puede agregar los botones con marcos (suponiendo que la vista se llame 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));

Answer 5

Usando Xcode 6.0, ahora puede especificar el ancho o la altura proporcional en Interface Builder. Pasos para el porcentaje de altura de supervisión:

Mientras que tanto la vista secundaria como su vista de supervisión están seleccionadas, agregue una restricción de "igual altura" (o "igual ancho" si desea tener un ancho proporcional).

Luego cambie el "multiplicador" de la restricción que acaba de agregar a la proporción que necesita. Por ejemplo, para el 50%, cámbielo a 2.

Si desea especificar la vista interna como porcentaje de la vista supervisada, puede revertir los elementos en la restricción:

Ahora puedes usar un multiplicador de 0.5 (o cualquier otra proporción que necesites):

En su caso específico, puede definir una restricción de "altura igual" entre las 2 vistas secundarias y cambiar el multiplicador a 1.5 (la parte inferior es 1.5, el tamaño de la parte superior) o 0.6667 si los elementos se invierten.