BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース 今夏の.NET MAUI Previews: 新レイアウト、フォントスケーリング、アラート、ジェスチャ、クリッピングなど

今夏の.NET MAUI Previews: 新レイアウト、フォントスケーリング、アラート、ジェスチャ、クリッピングなど

ブックマーク

原文(投稿日:2021/08/17)へのリンク

.NET MAUIを支えるMicrosoftチームとコミュニティにとって、今年の夏はアクティブで生産的なものだった。プラットフォームに新たなアップデートと機能が導入された結果、今年の夏、6月にはPreview 6、8月にはPreview 7と、最新版が相次いで提供されたのだ。

6月はPreview 6の月だった。ひとつのプロジェクトがさらに改善され、ジェスチャ、モーダルページ、ビュークリッピング、ネイティブアラート、フレックスレイアウトといった新機能が導入された。

8月中旬には、開発者に向けて.NET MAUI Preview 7がリリースされ、.NET MAUI用の新レイアウト、アクセシビリティのための新機能、フォントスケーリングオプション、Xamarin.Forms Effectsとの互換性サポートなどが提供された。

SDKワークロードは.NET Unificationコンセプトの一環として導入されたもので、マシン上にインストールされた.NET SDK上に特定の開発者シナリオを実現する。Preview 4では、Android、iOS、macOS、Mac Catalyst用の基盤となるSDKが使用可能だったが、今回のPreview 6バージョンではmauimau-mobilemaui-desktopワークロードを使用することができる。モバイルあるいはデスクトップを対象にする場合は、ターゲットにしたいアプリタイプを開発者が選択できる。
.NET MAUIのGitHub wikiページには、.NET MAUIの現状と進展を記した詳細なリストがある。 

ジェスチャ認識(Gesture recognizers)を使えば、Xamarin.Forms内のビューでユーザインタラクションを検出することができる。今回のリリースでは、これが.NET MAUIアプリケーションでも可能になった。任意のビューインスタンスに対して、タップ、ピンチ、パン、スワイプ、ドラッグアンドドロップを適用できる。XAML内での使用方法は簡単だ。

<Grid>

    <Grid.GestureRecognizers>

        <TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding OnTileTapped}" />

    </Grid.GestureRecognizers>

    <!-- Grid content -->

</Grid>

クリッピングはコンテントの一部をマスクする手段である。この新機能を使えば、レイアウトないしビューのクリッピング領域に形状を追加することができる。次のコード例は、円のイメージを作る方法を示すものだ。

<Image Source="face.png">

    <Image.Clip>

        <EllipseGeometry RadiusX="80"

                         RadiusY="80"

                         Center="80,80" />

    </Image.Clip>

</Image>


Preview 6最大のアップデートのひとつが、ネイティブアラートである。

使用法は単純な情報ポップアップから、何種類の入力フォーム、複数のオプションを持ったアクションシートまで多岐にわたる。これらが.NET MAUIアプリケーションの任意のページから使えるようになった。

await DisplayAlert ("Alert", "You have been alerted", "OK");

.NET MAUI Preview 7には、レイアウトに関するアップデートが数多くある。

これまで.NET MAUIで使用されてきたXamarin.Formsレイアウトでは、レンダラと新たなハンドラべースのコントロール両方のサイズと位置を認識していました。最初にアプローチを選んだのは、短期間でUIを画面に表示できるようにして、40個のコントロールからなるUIライブラリの完成に注力したかったことと、Xamarin.Formsから移行したプロジェクトの互換性を確認したかったことが理由でした。それと同時に、Xamarin.Formsレイアウトで7年間培った知見を活用した新しいLayout Managerアプローチをベースとして、一貫性、パフォーマンス、メンテナンス性において最適化されたレイアウトの開発を続けてきたのです - David Oritinau、.NET Multi-platform App UI プリンシパルプログラムマネージャ

古いレイアウトはMicrosoft.Maui.Controls.Compatibilityネームスペースに置かれている。デフォルトで有効な新レイアウトは、GridFlexLayoutStackLayoutの2つの”エディション”であるHorizontalStackLayoutVerticalStackLayoutだ。

このStackLayoutに関しては、UIのニーズに合った方を選ぶように推奨されている。LayoutManagerがビューの計測と配置を担当するもので、どちらのレイアウトでもこれが使用されている。

また、レイアウトのデフォルトのスペーシングも変更され、旧レイアウトの設定値とは違って0値が設定されるようになった。0値にすることで表示がよりクリアになることが期待されるとともに、開発者がデザイン上のニーズに合わせるのも容易になっている。

グローバルスタイルの中で、これらの起動時の値を設定することも可能だ。 

<ResourceDictionary>

    <Style TargetType="StackLayout">

        <Setter Property="Spacing" Value="6"/>

    </Style>

    <Style TargetType="Grid">

        <Setter Property="ColumnSpacing" Value="6"/>

        <Setter Property="RowSpacing" Value="6"/>

    </Style>

</ResourceDictionary>


AbsoluteLayoutRelativeLayoutMicrosoft.Maui.Controls.Compatibilityネームスペースからのみ使用可能である。アプリケーション内部でこれらを使用したい場合は、Compatibilityネームスペースを使えば可能になる。

<ContentPage

    xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"

    ...

    >

    <cmp:AbsoluteLayout>

        ...

    </cmp:AbsoluteLayout>

</ContentPage>

フォントスケーリングは、.NET MAUIのすべてのプラットフォームに対して、すべてのコントロールでデフォルトとして有効になっている。このアップデートは、アクセシビリティを考慮したアプリの増加につながるだろう。ユーザがテキストサイズの設定をOSレベルで調整すれば、その変更がアプリ内にも反映されるからだ。新たに追加されたプロパティはFontAutoScalingEnabledで、FontImageSourceがフォントアイコンの場合でも機能する。FontAutoScalingEnabledを使うことで、フォントのスケーリングの有無を決定することができる。

その他の注目すべきアップデートとしては、以下のようなものがある - .NET MAULでのEffectsのサポート。AppThemeBindingの改良によるダークテーマモードとライトテーマモードのサポート。WinUI、Android、iOS用ScrollView handlerの統合。Android Shellのコアへの移植。Shellナビゲーションでの複雑なオブジェクトの受け渡し。ウィンドウ・ライフサイクルイベントページナビゲーションイベント、その他。

プロジェクトの開発の進捗状況や.NET MAUIの次期リリースについて知りたいのであれば、GitHub wiki roadmapにロードマップが公開されている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT