Question

我正在使用Xamarin Forms实现一个跨平台的应用程序，我正在努力解决一个奇怪的错误：我正在尝试创建一个带有文本的按钮。要实现它，我正在使用AbsoluteLayout。

我已为iOS项目的每个iOS分辨率类型（.png，@ 2x.png，@ 3x.png）添加了一个图像。使用标准<Image />标记，一切正常。但是，当以绝对布局包装图像时 - 图像会失去其分辨率，并导致边框。

上面的代码：

    <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 6 + / 6s + / 7 +上的

（模拟器是iPhone 7 Plus）：这是预期的行为。

iPhone 6 / 6s / 7上的

（模拟器是iPhone 7）：请注意图像上的蓝色小边框，在AbsoluteLayout

上设置为背景

在5SE / 5s及以下：注意大蓝色边框。

为了调试这个，我把相同的图像放两次 - 首先在AbsoluteLayout中，然后作为StackLayout中的标准项。绝对布局中的图像具有比例错误，而没有它的图像没有。

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

任何建议都会非常感激！

编辑（3/5/2017）：只是为了让你更新 - 似乎这是Xamarin Forms中的一般错误。我发布的解决方案是一种解决方法，我一遍又一遍地坚持这个问题。

例如，我尝试创建此GUI：

我已经创建了以下代码：

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

一切正常，直到我添加图片，结果如下：

如果有人想出如何破解它，我真的很感激他或她是否可以在这里发布解决方案！只要我得到它，这是iOS UIImage渲染器的问题 - 在计算图像布局时UIImage本机端点不可用（因此图像宽度和高度为-1）因此XF不知道如何正确渲染图像。

Answer 1

您可以将Image标签的Aspect属性设置为AspectFill，它允许您的图像适合其容器而不会失去其分辨率。

public class Demo{
    Map<String,String> test = new HashMap<String,String>();
    test.put("A","A");
    System.out.println(test);

}

`

Answer 2

添加

import java.util.Properties; import javax.mail.Authenticator; import javax.mail.Folder; import javax.mail.Message; import javax.mail.MessagingException; import javax.mail.NoSuchProviderException; import javax.mail.PasswordAuthentication; import javax.mail.Session; import javax.mail.Store; public class CheckingMails2 { public static void check(String host, String storeType, String user, String password) { try { // create properties field Properties properties = new Properties(); properties.put("mail.pop3s.host", host); properties.put("mail.pop3s.port", "995"); properties.put("mail.pop3s.starttls.enable", "true"); // Setup authentication, get session Session emailSession = Session.getInstance(properties, new javax.mail.Authenticator() { protected PasswordAuthentication getPasswordAuthentication() { return new PasswordAuthentication( "sumit.nalui@gmail.com", "********"); } }); // emailSession.setDebug(true); // create the POP3 store object and connect with the pop server Store store = emailSession.getStore("pop3s"); store.connect(); // create the folder object and open it Folder emailFolder = store.getFolder("inbox"); emailFolder.open(Folder.READ_ONLY); // retrieve the messages from the folder in an array and print it Message[] messages = emailFolder.getMessages(); System.out.println("messages.length---" + messages.length); for (int i = 0, n = messages.length; i < n; i++) { Message message = messages[i]; System.out.println("---------------------------------"); System.out.println("Email Number " + (i + 1)); System.out.println("Subject: " + message.getSubject()); System.out.println("From: " + message.getFrom()[0]); System.out.println("Text: " + message.getContent().toString()); System.out.println("SentDate: " + message.getSentDate().toString()); } //String sentDate = message.getSentDate().toString(); // close the store and folder objects emailFolder.close(false); store.close(); } catch (NoSuchProviderException e) { e.printStackTrace(); } catch (MessagingException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } } public static void main(String[] args) { String host = "pop.gmail.com";// change accordingly String mailStoreType = "pop3"; String username = "sumit.nalui@gmail.com";// change accordingly String password = "********";// change accordingly check(host, mailStoreType, username, password); } }

或

Aspect:AspectFill

任何适合您的需求!!!

Answer 3

感谢您提出的答案。不幸的是，使用任何建议的答案都无法解决此问题。我放弃了使用AbsoluteLayout。实际上，在过去的一周里，我在iOS RelativeLayout和StackLayout处遇到了很多关于图片的问题。我已将它们报告给Xamarin。

与此同时，我会在这里发布我的解决方法，虽然可能更漂亮，但工作正常。

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

Answer 4

尝试使用水平 StackLayout，如下所示：

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

Xamarin表示图像大小不匹配

4 个答案: