Xamarin - 绝对布局中带有文本和图像的按钮导致元素未对齐

Question

我正在尝试在 Xamarin Forms 跨平台应用程序（iOS 和 Android）中创建一个按钮，该按钮同时具有文本和图像。 XAML 非常简单：

<AbsoluteLayout ...>
   <Labels and backgrounds and such>
   <Button x:Name="HomeButton2" TranslationX="6" TranslationY="100"
     BackgroundColor="#efeff4" TextColor="#4a4a4a"
     WidthRequest="58" HeightRequest="76"
     ContentLayout="Top,5" 
     Image="TaskBar_Assets_HomeButtonIcon.png" Text="Home"
     Clicked="HomeButton_Clicked" />
</AbsoluteLayout>

但我在 iPad 上得到的是一个按钮，其中图像和文本都奇怪地推到一边：

（源图像“TaskBar_Assets_HomeButtonIcon.png”为 47 x 44，因此它应该适合整个按钮区域）

我能找到让这个看起来更好的唯一方法是制作一个基于 Button 的自定义控件，然后我可以看到底层 UIButton 的一些属性看起来很不稳定：

Control.ImageView.Frame 全部为零：

Control.ImageView = <UIImageView: 0x12df52940; frame = (0 0; 0 0);
   clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO;
   layer = <CALayer: 0x173623180>>

Control.ImageEdgeInsets 和 .TitleEdgeInsets 看起来很奇怪（右 + 左似乎没有为图像或文本留出空间）：

Control.ImageEdgeInsets = {-8.9501953125, 20.33935546875, 8.9501953125, -20.33935546875}
Control.TitleEdgeInsets = {22, -23.5, -22, 23.5}

我正在做的是调整 Control.ImageEdgeInsets 使 Control.ImageEdgeInsets.Left 等于（按钮宽度减去图像宽度）的一半并将 Control.ImageEdgeInsets.Right 设置为零（没有特别说明原因只是它有效）

然后通过反复试验确定要设置什么 Control.TitleEdgeInsets，我最终得到了与“主页”文本的宽度（41 像素）相关的值：

Control.ImageEdgeInsets updated to {-8.9501953125, 5.5, 8.9501953125, 0}
Control.TitleEdgeInsets updated to {22, -50, -22, -9}

这会产生合理的按钮外观：

虽然看起来我需要做更多的试验和错误才能使文本“Home”真正居中。

但是为什么我需要经历这一切呢？为什么按钮一开始就不能正确显示文本和图像？

如果我必须经历所有这些，为什么 ImageEdgeInsets 和 TitleEdgeInsets 的 Left & Right 的值如此不同？

Answer 1

我读过的关于按钮图像的大多数文章都建议使用网格中的图像和标签来构建自己的图像，并使用手势识别器来处理点击。

您也可以尝试在网格中使用按钮和图像。

使用边距调整位置。

我尽量避免使用绝对布局。

Answer 2

这是来自Xamarin.Froms的ButtonRenderer源代码。如果您将ContentLayout设置为Top，将运行以下代码：

void ComputeEdgeInsets(UIButton button, Button.ButtonContentLayout layout)
{
    ...
    var horizontalImageOffset = labelWidth / 2;
    var horizontalTitleOffset = imageWidth / 2;

    ...
    button.ImageEdgeInsets = new UIEdgeInsets(-imageVertOffset, horizontalImageOffset, imageVertOffset, -horizontalImageOffset);
    button.TitleEdgeInsets = new UIEdgeInsets(titleVertOffset, -horizontalTitleOffset, -titleVertOffset, horizontalTitleOffset);
}

如代码所示，图像的左偏移为horizontalImageOffset，即labelWidth / 2。 title 的左偏移为horizontalTitleOffset，即imageWidth / 2。

所以，当文本更宽时，图像的左偏移量会更大。当图像更宽时，文本的左偏移量会更大。

编辑：

在原生 iOS 中，默认布局类似于左图：Image 位于左侧，Label 位于右侧。在 Xamarin for Top 设置中，Xamarin 向上和向右移动图像，向下和向左移动标签以使它们像正确的图像。我画了这个插图，希望清楚。