iphone - sale - Diseño automático(Restricciones) Centre 2 vistas una al lado de la otra en una vista principal

iphone xs plus precio

Question

Estoy intentando descubrir cómo hacer esto con el diseño automático (iOS6) y las restricciones.

Básicamente tengo mi gran vista dividida en dos secciones en la parte inferior. Dentro de esas secciones (actualmente subvistas) tengo una vista de imagen y una etiqueta. Quiero centrarlos en ambos lados, con texto de longitud variable.

Mi cabeza está principalmente envuelta en el diseño automático, pero no estoy seguro de cuál sea el mejor enfoque para esto. Me inclino a pensar que no es posible en IB, pero está en el código.

Voy a seguir tratando de resolver esto, pero mientras tanto aquí está el ejemplo que intento crear.

Answer 1

¿Es esto lo que buscas?

Lo hice agregando una vista (llamada viewCenteredInLeftSection ) dentro de su leftSection , luego leftSection la imagen del reloj y la etiqueta como subvistas con estas restricciones:

• Haga que viewCenteredInLeftSection y CenterY de viewCenteredInLeftSection sean iguales a su supervista ( leftSection ).
• Haga que los clockImage superior, inferior e inicial de clockImage sean iguales a su supervista ( viewCenteredInLeftSection ).
• Haga que el borde posterior de la etiqueta sea igual a su supervista ( viewCenteredInLeftSection ).
• Haga que el clockImage de clockImage una distancia estándar del borde anterior de la label .

Tengo problemas para redimensionar iOS UIViews en Interface Builder, así que hice mi ejemplo para OS X, y pude hacerlo completamente en Interface Builder. Si tiene problemas para hacer las restricciones anteriores en el Interface Builder, avíseme y publicaré el código que los creará.

2014-08-26 Editar

Luda , aquí están los menús Pin y Alinear de Xcode 5, también disponibles en la barra de menú de Xcode:

A continuación se muestra mi ejemplo en Interface Builder. La vista azul es la "vista principal" de la pregunta original, la vista dada en la que la imagen y la etiqueta deben estar centradas.

viewCenteredInLeftSection la vista verde (que viewCenteredInLeftSection ) como una subvista de "vista principal". Luego lo destaqué y usé los menús Alinear "Centro horizontal en contenedor" y "Centro vertical en contenedor" para crear restricciones para definir su posición.

viewCenteredInLeftSection la imagen del reloj como una subvista de viewCenteredInLeftSection , con restricciones que definen su ancho y alto. viewCenteredInLeftSection imagen del reloj y viewCenteredInLeftSection , luego apliqué las restricciones usando Align> Leading Edges, Align> Top Edges y Align> Bottom Edges.

viewCenteredInLeftSection la etiqueta como una subvista de viewCenteredInLeftSection , posicionándola como la distancia de espacio estándar de Aqua desde la imagen del reloj. viewCenteredInLeftSection la etiqueta y viewCenteredInLeftSection , luego apliqué restricciones usando Align> Trailing Edges.

Esto fue mucho más fácil de crear con Interface Builder de Xcode 5 que con Xcode 4.

Answer 2

Descubrí una forma sin agregar otra vista:

 [aView addConstraint:[NSLayoutConstraint constraintWithItem:viewOnLeft attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationLessThanOrEqual toItem:aView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[aView addConstraint:[NSLayoutConstraint constraintWithItem:viewOnRight attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationLessThanOrEqual toItem:aView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

También puede cambiar las constantes para crear un espacio entre las vistas.

• constante de restricción de vista izquierda: -X
• constante de restricción de vista derecha: +X

Answer 3

Después de iOS 9, otra opción para lograr esto es usar Stack Views

Answer 4

Es posible que desee referir esto

Marcado porcentual

Básicamente, dice primero estar con el margen incorrecto y luego corregirlo wrt a su vista principal.

Trabajando con mi caso

Answer 5

Esto funciona bastante bien, pero requiere 2 spacer de UIView:

UIView *spacer1 = [[UIView alloc] init];
spacer1.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:spacer1];
UIView *spacer2 = [[UIView alloc] init];
spacer2.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:spacer2];
NSDictionary *views = NSDictionaryOfVariableBindings(spacer1, spacer2, imageView, label);
[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[spacer1(>=0)][imageView]-4-[label][spacer2(==spacer1)]|" options:0 metrics:nil views:views];
for (int i = 0; i < constraintsArray.count; i++) {
[self.view addConstraint:constraintsArray[i]];
}

Answer 6

Hay varias formas de hacer esto. En términos básicos, aquí está cómo centrar 1..n elementos, suponiendo que todos sus artículos tienen tamaños restringidos y no van a crecer .

1. Coloque 2 espaciadores en cada lado de sus artículos. Fije los espaciadores a los bordes parentales. Ancla tu primer y último elemento a los anclajes. Finalmente, asigne 1 espaciador para tener el ancho del otro espaciador. No necesita establecer explícitamente ningún tamaño de espaciador, ya que se resolverá .

   • spacer1 -> left = parent: ancho izquierdo = spacer2: ancho
   • spacer2 -> right = parent: right
   • yourFirstItem -> left = spacer1: right
   • yourLastItem -> right = spacer2: izquierda

2. Si los espaciadores no son lo suyo, y usted y usted tienen un número impar de elementos, centre el centro en el centro del elemento principal. Además, asegúrese de que los elementos primero y último no estén anclados a los bordes principales.

   • yourMiddleItem = centerX = parent: centerX
   • otherItems-> yourMiddleItem <-otherItems

3. Si los espaciadores no son lo suyo, y tiene un número par de elementos, centre los 2 bordes de los elementos internos en el centro del elemento principal. Además, asegúrese de que los elementos primero y último no estén anclados a los bordes principales.

   • leftMiddleItem -> right = parent: centerX
   • rightMiddleItem -> left = parent: centerX
   • otherItems-> leftMiddleItem rightMiddleItem <-otherItems

4. También puede centrar un marcador de posición invisible en el centro y anclarlo, pero igual tendrá que considerar una cantidad impar / par de elementos cuando constriñe, así que no recomiendo ese enfoque.

Answer 7

Me tomó un tiempo, pero descubrí una solución bastante sólida. Descubrí la misma solución que proporcionó John Sauer, pero no quería agregar otra vista para incluirlos.

La respuesta requiere tres pasos.

1) El ancho de mi subvista que contiene los otros dos, que llamaré leftInfoSection , debe estar determinado por su contenido. Eso elimina la necesidad de que tenga restricciones izquierdas y derechas a una supervista (u otra vista) para determinar su ancho. Esa es una verdadera clave con muchas de estas cosas: dejar que los niños definan los anchos.

2) Todavía tenía que tener una limitación principal en IB para que tuviera un diseño válido. (Necesitaba saber dónde colocar leftInfoSection horizontalmente). Conecta esa restricción con tu código para que puedas eliminarlo. Además de eso, tuve una restricción final GTE, el divisor vertical + 3.

3) La clave final es pensar con qué información debe trabajar (en código, ya que IB es limitado). Me di cuenta de que conocía el centro del divisor horizontal sobre mi sección, y que el centro de mi leftInfoSection sería el centro de esa barra horizontal menos 1/4 del ancho de la barra horizontal. Aquí está el código final para ambos lados izquierdo y derecho:

// remove the unwanted constraint to the right side of the thumbnail
[self.questionBox removeConstraint:self.leftInfoViewLeadingConstraint];
// calculate the center of the leftInfoView
CGFloat left = self.horizontalDividerImageView.frame.size.width/4 * -1;
// constrain the center of the leftInfoView to the horizontal bar center minus a quarter of it to center things
[self.questionBox addConstraint:[NSLayoutConstraint constraintWithItem:self.leftInfoView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.horizontalDividerImageView attribute:NSLayoutAttributeCenterX multiplier:1 constant:left]];
// remove the unwanted constraint to the right side of the questionBox
[self.questionBox removeConstraint:self.rightInfoViewTrailingConstraint];
// calculate the center of the rightInfoView
CGFloat right = left * -1;
// constrain the center of the rightInfoView to the horizontal bar center plus a quarter of it to center things
[self.questionBox addConstraint:[NSLayoutConstraint constraintWithItem:self.rightInfoView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.horizontalDividerImageView attribute:NSLayoutAttributeCenterX multiplier:1 constant:right]];

Resultado:

Además, IB puede ser muy molesto con la forma en que actualiza automáticamente las restricciones. Cuando estaba tratando de definir las restricciones iniciales y finales en las subvistas como 0, seguiría desconectando una u otra y haciendo una restricción a la supervista para definir el ancho. El truco consistía en dejar esa restricción indeseada en su lugar temporalmente, pero reducir su prioridad a 999. Luego pude crear, pero subvisar restricciones para definir el ancho.

Answer 8

Una solución a esto se considera en las conferencias universitarias de stanford sobre ios 7. Funciona maravillosamente. Se adjuntó esta solución. (Aquí sdfssfg ... cosa es etiqueta1 y efsdfg .... cosa es etiqueta2)