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

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#でのアプリ開発がより広まってくれればいいなぁと思っております。
今回はこの辺で、ではまた！

コメント

コメントを投稿

このブログの人気の投稿

Power Automateでファイル名から拡張子を取得

イメージ
Power Automateでファイル名から拡張子を取得 Power Automateでファイル名から拡張子を取得 以前、 Power Automateで自動ファイルバックアップ（OneDrive） という記事で ファイル名から拡張子を取得する方法 をまとめました。 その際には複数の変数を用意して、かつ関数も使用して取得していましたが、これはフロー作成にかなり手間がかかるものです。 そのため、どうにか簡略化できなかと検討したところ新しい取得方法で、より簡潔に作成できることがわかったので、今回はファイル名から拡張子を取得する方法について新しい手法をまとめたいと思います。 作成方法を解説 まず取得する方法を説明する前に、以前の方法ではどのように取得していたかというと、 ファイル名から拡張子までの文字数を取得 ファイル名の拡張子部分の長さを取得する 拡張子の開始位置から、拡張子の文字数分だけ切り取って取得する といった手順を踏んでいました。 詳細は先程リンクを貼っているブログか、文字列抽出方法をまとめたブログがあるので参考にしてください。 Power Automateで文字列抽出 このように以前の方法ですと、ステップ数が増えるため作成も手間ですし、メンテナンス性も良くない状況です。 なのでもっと簡略化して実装する方法を紹介します。また2つの関数を使用するものの、シンプルなため可読性は高いです。さらに、今回の方法で実装すると事前準備していた変数3つが不要になります！！ では、いよいよ本題に入ります。 今回使用する関数は split と last の2つになります。 split関数 split関数 は文字列を指定の文字で 分割 する関数です。 ...
続きを読む

PowerAppsで座席表を作成する

イメージ
PowerAppsで座席表を作成する。 PowerAppsで座席表を作成する。 昨今、会社では指定された先がなく、自由に席を選んで仕事ができる フリーアドレス が増えてきているのではないでしょうか。 私の会社も フリーアドレス を採用しているのですが、その日の気分によって座る場所を変えることができるので私は気に入っています。 ただ自由で便利な反面、困る場面もあるかと思います。 フリーアドレス は自由に座れるのですが、だれがどこに座っているのか分からなくなる状況があります。 さらに テレワーク が重なると出社していない人もいるため、より分からなくなるかと思います。 みなさんの会社でも同様の状況になっていないでしょうか。 もちろん最近は便利なアプリなどによって改善されていたり気がしますが、そのアプリの利用料などがかかるため導入にためらってしまったりするかと思います。 なので今回は、この課題を Power Apps で改善をしていきます。 アプリの概要 アプリの概要を簡単に説明します。 Labelを複数配置していき、机や椅子、その他会議室やロッカーなどを表現 席用のLableの「OnSelect」メソッドにフロー起動の処理を追加 上記だけで簡易な座席表を作成できます。 別途データベース用のListsを作成しておきます。 それでは、Listsの作成から進めています。 下準備 今回のアプリのデータベースはMicrosoft Listsを使用します。 適当な場所にListsを下記内容で作成します。 必要なカラムは「Title(Id)」「Name」です。 今回は適当に数個座席を作成しておきます。「Name」部分は空...
続きを読む

Power AutomateでTeamsのキーワードをトリガーにする

イメージ
Power AutomateでTeamsのキーワードをトリガーにする Power AutomateでTeamsのキーワードをトリガーにする Power Automate には Teams に使えるアクションが多く存在しています。 その中でも今回は「 キーワードが言及された場合 」というトリガーを紹介していきたいと思います。 このトリガーは、グループチャットもしくはチャネルに投稿されたメッセージに、指摘のキーワードが含まれていると起動するトリガーになります。キーワードが含まれてさえいればいいので、チームなどでキーワードを取り決めておけばいつでも起動できます。 フローを作成してみる 今回はトリガーなので、起動することさえPower Automate上で確認すればよいですが、せっかくなので何かしらのメッセージをTeams上に投稿したいと思います。 トリガーを選択する フローの作成で、「自動化したクラウドフロー」を選択します。 今回のフローの名は「キーワード検知」として、フローのトリガーにはキーワードで検索し「キーワードが言及された場合」を選択します。 トリガーの設定をする このトリガーでは「グループチャット」か「チャット」のどちらかを選択することができます。 今回は設定値を下記のようにします。 メッセージの種類：グループチャット 検索キーワード：test Chat-1：テストの会議 これで、「テストの会議」のチャットでメッセージに「test」が含まれる投稿がされた際に、このフローが...
続きを読む