ios - 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 的左值和右值如此不同？

Answer 1

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

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

使用边距调整位置。

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