Xamarin - 絶対レイアウトのテキストと画像のボタンの要素の位置が正しくない

Question

ボタンにテキストと画像の両方があるXamarinフォームクロスプラットフォームアプリケーション（iOSとAndroid）でボタンを作成しようとしています。

<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上で取得することは、画像とテキストの両方が妙側にオーバープッシュされるボタンです：XAMLは非常に簡単です

（ソースイメージ "TaskBar_Assets_HomeButtonIcon.png"は47 x 44ですので、全体的なボタン領域にはうまく収まるはずです）

この外観を良くするために唯一の方法は、ボタンに基づいてカスタムコントロールを作成することですいくつかのことが分かります基礎となる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.Leftは（ボタンの幅マイナスイメージの幅の半分に等しくなるように、私は何をやっている

Control.ImageEdgeInsets = {-8.9501953125, 20.33935546875, 8.9501953125, -20.33935546875} 
Control.TitleEdgeInsets = {22, -23.5, -22, 23.5} 

、）Control.ImageEdgeInsetsを調整して、 Control.ImageEdgeInsets.Rightを0に設定します（部品がない場合それが動作することを除いて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の値が異なるのはなぜですか？

Answer 1

私がボタンの画像について読んだ記事の大部分は、ジェスチャ認識機能を使ってグリッド内の画像とラベルを使って自分のタップを処理することを示唆しています。

グリッド内でボタンと画像を試すこともできます。

マージンを使用して配置を調整します。

私は絶対的なレイアウトを明確にしようとします。

Answer 2

ButtonRendererのソースコードはXamarin.Fromsです。あなたはTopにContentLayoutを設定した場合、以下のコードが実行されます。

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); 
} 

コードが示すように、画像のオフセット左をがlabelWidth/2あるhorizontalImageOffsetです。 の左オフセットは、です。horizontalTitleOffsetは、imageWidth/2です。

テキストが広い場合、画像の左オフセットが大きくなります。イメージの幅が広い場合、テキストの左オフセットが大きくなります。

編集：

ネイティブのiOSでは、デフォルトのレイアウトは、左の画像のようなものです：画像は左にあり、ラベルは右です。 Top設定のXamarinでは、Xamarinは画像を上と下に移動し、ラベルを下に移動して左に移動して、右の画像にします。私はこのイラストをペイントしています。