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 &這麼不同？

來源

2017-10-16 Betty Crokker

我已閱讀的關於按鈕上的圖像的大多數文章都建議使用圖像和標籤在網格中使用手勢識別器來處理水龍頭，從而構建自己的文章。

你也可以嘗試按鈕和網格中的圖像。

使用邊距來調整位置。

我嘗試並保持絕對佈局清晰。

來源

2017-10-17 04:45:32

這是來自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將圖像向上和向右移動，向下移動標籤並向左移動以使它們像正確的圖像。我畫這個插圖，希望清楚。

來源

2017-10-18 07:49:31

有趣的...所以我想我的第一個問題是：你知道這些inset值都應該代表什麼？我無法想象邊緣插入是如何使圖像插入依賴於文本，文本插入取決於圖像... –

然後...它不起作用。事實上，這些價值觀就是代碼給我的（早期在這篇文章中，我所說的價值「看起來很奇怪」），這是不對的。 –

我畫了一個插圖，希望它清楚。 –

Xamarin-帶有文本和圖像的絕對佈局按鈕導致錯誤對齊元素

回答

相關問題