レイアウトの Xamarin.Forms 選択

  • [アーティクル]

Download Sample サンプルをダウンロードします

Xamarin.Forms レイアウト クラスを使用すると、アプリケーションで UI コントロールを配置およびグループ化できます。 レイアウト クラスを選択するには、レイアウトの子要素の配置方法と、レイアウトの子要素のサイズを知る必要があります。 さらに、目的のレイアウトを作成するためにレイアウトを入れ子にする必要がある場合があります。

次の図は、メイン Xamarin.Forms レイアウト クラスで実現できる一般的なレイアウトを示しています。

The main layout classes in Xamarin.Forms

StackLayout

A は StackLayout 、水平方向または垂直方向に 1 次元スタック内の要素を整理します。 このプロパティは Orientation 要素の方向を指定し、既定の方向は Vertical. StackLayout は通常、ページ上の UI のサブセクションを配置するために使用されます。

次の XAML は、3 つのLabelオブジェクトを含む垂直オブジェクトStackLayoutを作成する方法を示しています。

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

a StackLayoutでは、要素のサイズが明示的に設定されていない場合は、使用可能な幅に合わせて展開されます。プロパティが > にHorizontal設定されている場合Orientationは高さです。

A StackLayout は、他の子レイアウトを含む親レイアウトとしてよく使用されます。 ただし、オブジェクトの組み合わせをStackLayout使用してレイアウトをGrid再現するには、a StackLayout を使用しないでください。 次のコードは、この不適切なプラクティスの例を示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

不要なレイアウト計算が行われるため、不経済です。 代わりに、必要なレイアウトを使用してより適切に Grid実現できます。

ヒント

を使用する場合は StackLayout、子要素が 1 つだけに設定されていることを確認します LayoutOptions.Expands。 このプロパティにより、指定された子は、StackLayout がそれに与えられる最大の領域を占有します。このような計算を複数回実行することは無駄です。

詳細については、「StackLayout」を参照してくださいXamarin.Forms。

グリッド

A Grid は、比例サイズまたは絶対サイズを持つ可能性がある行と列の要素を表示するために使用されます。 グリッドの行と列は、プロパティとColumnDefinitions共にRowDefinitions指定されます。

特定Gridのセルに要素を配置するには、プロパティとGrid.Row添付プロパティをGrid.Column使用します。 要素を複数の行と列にまたがるようにするには、プロパティとGrid.ColumnSpan添付プロパティをGrid.RowSpan使用します。

注意

レイアウトは Grid テーブルと混同しないでください。また、表形式のデータを表示するためのものではありません。 HTML テーブルとは異なり、a Grid はコンテンツをレイアウトするためのものです。 表形式データを表示する場合は、ListView、CollectionView、または TableView の使用を検討してください。

次の XAML は、2 つの行と 2 つの列を Grid 含む XAML を作成する方法を示しています。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

この例では、サイズ変更は次のように機能します。

  • 各行の明示的な高さは、デバイスに依存しない 50 単位です。
  • したがって、最初の列の幅は 、子に必要な幅に設定 Autoされます。 この場合、最初 Labelのデバイスの幅に合わせて 200 台のデバイスに依存しないユニットです。

自動サイズ設定を使用して、列または行内にスペースを分散できます。これにより、列と行のサイズをコンテンツに合わせて調整できます。 これは、a の高さ、または a RowDefinitionの幅 ColumnDefinitionを に設定することによって実現されます Auto。 比例サイズ設定を使用して、グリッドの行と列に使用可能な領域を加重比率で分散することもできます。 これは、演算子を使用*する値に、a または a RowDefinitionColumnDefinitionの幅の高さを設定することによって実現されます。

注意事項

可能な限り少数の行と列がサイズに Auto 設定されていることを確認してください。 自動サイズ調整された行または列はそれぞれ、レイアウト エンジンに追加のレイアウト計算を実行させることになります。 その代わりに可能であれば、固定サイズの行と列を使用してください。 または、列挙値を使用して比例量の領域を占有するように行と列を GridUnitType.Star 設定します。

詳細については、「グリッド」を参照してくださいXamarin.Forms。

FlexLayout

A FlexLayout は、スタック内で子要素を水平方向または垂直方向に表示するという点で似ています StackLayout 。 ただし、 FlexLayout 1 つの行または列に収まらない場合は子をラップすることもできます。また、子要素のサイズ、向き、配置をより細かく制御することもできます。

次の XAML は、ビューを 1 つの列に表示するオブジェクトを作成 FlexLayout する方法を示しています。

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

この例では、レイアウトは次のように機能します。

  • プロパティが Direction 設定 Columnされています。これにより、項目の FlexLayout 1 つの列に子が配置されます。
  • プロパティを AlignItems 設定すると Center、各項目が水平方向に中央揃えになります。
  • この JustifyContent プロパティは、すべての項目の間、および最初の項目の上と最後の項目の下に等しく、すべての残りの垂直領域を割り当てる、に設定 SpaceEvenlyされます。

詳細については、FlexLayout を参照してくださいXamarin.Forms。

RelativeLayout

A RelativeLayout は、レイアウト要素または兄弟要素のプロパティを基準にして要素を配置およびサイズ変更するために使用されます。 既定では、要素はレイアウトの左上隅に配置されます。 A RelativeLayout を使用して、デバイス サイズに比例してスケーリングする UI を作成できます。

内では RelativeLayout、位置とサイズは制約として指定されます。 制約には Factor 、位置と Constant サイズを他のオブジェクトのプロパティの倍数 (または小数) と定数として定義するために使用できるプロパティがあります。 さらに、定数は負の値になる可能性があります。

注意

A は RelativeLayout 、要素を独自の境界外に配置することをサポートします。

次の XAML は、要素を次のように配置する方法を RelativeLayout示しています。

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

この例では、レイアウトは次のように機能します。

  • 青色 BoxView には、50 x 50 デバイスに依存しない単位の明示的なサイズが指定されます。 レイアウトの左上隅 (既定の位置) に配置されます。
  • 赤 BoxView には、デバイスに依存しない 50 x 50 単位の明示的なサイズが指定されます。 レイアウトの右上隅に配置されます。
  • 灰色 BoxView には、デバイスに依存しない 15 単位の明示的な幅が与えられ、高さは親の高さの 75% に設定されます。
  • 緑色 BoxView には明示的なサイズが指定されていません。 その位置は、名前付きpoleに対して相対的に設定されますBoxView。

警告

可能であれば、RelativeLayout は使用しないでください。 CPU で相当な量の作業を実行しなければならなくなります。

詳細については、「RelativeLayout」を参照してくださいXamarin.Forms。

AbsoluteLayout

An AbsoluteLayout は、明示的な値またはレイアウトのサイズを基準とした値を使用して要素を配置およびサイズ変更するために使用されます。 位置は、子の左上隅を基準にして、子の左上隅で指定されます AbsoluteLayout。

An AbsoluteLayout は、子にサイズを設定できる場合、または要素のサイズが他の子の配置に影響しない場合にのみ使用する特別な目的のレイアウトと見なす必要があります。 このレイアウトの標準的な用途は、他のコントロールを含むページをカバーするオーバーレイを作成することです。これは、ユーザーがページ上の通常のコントロールとやり取りするのを防ぎ得る場合があります。

重要

HorizontalOptions プロパティと VerticalOptions プロパティは、AbsoluteLayout の子には影響しません。

内では AbsoluteLayout、添付プロパティを AbsoluteLayout.LayoutBounds 使用して、要素の水平方向の位置、垂直方向の位置、幅、高さを指定します。 さらに、添付プロパティは AbsoluteLayout.LayoutFlags 、レイアウト境界の解釈方法を指定します。

次の XAML は、要素を次のように配置する方法を AbsoluteLayout示しています。

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

この例では、レイアウトは次のように機能します。

  • それぞれ BoxView 100 x 100 の明示的なサイズが与えられ、水平方向に中央揃えの同じ位置に表示されます。
  • 赤 BoxView は 30 度回転し、緑 BoxView は 60 度回転します。
  • それぞれ BoxViewで、 AbsoluteLayout.LayoutFlags 添付プロパティが設定 PositionProportionalされ、幅と高さが考慮された後の残りの領域に位置が比例することを示します。

注意事項

レイアウト エンジンが追加のレイアウト計算を AbsoluteLayout.AutoSize 実行するため、可能な限りプロパティを使用しないでください。

詳細については、「AbsoluteLayout」を参照してくださいXamarin.Forms。

入力の透過性

各ビジュアル要素には、要素が入力を InputTransparent 受け取るかどうかを定義するために使用されるプロパティがあります。 既定値は、要素が false入力を受け取っていることを確認します。

このプロパティがレイアウト クラスに設定されている場合、その値は子要素に転送されます。 したがって、レイアウト クラスでプロパティをtrue設定InputTransparentすると、レイアウト内のすべての要素が入力を受け取りません。

レイアウトのパフォーマンス

レイアウトパフォーマンスを最大限に高めるには、「レイアウトパフォーマンスの 最適化」のガイドラインに従ってください。

さらに、レイアウト圧縮を使用することでページレンダリングのパフォーマンスを向上させることができます。これにより、指定されたレイアウトがビジュアル ツリーから削除されます。 詳細については、「 レイアウトの圧縮」を参照してください。