Xamarin表单图像大小不匹配 [英] Xamarin Forms image size mismatch

问题描述

我正在使用Xamarin Forms实施跨平台应用程序，并且正在努力解决一个奇怪的错误: 我正在尝试创建一个带有文本的按钮.为此，我正在使用AbsoluteLayout.

I'm implementing a cross-platform app using Xamarin Forms and I'm struggling with a strange bug: I'm trying to create a button with a text upon it. To achieve it, I'm using AbsoluteLayout.

我已为每种iOS分辨率类型(.png，@ 2x.png，@ 3x.png)向iOS项目添加了图像.使用标准<Image />标记，一切都可以正常工作.但是，以绝对布局包装图像时-图像会失去其分辨率，并会产生边框.

I've added a image to the iOS project for each iOS resolution types (.png, @2x.png, @3x.png). Everything works fine with standard <Image /> tag. However, when wrapping the image in absolute layout - the Image lose its resolution proportion and it results in borders.

上面的代码:

    <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> 

产生以下内容:

(模拟器为iPhone 7 Plus): 这是预期的行为.

on iPhone 6+/6s+/7+ (the simulator is iPhone 7 Plus): This is the expected behavior.

: 请注意图像上的小蓝色边框，该边框在AbsoluteLayout

on iPhone 6/6s/7 (the simulator is iPhone 7): Note the little blue borders on the image, which was set as background on AbsoluteLayout

5SE/5s及以下: 请注意蓝色的大边框.

on 5SE/5s and down: Note the big blue borders.

要进行调试，我将相同的图像放置了两次-首先放在AbsoluteLayout中，然后作为StackLayout中的标准项.绝对布局中的图像存在比例错误，而没有布局的图像则没有.

To debug this, I put the same image twice - firstly in AbsoluteLayout and then as standard item inside the StackLayout. The image in the absolute layout has the proportion bug and the image without it doesn't have.

我有点在这里迷路了.有什么方法可以破解我们的方法吗?我试图创造.一个自定义的渲染器来手动分配图像大小，但是UIImage似乎提供了Xamarin使用的不同大小单位，并且无法解决Android上的问题.

I'm kinda lost here. There's any way to hack our way through it? I've tried to create. a custom renderer to assign the image size manually, but it seems like UIImage gives different size units then Xamarin uses, and it won't solve the problem on Android.

任何建议将不胜感激！

编辑(3/5/2017): 只是为了让您保持更新-看来这是Xamarin Forms中的一般错误.我发布的解决方案是一种解决方法，并且一遍又一遍地卡在这个问题上.

Edit (3/5/2017): Just to keep you updated - It seems like this is a general bug in Xamarin Forms. My posted solution is a workaround and I'm stuck at this problem over and over.

例如，我尝试创建此GUI:

For instance, I attempt to create this GUI:

我已经创建了下面的代码:

I've created the code bellow:

<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>

一切正常，直到我添加图像，结果如下:

Everything is work fine, until I'm adding the image, which results in the following output:

如果有人想出如何破解的方法，我将非常感谢他(她)可以在此处发布解决方案！ 只要我知道，这是iOS UIImage渲染器的问题-计算图像布局时UIImage本机终结点不可用(因此图像宽度和高度为-1)，因此XF不知道如何正确渲染图像.

If somebody figures how to hack it out, I'll really appreciate if he, or she, can post the solution here! As long as I get it, it's a problem with iOS UIImage renderer - the UIImage native endpoint is not available when computing the image layout (and therefore the image width and height is -1) and thus XF don't know how to render the image properly.

推荐答案

感谢您的建议答案.不幸的是，使用任何建议的答案都无法解决此问题. 我放弃了使用AbsoluteLayout.实际上，在过去的一周中，我在RelativeLayout和StackLayout上也遇到了许多有关iOS中图像的问题.我已经将它们报告给Xamarin.

Thanks for the suggested answers. Unfortunately, this issue couldn't been resolved using any suggested answer. I gave up on using AbsoluteLayout. Actually, in the past week I ran into many issues regarding images in iOS at RelativeLayout and StackLayout as well. I've reported them to Xamarin.

同时，我将在此处发布我的变通方法，尽管它可能更漂亮，但可以正常工作.

Meanwhile, I'll post here my workaround, which though could be prettier, is working fine.

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
            });
        }
    }
}

这篇关于Xamarin表单图像大小不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！