Xamarin.Forms 4.0を試してみた

2018年 Dec 10日 (Mon)

この記事は、mediba Advent Calendar 2018の10日目です。

コミュニケーションデザイン本部創造部アプリ開発グループの松島です。Xamarinが大好きです。

今回は、Xamarin.Forms 4.0のプレビュー版がリリースされたので、早速試してみました。

試したバージョンは4.0.0.8055-pre1です。

新機能

以下の３つの機能が追加されました。

現状では、これらの機能を使うためには、AppDelegateやMainActivityで以下のように設定する必要があります。

global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");

Shell

Shellは、MasterDetailPageのような所謂ハンバーガーメニューを作成する機能です。MasterDetailPageとどこが違うのかというと、MasterDetailPageでページを切り替えるには、前のページを破棄して、切り替えるたびに新しくページを作成することになるのですが、Shellは、最初にページを作ってしまい、あとは表示を切り替えるだけになっています。その点は、TabbedPageに似ています。

Shellは、以下のように使います。

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
       xmlns:local="clr-namespace:XamarinForms4App" 
       x:Class="XamarinForms4App.MainPage">
    <Shell.Resources>
        ...
    </Shell.Resources>
    <ShellItem Title="Visual">
        <ShellSection Title="Material"> 
            <ShellContent>
                <local:MaterialPage/>
            </ShellContent>
        </ShellSection>
        <ShellSection  Title="Normal">
            <ShellContent>
                <local:NormalPage/>
            </ShellContent>
        </ShellSection>
    </ShellItem>
    <ShellItem Title="CollectionView">
        <ShellContent>
            <local:CollectionViewPage/>
        </ShellContent>
    </ShellItem>
</Shell>

ShellItemで、メニューを追加して、ShellContentに表示するページを含めます。ShellSectionを使えば、タブで切り替えることができるページにすることができます。

あと、iOSでメニューアイコンを表示するには、3bar.pngという名前で画像を含めないといけないようです。

Visual

今までは、共通に書いていても、iOSとAndroidで見た目が結構異なり、デザインに苦労することがありました。4.0からは、マテリアルデザインで見た目も同じようにすることが可能になりました。

VisualプロパティをMaterialにすることで、マテリアルデザインにすることができます。

<ContentPage ...
             Visual="Material">
    ...
</ContentPage>

CollectionView

グリッド表示をするには、AiForms.CollectionViewというライブラリを使っていたのですが、ようやく公式にも登場しました。

カラム数が3つのグリッドを作るには以下のようにします。

<CollectionView ItemsSource="{Binding Items}" >
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical"
                         Span="3" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
             <StackLayout HeightRequest="100">
                <Label Text="{Binding Title}"/>
                <Label Text="{Binding Detail}" FontSize="Small" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

現状では、クリックイベントもスペースの設定もできないようなので、まだまだこれからといった感じです。

GitHub

作ったものはここに置いておきます。

おわりに

最近、Xamarin.Formsの進化が目覚ましいです。まだまだのところもありますが、大分使いやすいものになってきました。今後も要チェックですね。