Question

这是我的问题：

The problem

红色块有时是人的化身，蓝色气球是聊天消息。聊天消息对象是一个RelativeLayout，其中Label和一个Image位于彼此之上，但无论我做什么，我都无法将其置于中心位置。我只有一个视图：

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace TestChat
{
    public partial class ChatPage : ContentPage
    {
        public ChatPage ()
        {
            this.Title = "Chat page";
            InitializeComponent ();
        }

        void OnChatClick (object sender, EventArgs args) { 
            Image pic = new Image {
                Source = "bubble.png",
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Aspect = Aspect.Fill
            };

            Label textLabel = new Label {
                Text = "Hello",
                TextColor = Color.White,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.EndAndExpand
            };

            Frame picFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness (0),
                Content = pic
            };

            Frame textFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Transparent,
                Padding = new Thickness (0,0,15,0),
                Content = textLabel
            };

            RelativeLayout overlayLayout = new RelativeLayout { BackgroundColor = Color.Blue, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

            overlayLayout.Children.Add (picFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            overlayLayout.Children.Add (textFrame,
                xConstraint: Constraint.RelativeToParent((parent) => parent.X),
                yConstraint: Constraint.RelativeToParent((parent) => parent.Y),
                widthConstraint: Constraint.RelativeToParent((parent) => parent.Width-2),
                heightConstraint: Constraint.RelativeToParent((parent) => parent.Height-2)
            );

            Frame overlayContainerFrame = new Frame {
                HasShadow = false,
                BackgroundColor = Color.Red,
                Padding = new Thickness(1),
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Content = overlayLayout
            };

            StackLayout horizontalLayout = new StackLayout {
                Orientation = StackOrientation.Horizontal
            };

            BoxView avatarImage = new BoxView {
                Color = Color.Red,
                HeightRequest = 50,
                WidthRequest = 50
            };

            horizontalLayout.Children.Add (avatarImage);

            horizontalLayout.Children.Add (overlayContainerFrame);

            ChatScrollViewStackLayout.Children.Add (horizontalLayout);

            //ChatStackLayout.Children.Add (pic);
        }

        void CreateChatBubble() {

        }
    }   
}

有没有人有任何想法为什么我不能相应的布局来相应地调整大小，所以它不会超出屏幕的范围？我尝试将其WidthConstraint设置为parent.With-52以弥补水平占据50个单位的头像，但我得到了这个： enter image description here

我现在已经被困在这里至少8个小时了，而且我几乎没有想法。任何提示将非常感谢。这是项目的git repo，所以你可以克隆它，如果你想测试任何东西： https://github.com/sgarcia-dev/xamarin-chat.git

任何帮助都将非常感激，如果您可以复制我想要的内容，如果它看起来很乱，请随时完全忽略我的代码。（左侧是一个图像，右侧是带有基础图像背景的消息气泡）

Answer 1

查看此实施

    void OnChatClick (object sender, EventArgs args) { 
        var pic = new Image {
            Source = "bubble.png",
            Aspect = Aspect.Fill
        };

        var textLabel = new Label {
            Text = "Hello",
            TextColor = Color.White,
            VerticalOptions = LayoutOptions.Center,
            LineBreakMode = LineBreakMode.WordWrap
        };

        var relativeLayout = new RelativeLayout {
            BackgroundColor = Color.Navy,
//          HeightRequest = 1000
        };

        var absoluteLayout = new AbsoluteLayout { 
            VerticalOptions = LayoutOptions.Center,
            BackgroundColor = Color.Blue
        };

        var frame = new Frame {
            BackgroundColor = Color.Red
        };

        absoluteLayout.Children.Add (pic,
            new Rectangle (0, 0, 1, 1),
            AbsoluteLayoutFlags.All);

        absoluteLayout.Children.Add (textLabel,
            new Rectangle (0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize),
            AbsoluteLayoutFlags.PositionProportional);

//      textLabel.SizeChanged += (object label, EventArgs e) => {
//          relativeLayout.HeightRequest = textLabel.Height + 30;
//          absoluteLayout.HeightRequest = textLabel.Height + 30;
//      };

        relativeLayout.Children.Add (frame,
            heightConstraint: Constraint.RelativeToParent (parent => parent.Height),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3));

        relativeLayout.Children.Add (absoluteLayout,
            xConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.3),
            widthConstraint: Constraint.RelativeToParent (parent => parent.Width * 0.7));


        ChatScrollViewStackLayout.Children.Add (relativeLayout);
    }

如果您需要为长文本自动调整聊天消息的高度，请取消注释所有五条注释行。

XamarinForms RelativeLayout：无法获得相对布局以连续正确调整大小

1 个答案: