Xamarin-具有绝对布局的文本和图像按钮会导致元素未对齐 [英] Xamarin - Button with text and image in absolute layout results in mis-aligned elements

问题描述

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

I am trying to create a button in a Xamarin Forms cross-platform app (iOS and Android), where the button has both text and an image. The XAML is pretty straightforward:

<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上得到的是一个按钮，图像和文本都被奇怪地推了过来。到侧面：

but what I get on the iPad is a button where both the image and the text are strangely pushed over to the side:

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

(the source image "TaskBar_Assets_HomeButtonIcon.png" is 47 x 44 so it should fit fine in the overall button area)

我唯一能使它看起来更好的方法是制作一个基于Button的自定义控件，然后我可以看到基础UIButton的一些属性看起来很奇怪：

The only way I can find to make this look better, is to make a custom control based on Button, and then I can see that several of the properties of the underlying UIButton seem wonky:

Control.ImageView.Frame都是零：

The Control.ImageView.Frame is all zeroes:

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

Control.ImageEdgeInsets和.TitleEdgeInsets看起来很奇怪（左右+似乎没有空格图片或文字）：

The Control.ImageEdgeInsets and .TitleEdgeInsets look odd (the right + left seem like they leave no space for the image or text):

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设置为零（没有特殊原因，除非它起作用）

What I'm doing, is adjusting the Control.ImageEdgeInsets so that Control.ImageEdgeInsets.Left is equal to the half of the (button width minus the image width) and setting Control.ImageEdgeInsets.Right to zero (for no particular reason except that it works)

，然后找出要设置Control.TitleEdgeInsets的内容是通过试验&错误，我最后得到的值与主页文本的宽度（41像素）有关：

and then figuring out what to set Control.TitleEdgeInsets was done with trial & error, I ended up with values related to the width of the "Home" text (41 pixels):

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

这将导致合理的按钮外观：

That results in a reasonable button look:

虽然看起来我需要做更多的试验错误使文本 Home实际上居中。

although it looks like I need to do more trial & error to get the text "Home" actually centered.

但是为什么我需要经历所有这些？为什么按钮不只显示文字&

But why do I need to go through all this? Why doesn't the button just display text & image correctly in the first place?

如果我必须经历所有这些，为什么 Left&的值是正确的？适合ImageEdgeInsets和TitleEdgeInsets如此不同吗？

And if I do have to go through all this, why are the values for Left & Right for ImageEdgeInsets and TitleEdgeInsets so different?

推荐答案

我读过的大多数有关按钮上图像的文章都建议使用Image和Label在网格中构造自己的图像

Most of the articles I have read about images on buttons suggest constructing your own using an Image and a Label in a grid using a gesture recognizer to handle the tap.

您还可以尝试按钮和网格中的图像。

You could also try a button and an image in a grid.

使用边距调整位置。

我尝试保持绝对布局。

这篇关于Xamarin-具有绝对布局的文本和图像按钮会导致元素未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！