ios - toolbar ionic color

Vista de centrado del diseño automático en el espacio restante(mediante programación)

Question

¿Cómo se pueden agregar restricciones de diseño automático programáticamente para centrar una vista en el espacio restante (ver imagen de ejemplo a continuación)?

Por el momento, agrego una vista de contenedor en la parte inferior y luego centrar la vista en la vista de contenedor, pero me preguntaba si había alguna otra solución sin necesidad de usar una vista de contenedor.

Answer 1

Necesita agregar una vista espaciadora para hacer esto.

Comencemos con algunas vistas:

Configuraré la vista rosa para ocupar el 70% superior de la vista raíz. Primero lo ancle a los cuatro bordes de la vista raíz:

Luego editaré la restricción del fondo de dos maneras. Primero, me aseguro de que el primer elemento sea la vista rosa, y segundo, establezco el multiplicador de 0.7. Luego actualizo el marco de la vista rosa:

A continuación, agregaré la vista espaciadora. No quiero que la vista del espaciador sea visible en el tiempo de ejecución, así que lo esconderé. Las vistas ocultas aún participan en el diseño. Antes de configurar restricciones, simplemente coloco el espaciador a la izquierda de la vista azul:

Ahora crearé restricciones para hacer que el espaciador se estire desde la parte inferior de la vista rosada hasta la parte inferior de la vista raíz. El ancho no importa, así que simplemente lo fijaré en el borde izquierdo de la supervista y lo adelgazaré:

Ahora estoy listo para configurar la vista azul. Primero le daré un tamaño fijo:

En segundo lugar lo centraré horizontalmente en la vista raíz:

Tercero, fijaré su centro vertical en el centro vertical del espaciador:

Esas son todas las restricciones que necesito. Actualizaré todos los cuadros para verificar:

Puedo probarlo usando Vista previa en el editor asistente:

Tenga en cuenta que la vista del espaciador no está visible en la vista previa, pero aún participa en el diseño.