様々なところでListViewは使われると思いますが、プロパティのHeaderを使用すると一緒にスクロールされてしまいます。

今回はそんなListViewに『AbsoluteLayout』を使用して『固定ヘッダー』を付けてみようと思います。

『AbsoluteLayout』の基本的な使い方は下記をご参照ください。

ちなみにStackLayoutを使うとAbsoluteLayoutよりも簡単に作成できますが、例えば後述する『リスト上の右端にイメージボタンを配置』などが出来ません。

AbsoluteLayoutの基本

リンクだけだと飛ぶのが面倒だ、という方にサンプルだけご紹介します。

とりあえずただ貼り付けます。

※分かりやすいようにLayoutごとに色付けしてあります。

VerticalOptions等の指定無しに下記のように画面いっぱいまで広がります。

そこにStackLayoutを配置してみます。

簡単にコードを説明すると、下記のコードでAbsoluteLayout内の位置を元にコントロールを配置していく、と定義しています。

次にAbsoluteLayout内の位置指定と、配置するコントロールのサイズを指定しています。

AbsoluteLayoutの左上が(0,0)で右下が(1,1)という感じです。

なので下記のコードだと『右下(1,1)に50×50(50,50)サイズで配置』となります。

実際の画面がこちら。

今回はStackLayoutを表示していますが、Opacity(不透明度:小さいほど透けてる)などを設定した画像を張れば、某フリマアプリとかにある右下の出品とか追加ボタンが出来ます。

画像にタップイベントを仕込むのは今回は省略します。

AbsoluteLayoutにおけるコントロールのサイズ指定

では早速、AbsoluteLayoutにListViewを配置してみましょう。

すると下記のような画面になります。

水色がAbsoluteLayoutの領域、赤色がListViewの領域です。

何故か、AbsoluteLayoutを全て埋めてくれません。

VerticalOptionsを設定したり、Gridを使っても下端までListViewが伸びません。

(タイトルにはAbsoluteLayoutにおける、と書きましたが、Layout全般に言えることかもしれません。)

そこで下記のようにAbsoluteLayoutの高さとListViewの高さをバインドします。

すると、AbsoluteLayoutいっぱいまでListViewの領域が広がります。

デバイスによって様々なサイズがある為、ListViewの高さは固定値をとれません。

ちょっと面倒ですが、こうしてListViewの高さをAbsoluteLayoutに合わせることが出来ました。

固定ヘッダーの作成

最初にコードを載せてしまいます。

MainPage.xaml

MainPageViewModel.cs

MainPageEntity.cs

以上のコードで生成されるのが下記の画面です。

ヘッダーを固定したうえでListViewを下端まで表示することが出来ました。

表示されてめでたしめでたしなのですが、1点だけ注意点があります。

それはAbsoluteLayoutの適用範囲に関して。

XAMLを参照していただきたいのですが、AbsoluteLayoutはListViewしか内包していません。

ここをヘッダーまで含めてしまうと、またもや下端まで届かなくなるのですが、その上で無理やりサイズ調整となると、AbsoluteLayoutの高さからヘッダーの高さを引いた高さをListViewの高さにバインドしなくてはいけなくなります。

XamarinではMultiBindingが標準で搭載されておらず、調べてみると誰かが実装してくれたコードなども見つかるのですが、依存関係などで動かなかったりしてハードルがめちゃくちゃ高いです。

※StackLayoutを使用する場合は高さのバインドは不要です。

以上です。

スポンサーリンク