Xamarin 相对布局约束 Class RelativeToParent 意外输出？

Question

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Diagnostics;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App1
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            RelativeLayout relativeLayout = new RelativeLayout();

            Label upperLeft = new Label
            {
                Text = "Upper Left",
                FontSize = 20
            };
            relativeLayout.Children.Add( upperLeft ,
                Constraint.Constant(0), Constraint.Constant(0)
                );
            Label constantLabel = new Label
            {
                Text = "Constants are Absolute",
                FontSize = 20
            };
            relativeLayout.Children.Add(constantLabel,
                Constraint.Constant(100),
                Constraint.Constant(100),
                Constraint.Constant(50),
                Constraint.Constant(200)
                );
            Label halfWayDown = new Label
            {
                Text = "Halfway down and across",
                FontSize = 20
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })
                  ) ;
            this.Content = relativeLayout;
        }

        
    }
}

我有 3 个标签，一个放在左上角，第二个随机 location(100,100)，第三个在父宽度和高度的一半。我对最后一个标签有疑问。我不知道为什么最后一个标签的文字越过屏幕，为什么它没有换行。另外，当我传递最后一个标签的 width 和 height 的值时，标签的文本会更改行，为什么会发生这种情况？当我只将两个参数传递给第三个标签时，会发生这种行为（文本穿过屏幕）。我还尝试使用第一个标签 where ，当我只将两个参数传递给 Add-method 时，文本会自动更改其行。谁能告诉我方法 RelativeToParent 是如何工作的？另外，如果我没有通过它们，默认的 width 和 height 值是多少？为什么最后一个标签中的文本不会更改行？ Link for the image of the output i am getting

Answer 1

您没有设置Label的宽度halfWayDown，所以文字默认显示在一行，以下部分文字被截断。

添加到Children时可以设置Label halfWayDown的宽度:

        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );

您还可以为标签设置 MaxLines ,LineBreakMode。

请参考以下代码：

    public MainPage()
    {

        RelativeLayout relativeLayout = new RelativeLayout();

        Label upperLeft = new Label
        {
            Text = "Upper Left",
            FontSize = 20
        };
        relativeLayout.Children.Add(upperLeft,
            Constraint.Constant(0), Constraint.Constant(0)
            );
        Label constantLabel = new Label
        {
            Text = "Constants are Absolute",
            FontSize = 20
        };
        relativeLayout.Children.Add(constantLabel,
            Constraint.Constant(100),
            Constraint.Constant(100),
            Constraint.Constant(50),
            Constraint.Constant(200)
            );
        Label halfWayDown = new Label
        {
            Text = "Halfway down and across",
            FontSize = 20,
            BackgroundColor= Color.Yellow,
            MaxLines = 2,
            LineBreakMode = LineBreakMode.WordWrap,
        };
        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );
        this.Content = relativeLayout;
    }

更新：

But the first label ( upperLeft ) changes its line even when i did not pass the width value it automatically changes the line ?

最后一个标签(halfWayDown)也可以换行，但是字符串还没有达到实际宽度。

作为测试，可以用一个长字符串来验证，测试代码为：

Label halfWayDown = new Label
            {
                Text = "Halfway down and across 01234567890123456789012345678901234567890123456789012345678901234567890123456789",
                FontSize = 20,
                BackgroundColor = Color.Yellow,
                //LineBreakMode= LineBreakMode.CharacterWrap,
                //WidthRequest=200,
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })

                   // set the 1/3 width  of parent
                   //Constraint.RelativeToParent((parent) =>
                   //{
                   //  return parent.Width * 0.5;
                   //})
                  );

结果是：

注：

因此，为避免这种情况，您可以设置标签的宽度(halfWayDown )。

更新2：

you can see that the string of halfWayDown label have some missing characters. The part from "ss 012345" is missing.

那是因为 upperLeft 和 halfWayDown 这两个标签都有默认宽度。
您可以通过添加按钮来验证这一点，请参考以下代码：

        Button button = new Button { 
         Text="test",
         HorizontalOptions= LayoutOptions.StartAndExpand

        };

        button.Clicked += delegate {
            double width1 = upperLeft.Width;
            double width2 = halfWayDown.Width;
            System.Diagnostics.Debug.WriteLine("----> upperLeft's width = " + width1 + "<---> halfWayDown.Width = " + width2);
        };
        relativeLayout.Children.Add(button,
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Width / 3;
             }),
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Height*2 / 3;
             })

             );

在我的设备上输出如下：

----> upperLeft's width = 375.652173913043<---> halfWayDown.Width = 375.652173913043

因此，为避免这种情况，您可以为标签设置宽度 (halfWayDown)。

Xamarin 相对布局约束 Class RelativeToParent 意外输出？

Xamarin Relative Layout Constraint Class RelativeToParent unexpected output?

c#

label

constraints

xamarin

android-relativelayout