Xamarin.FormsのGridを使って画面作成

Xamarin.FormsのGridを使い画面作成

今回はXamarin.Fromsでアプリ作成を行っていきます。
アプリ作成において一番大変なのって画面レイアウトだと私は思っています。中央寄せにしたいのに左寄せのままだったり、画面下部に設置したのに真ん中らへんにあったり、、、「Excelならすぐに作成できるのになぁ」って思っていました。
そこで調べてみたら、Gridというものが存在していることを知りました。
GridはExcelのように行と列を作成し、そのセルの中にラベルやボタンを当てはめていくというものです。HTMLだとTableと同じ感じですかね。
Gridを使うことでよりレイアウトをきれいにまとめられると思います。
では、早速Gridを使って画面作成をしていきます。。
今回作成していく画面は以下のような感じです。

これは今まで作成していた重要英熟語やMy単語帳の画面と同じレイアウトとなります。

Gridで基盤作成

まずは何行何列の画面構成にするのかを決めます。
列はRowで行はColumnとなっています。
今回は9行5列の画面です。
XAMLの記述は以下のようになります。

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10" />
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
        <RowDefinition Height="10" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 </Grid>

列はGrid.RowDefinitions内で定義し、作成する列分のRowDefinitionを記述します。
行はGrid.ColumnDefinitions内で定義し、作成する行分のColumnDefinitionを記述します。
HeightやWidthは実際の値や比率を指定でき、大きさが決まる順番は「数値 → Auto → 比率」となります。比率は「*」を1として、「2*」は2となります。
今回記述したXAMLに従うと、1,2,8,9列目の高さで設置し、残った分を残る3,4,5,6,7列目で分割することになります。4,6列目は「2*」であるので合計７で残った画面を分割します。

セルにラベルなどを当てはめていく

上記で作成した基盤に、文字を表示するラベルやボタンなどを当てはめていきます。
Gridタグの中でGrid.RowDefinitionsなどの下に記述し、Labelタグに「Grid.Row="2" Grid.Column="0"」のように列と行を指定します。なお列と行は0からスタートします。
またGridではExcelと同様にセルの結合を行う事もできます。Grid.ColumnSpan="5"のように記述することで、ある行の5つ分のセルを結合することができます。
Excelのシート上では以下のような画面構成となります。

XAMLの記述は以下のようになります。

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10" />
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="80" />
        <RowDefinition Height="10" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label x:Name="numberLabel" Grid.Row="1" Grid.Column="2" Text="1/1" HorizontalTextAlignment="Center"/>

    <Label Grid.Row="2" Grid.Column="0" Text="単語" TextColor="#ffa05ssd" HorizontalTextAlignment="Center"/>
    <Label x:Name="englishLabel" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="5" Text="English" FontSize="30" HorizontalTextAlignment="Center"/>

    <Label Grid.Row="4" Grid.Column="0" Text="意味" TextColor="#ffa0522d" HorizontalTextAlignment="Center"/>
    <Label x:Name="japaneseLabel" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5" Text="英語" FontSize="30" HorizontalTextAlignment="Center"/>

    <Button Grid.Row="7" Grid.Column="1" Text="⬅" />
    <Button Grid.Row="7" Grid.Column="2" Text="リスト"/>
    <Button Grid.Row="7" Grid.Column="3" Text="➡" />
 </Grid>    

このように基盤となるセルを作成し、そのセルに当てはめることでレイアウトを整えてかつ比較的簡単に画面作成をすることができます。
ただし、このGridではスクロールに対応することはできないのかもしれません。（調べてないので確実ではありませんが、）

まとめ

ということで今回はGridを使って画面作成を行いました。
Xamarin.FormsならAndroidとiosを同時に作成できるので是非これからも使っていきたいと思っています。
これからもXamarin.Formsについての記事を書いていくと思います。
C#でのアプリ開発がより広まってくれればいいなぁと思っております。
今回はこの辺で、ではまた！