Formatos Xamarin desajuste de tamaño de imagen

Estoy implementando una aplicación multiplataforma usando Xamarin Forms y estoy luchando con un error extraño: Estoy tratando de crear un botón con un texto sobre él. Para lograrlo, estoy usando AbsoluteLayout .

He añadido una imagen al proyecto iOS para cada tipo de resolución de iOS (.png, @ 2x.png, @ 3x.png). Todo funciona bien con la etiqueta <Image /> estándar. Sin embargo, cuando se envuelve la imagen en un diseño absoluto – la imagen pierde su proporción de resolución y resulta en bordes.

El código anterior:

  <AbsoluteLayout BackgroundColor="Blue"> <Image Source="home/donation-button.png" AbsoluteLayout.LayoutFlags="All" x:Name="Button" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" /> <Label Text="Hello, World!" TextColor="White" FontAttributes="Bold" FontSize="16" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 1, 1, 0.5" /> </AbsoluteLayout> 

Producir lo siguiente:

En el iPhone 6 + / 6s + / 7 + (el simulador es iPhone 7 Plus): Imagen válida en el iPhone 7 Plus Este es el comportamiento esperado.

En el iPhone 6 / 6s / 7 (el simulador es iPhone 7): Observe las pequeñas fronteras azules en la imagen Observe los bordes azules pequeños en la imagen, que fue fijada como fondo en AbsoluteLayout

En 5SE / 5s y abajo: Observe los bordes azules Observe las grandes fronteras azules.

Para depurar esto, puse la misma imagen dos veces – en primer lugar en AbsoluteLayout y luego como elemento estándar dentro de StackLayout. La imagen en el diseño absoluto tiene el error de proporción y la imagen sin ella no tiene.

Estoy un poco perdido aquí. ¿Hay alguna manera de cortar nuestro camino a través de él? He intentado crear. Un renderizador personalizado para asignar el tamaño de la imagen manualmente, pero parece que UIImage da diferentes unidades de tamaño que Xamarin usa, y no resolverá el problema en Android.

Cualquier consejo será muy apreciado!

Editar (3/5/2017): Sólo para mantenerte actualizado – Parece que este es un error general en Xamarin Forms. Mi solución publicada es una solución y estoy atascado en este problema una y otra vez.

Por ejemplo, intento crear esta GUI: La imagen GUI deseada

He creado el siguiente código:

 <StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="FillAndExpand" BackgroundColor="#dd2c00"> <Label Text="100" FontSize="46" Margin="10" FontFamily="OpenSans-Bold" TextColor="#ffffff" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> <Label TextColor="#ffffff" FontSize="Medium" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center"> <Label.FormattedText> <FormattedString> <Span FontFamily="OpenSans-Regular" Text="{markup:Localize CandlesMap.FacebookFriendsCandles1}" /> <Span FontFamily="OpenSans-Light" Text="{markup:Localize CandlesMap.FacebookFriendsCandles2}" /> </FormattedString> </Label.FormattedText> </Label> <Image Source="{markup:ResolvePath map.show_friends_candle_button}" /> </StackLayout> 

Todo está bien, hasta que estoy añadiendo la imagen, lo que resulta en la siguiente salida: La GUI real

Si alguien calcula cómo hackearlo, realmente apreciaré si él, o ella, puede publicar la solución aquí! Siempre que lo consiga, es un problema con el procesador iOS UIImage – el punto final nativo de UIImage no está disponible al calcular el diseño de la imagen (y por lo tanto el ancho y la altura de la imagen es -1) y por lo tanto XF no sabe cómo renderizar el Imagen correctamente.

Puede configurar la propiedad Aspect de la etiqueta de imagen en AspectFill, que permite que su imagen se ajuste a su contenedor sin perder su resolución.

 <AbsoluteLayout BackgroundColor="Blue"> <Image Source="home/donation-button.png" Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All" x:Name="Button" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"/> <Label Text="Hello, World!" TextColor="White" FontAttributes="Bold" FontSize="16" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 1, 1, 0.5" /> </AbsoluteLayout> 

La frontera y el cambio de tamaño son de AbsoluteLayout no de la imagen. Ver si el ancho del diseño puede extenderse dinámicamente como 100% del contenedor principal y si permite opciones como sin frontera.

Solo agrega

Aspect:AspectFill

o

Fill

Lo que se adapte a sus necesidades!

Gracias por las respuestas sugeridas. Lamentablemente, este problema no pudo resolverse utilizando ninguna respuesta sugerida. Dejé de usar AbsoluteLayout . En realidad, en la semana pasada me encontré con muchos temas relacionados con las imágenes en iOS en RelativeLayout y StackLayout también. Los he denunciado a Xamarin.

Mientras tanto, voy a publicar aquí mi solución, que aunque podría ser más bonita, está funcionando bien.

 using System; using Xamarin.Forms; namespace App.Views.Home { public class DonationButton : RelativeLayout { #region Properties /// <summary> /// Gets or sets the button text. /// </summary> /// <value>The text.</value> public string Text { get { return this._textLabel.Text; } set { this._textLabel.Text = value; } } public event EventHandler Clicked; #endregion #region iVars private Image _backgroundImage; private Label _textLabel; #endregion public DonationButton() { //-------------------------------------------- // Setup the background image //-------------------------------------------- this._backgroundImage = new Image() { Source = ImageSource.FromFile("home__donation_button.png") }; this.Children.Add(this._backgroundImage, (Constraint)null, (Constraint)null, (Constraint)null, (Constraint)null); //-------------------------------------------- // Add the label //-------------------------------------------- /* See: http://stackoverflow.com/a/40942692/1497516 */ Func<RelativeLayout, double> getLabelWidth = (p) => this._textLabel.Measure(p.Width, p.Height).Request.Width; Func<RelativeLayout, double> getLabelHeight = (p) => this._textLabel.Measure(p.Width, p.Height).Request.Height; this._textLabel = new Label() { TextColor = Color.White, FontAttributes = FontAttributes.Bold, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) }; this.Children.Add(this._textLabel, Constraint.RelativeToParent((parent) => parent.Width - (getLabelWidth(parent) + 10)), Constraint.RelativeToView(this._backgroundImage, (parent, view) => (view.Height - getLabelHeight(parent)) / 2) ); //-------------------------------------------- // Allow clicks //-------------------------------------------- this.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(sender => { if (this.Clicked != null) { this.Clicked(sender, EventArgs.Empty); } }), NumberOfTapsRequired = 1 }); } } } 

Intente utilizar Horizontal StackLayout como el siguiente:

 <StackLayout BackgroundColor="Blue" Orientation="Horizontal"> <Image Source="home/donation-button.png" x:Name="Button" /> <Label Text="Hello, World!" TextColor="White" FontAttributes="Bold" FontSize="16" /> </StackLayout > 
  • Quitar icono de la barra de acción xamarin
  • Formularios de Xamarin Android Aplicación no obtener DeviceToken Parse SDK
  • Xamarin implementación de Android no utiliza el código más reciente?
  • No se pueden establecer propiedades en clases anidadas desde Xaml
  • Reenvío de fuerza de Xamarin.Forms View con procesador personalizado
  • Xamarin Android con multidex - error en modo de depuración
  • Resource.Designer.cs: "Recurso ... no contiene una definición para ..."
  • Convertir Xamarin.Forms.Color a color específico de la plataforma
  • Cómo desactivar la selección resaltada en listview xamarin.forms en android
  • Evitar el cierre por botón de nuevo en formularios xamarin en android
  • Xamarin.Forms implementa AndHud y BTProgressHud
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.