XAMLのお勉強メモ ⑤

こんばんは。ざわです。

今回もXAMLネタを載せさせてもらいます。

これまでのXAMLメモはこちらになります。

・XAMLのお勉強メモ①

・XAMLのお勉強メモ②

・XAMLのお勉強メモ③

・XAMLのお勉強メモ④

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

今回試してみたこと

　前回「マテリアルデザインの概念について学ぶ機会があり・・・」と書いたのですが、

　その中で「フローティングアクションボタン」というコンポーネントがでてきまして、

　今回はそれをXAMLで実装してみたいと思います。

　「フローティングアクションボタン（FAB）」とは、

　画面をスクロールしても一定の位置に表示され続ける円形のボタンで、

　アプリのUIでメインの操作を行うボタン、という認識です。

　調べていると方法はいくつかでてくるのですが、

　今回は「AbsoluteLayout」と「ImageButton」を使って実装します。

　１. 準備：CollectionViewを配置したページを用意

まず、スクロールしたときにフローティングアクションボタンが一定の位置に表示され続けるのが分かるように、CollectionViewを配置したページを用意します。 

今回は、 XAMLのお勉強メモ② で作成したCollectionViewに表示項目を追加してスクロールするようにしました。

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="App2.Views.CollectionViewPage">

    <ContentPage.Content>

        <CollectionView x:Name="colView"

                ItemsLayout="VerticalGrid, 2">

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <Grid Padding="10">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="35" />

                            <RowDefinition Height="35" />

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="70" />

                            <ColumnDefinition Width="80" />

                        </Grid.ColumnDefinitions>

                        <Image Grid.RowSpan="2"

                       Source="{Binding Image}"

                       Aspect="AspectFill"

                       HeightRequest="60"

                       WidthRequest="60" />

                        <Label Grid.Column="1"

                       Text="{Binding Name}"

                       FontAttributes="Bold"

                       LineBreakMode="TailTruncation" />

                        <Label Grid.Row="1"

                       Grid.Column="1"

                       Text="{Binding Comment}"

                       LineBreakMode="TailTruncation"

                       FontAttributes="Italic"

                       VerticalOptions="End" />

                    </Grid>

                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>

    </ContentPage.Content>

</ContentPage>

　２. 「AbsoluteLayout」と「ImageButton」を追加

下記の赤字の箇所を追加します。 

ImageButtonに、 AbsoluteLayout.LayoutBounds、AbsoluteLayout.LayoutFlags

を設定することで親要素（AbsoluteLayout）に対する位置やサイズを比率で指定しています。

 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="App2.Views.CollectionViewPage">

    <ContentPage.Content>

        <AbsoluteLayout>

            <!-- 一覧 -->

            <CollectionView x:Name="colView"

                    ItemsLayout="VerticalGrid, 2">

                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        （中略）

                    </DataTemplate>

                </CollectionView.ItemTemplate>

            </CollectionView>

            <!--ボタン-->

            <ImageButton

                AbsoluteLayout.LayoutBounds="0.95,0.95,80,80"

                AbsoluteLayout.LayoutFlags="PositionProportional"

                x:Name="btnAdd" Source="add.png" />

        </AbsoluteLayout>

    </ContentPage.Content>

</ContentPage>

  

■実行結果

　赤の「＋」の円形ボタンが追加されました。 

　右側の図が下にスクロールした図になります。円形ボタンの位置は変わっていないですね。 

　　　

　　

んーー、、このサンプルはCollectionViewの項目にボタンがかぶさっててイマイチですが・・（反省）

それでは、また！