Xamarin – 带有绝对布局的文本和图像的button导致错误alignment的元素
我正在尝试在Xamarin Forms跨平台的应用程序（iOS和Android）中创build一个button，其中button同时具有文本和图像。 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上得到的是一个button，图像和文本都被奇怪地推到了一边：
（源图像“TaskBar_Assets_HomeButtonIcon.png”是47 x 44，所以它应该适合在整个button区域罚款）
我可以find使这看起来更好的唯一方法是制作一个基于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等于（button宽度减去图像宽度）的一半，并将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}
这导致一个合理的button外观：
虽然它看起来像我需要做更多的试验和错误，以获得文本“家”居然居中。
但为什么我需要经历这一切呢？ 为什么button不能正确显示文本和图像呢？
如果我必须经历所有这些，为什么ImageEdgeInsets和TitleEdgeInsets的Left和Right值是如此不同呢？
我已阅读的关于button上的图像的大多数文章都build议使用手势识别器在网格中使用“图像”和“标签”来构build自己的图像以处理水龙头。
你也可以尝试一个button和网格中的图像。
使用保证金来调整位置。
我尽量保持绝对的布局。
这里是Xamarin的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 。 标题的左偏移量是horizontalTitleOffset ，它是imageWidth / 2 。
所以当文字越宽时，图像的左偏移量就越大。 当图像越宽时，文字的左偏移量就越大。
编辑 ：
在原生iOS中，默认的布局就像左边的图像：图像在左边，标签在右边。 在Xamarin for Top设置中，Xamarin将图片向右上移，将标签向下移动，使其像右图一样。 我画这个插图，希望清楚。
