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

问题描述：

我想在Xamarin Forms跨平台应用程序（iOS和Android）中创建按钮，其中按钮同时具有文本和图像。该XAML是非常简单的：Xamarin-带有文本和图像的绝对布局按钮导致错误对齐元素

<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设置为零（无部分不同之处在于它的工作原理icular原因）

，然后搞清楚什么设置Control.TitleEdgeInsets与试验&误，我结束了有关“家”文字的宽度值（41个像素）：

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

，结果在一个合理的按钮的外观：

虽然它看起来像我需要做更多的试验&错误来获取文本“家”，其实居中。

但是为什么我需要经历这一切？为什么按钮不能正确显示文字&图像？

如果我确实需要检查所有这些，为什么ImageEdgeInsets和TitleEdgeInsets的Right &这么不同？

答

我已阅读的关于按钮上的图像的大多数文章都建议使用图像和标签在网格中使用手势识别器来处理水龙头，从而构建自己的文章。

你也可以尝试按钮和网格中的图像。

使用边距来调整位置。

我尝试并保持绝对布局清晰。

答

这是来自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。标题的左偏移量是horizontalTitleOffset这是imageWidth/2。

因此，当文字越宽时，图像的左偏移量就越大。当图像较宽时，文字的左侧偏移量会更大。

编辑：

在本地的iOS，默认布局就像是左边图片：图片是在左边和标签的右侧。在Xamarin的Top设置中，Xamarin将图像向上和向右移动，向下移动标签并向左移动以使它们像正确的图像。我画这个插图，希望清楚。

有趣的...所以我想我的第一个问题是：你知道这些inset值都应该代表什么？我无法想象边缘插入是如何使图像插入依赖于文本，文本插入取决于图像... –

然后...它不起作用。事实上，这些价值观就是代码给我的（早期在这篇文章中，我所说的价值“看起来很奇怪”），这是不对的。 –

我画了一个插图，希望它清楚。 –

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

相关推荐