Xamarin.forms: Alineación horizontal del contenido de la vista de título

Creado en 22 dic. 2018  ·  28Comentarios  ·  Fuente: xamarin/Xamarin.Forms

Descripción

No se puede centrar horizontalmente el contenido en TitleView.
Estoy feliz de ver esta función en XF, pero quiero ofrecer algunas ideas basadas en este problema sobre cómo hacer que esta función sea más útil.
No podemos centrar el contenido de la vista personalizada horizontalmente en relación con la pantalla del dispositivo, depende de si hay un botón Atrás o no, los elementos correctos o no, etc.
the issue

Pasos para reproducir

  1. Cree dos páginas, con una vista de título personalizada idéntica, agregue un elemento de la barra de herramientas en la segunda página
  2. Mire el comportamiento de la vista de título de la página 1.
  3. Navegue a la página 2, mire de nuevo.

Comportamiento esperado

El contenido de TitleView debe estar correctamente centrado.
Como podemos ver, el punto central horizontal lógico del contenido de TitleView nunca estará centrado por el punto central horizontal de la pantalla del teléfono. Entonces, no podemos colocar allí ninguna imagen o contenido dinámico para crear algo así (imagen aleatoria de Internet):
...

Comportamiento real

Contenido de TitleView centrado de forma incorrecta. No podemos controlar eso.

Información básica

  • Versión con problema: >3.1
  • Última versión buena conocida: <= 3.1
  • ID: VS2017
  • Marcos de destino de la plataforma:

    • iOS:
  • Paquetes Nuget:
    Formularios Xamarin 3.4.0

  • Dispositivos afectados:
    Todo iOS

    capturas de pantalla

Enlace de reproducción

Hice un breve ejemplo, puede seguir este enlace para verlos en código, basado en el ejemplo Xamarin.Forms.ControlGallery de XF en esta rama : simplemente clone y ejecute la aplicación iOS, luego seleccione Vista de título y luego BDF: TitleView Centered , combine con el elemento de la barra de herramientas de alternar

Creé algunos ejemplos teóricos tratando de ofrecer una posible solución sobre cómo resolverlo. En general, necesitamos corregir el tamaño y la posición del contenedor de TitleView para permitir centrar su contenido.
...

Modo por defecto -

El comportamiento del View Container es el mismo que ahora.
Default Mode

Modo Fantasma - (si es posible implementar esto)

El contenedor de vista debe usar todo el espacio de la barra de navegación. Podemos desbordar algunos controles por su contenido, pero está bien para algunas situaciones.
Ghost Mode

Modo unificado

El tamaño del contenedor de vista debe tomar todo el espacio libre con respecto a los elementos de la barra de navegación y anclarse al centro de la barra.
Unified Mode

titleview high impact proposal-open enhancement ➕

Comentario más útil

Ese es un problema grave para nosotros, actualmente estamos esperando que lo solucionen.

Todos 28 comentarios

Creo que es mejor cambiar el tipo de [Mejora] a problema porque es más problema que la mejora

bastante En este momento, si tiene otros elementos en la barra de navegación, hace que la apariencia sea indeseable y no valga la pena usarla.

Ese es un problema grave para nosotros, actualmente estamos esperando que lo solucionen.

@PureWeen ¡Hola!
¿Tiene alguna actualización sobre esto?
Es bloqueador para nosotros actualizar la versión XF para alrededor de 5 aplicaciones

¡Gracias!

Este sigue siendo un problema en Shell y uno que no tiene una solución razonable que yo sepa. Los hacks de margen negativo son propensos a errores de cálculo. Subiendo el impacto.

Hola,
Increíble trabajo por todos lados!! Sin embargo, para este control, "TitleView" parece haberse cerrado en todas partes, ¿este problema ya no se solucionará? Simplemente no se puede usar en absoluto si no está centrado. ¿Es una reescritura? También puse un margen negativo como truco, pero me pregunto si mi truco funciona en todos los dispositivos... ¿Alguien puede decirnos qué hacer en este? Muchas gracias

Recientemente me topé con este mismo problema en un proyecto de Xamarin iOS y no hay forma de resolverlo usando los elementos de la interfaz de usuario proporcionados por iOS. Si usa UIBarButtonItem s en su UINavigationItem el sistema operativo no le dirá qué tan anchos son después de representarlos, por lo que no hay forma de establecer restricciones o tamaños en el Title vista para compensar.
Al final, abandoné todo e implementé mi propia barra de herramientas usando un contenedor simple UIView y UIButton para los botones de la barra de herramientas, con un UILabel en el medio (adecuadamente centrado, porque era fácil).
Lo que necesitamos de Xamarin Forms en este momento es la capacidad de proporcionar ContentView que Forms pondrá en UINavigationBar , extendido a lo largo de toda la barra. Es fácil de hacer, pero no use la propiedad UINavigationBar de Title : los formularios deberán agregar ContentView como una subvista de NavigationBar sí mismo. Luego podemos configurar nuestro propio contenido dentro de ContentView usando Button s, Label s, etc. y alinearlos correctamente.

También estoy buscando una solución para esto. Se marcó como duplicado, pero el duplicado se cerró y hace referencia a este problema. ¿Hay alguna solución para que esto se esté considerando?

@samhouts Hola, ¿algún plan para arreglar esto? Hasta donde yo sé, muchas personas están prestando atención a este problema.
Pero casi dos años después, aún no se ha reparado.

Lamentablemente, el problema persiste incluso con la introducción de Shell

Lamentablemente no parece que sea una prioridad.

Celebrando 1 año de la emisión. 🍾🥂 🎂

Parece que algunas de las aplicaciones predeterminadas de Android tienen el comportamiento descrito

dummy

Esto sopla. Hace que nuestras aplicaciones se vean mal.

Esto es bastante molesto. ¿Alguien tiene una solución?

Actualmente estamos tratando de centrar una imagen en TitleView para alcanzar algunos diseños de UX y esto está causando que la imagen se desplace hacia la derecha debido a que el botón Atrás está a la izquierda, fuera de TitleView.

titleview

Solución alternativa: implemente una vista de título que tenga el botón Atrás y la imagen, luego establezca los botones del elemento de navegación en nulo. Esto _debería_ hacer que la vista del título ocupe todo el ancho de la barra de navegación.

Realmente necesito esto... zZz

@programmation ¿Tienes un ejemplo para esto?

@jaspervanmegroot
Sé lo de esconder el icono de la hamburguesa.

 <Shell.FlyoutIcon>
        <x:String></x:String>
    </Shell.FlyoutIcon>

Sin embargo, no es perfecto, aún así el margen izquierdo es ligeramente más grande que el derecho.

Actualmente estamos tratando de centrar una imagen en TitleView para alcanzar algunos diseños de UX y esto está causando que la imagen se desplace hacia la derecha debido a que el botón Atrás está a la izquierda, fuera de TitleView.

titleview

Solución alternativa: cree un botón ficticio, en blanco y que no haga nada para el lado opuesto de la barra de navegación.

Disculpa la demora en responderte! También publiqué otra solución que me funcionó en el pasado (sin embargo, no uso Shell, así que no estoy seguro de si ayudará aquí): cree un botón ficticio para el lado derecho de la barra de navegación. Puede usar color de texto == color de fondo para hacerlo invisible y cambiar su tamaño haciendo que tenga el mismo texto que el botón del lado izquierdo.

El 24 de marzo de 2020 a las 20:43, jaspervanmegroot [email protected] escribió:

@programmation https://github.com/programmation ¿Tiene un ejemplo para esto?


Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/xamarin/Xamarin.Forms/issues/4848#issuecomment-603134653 o cancele la suscripción https://github.com/notifications/unsubscribe-auth/ACNA4OOTRYXWHCX4GKUPEHDRJB6CLANCNFSM4GL6FIBA .

@programación ¡Gracias!

Básicamente está funcionando, pero es un poco incómodo porque si coloca elementos de la barra de herramientas, Shell.TitleView también se empuja hacia la izquierda, por lo que no los usa, o su título está navegando desde una página al otro de derecha a izquierda y viceversa.

@ eli191 Estoy de acuerdo en que realmente no es lo ideal, pero esa fue la mejor solución que tuve mientras seguía usando el NavigationPage proporcionado por XF. En general, sin embargo, no soy un fanático de las personalizaciones que se han aplicado al UINavigationController subyacente, que son en parte responsables de lo difícil que es hacer lo que estás tratando de hacer. Estoy _casi_ pensando que sería más sencillo crear un objeto NavigationBar con renderizadores de plataforma (aunque es posible que no necesite ninguno), y luego usar ControlTemplate para aplicarlo a las páginas que lo deseen, mientras elimina la barra de navegación "oficial" del NavigationPage adjunto. Sin duda, sería más simple cuando se trata de cosas como aplicar colores personalizados al fondo de navegación, y también permitiría un control total sobre las pilas de botones derecho e izquierdo.

@programmation ¿Tiene un proyecto de ejemplo en github?

Todavía enfrentamos este problema en agosto de 2020. Pronto alcanzaremos los 2 años para este error. ¿Hay un plan para arreglarlo?

Ahora conocemos las excelentes características como arrastrar y soltar y la vista de deslizamiento, pero todavía estoy luchando por centrar el título.

¿Hay alguna posibilidad de que esto se arregle pronto? tal vez en XF 5

¿Fue útil esta página
0 / 5 - 0 calificaciones