2018-04-05Xamarin様々なところでListViewは使われると思いますが、プロパティのHeaderを使用すると一緒にスクロールされてしまいます。今回はそんなListViewに『AbsoluteLayout』を使用して『固定ヘッダー』を付けてみようと思います。『AbsoluteLayout』の基本的な使い方は下記をご参照ください。AbsoluteLayoutでプロポーショナルレイアウトちなみにStackLayoutを使うとAbsoluteLayoutよりも簡単に作成できますが、例えば後述する『リスト上の右端にイメージボタンを配置』などが出来ません。AbsoluteLayoutの基本リンクだけだと飛ぶのが面倒だ、という方にサンプルだけご紹介します。※分かりやすいようにLayoutごとに色付けしてあります。BackgroundColor="Aqua"></AbsoluteLayout>VerticalOptions等の指定無しに下記のように画面いっぱいまで広がります。そこにStackLayoutを配置してみます。AbsoluteLayout.LayoutFlags="PositionProportional"AbsoluteLayout.LayoutBounds="1,1,50,50"BackgroundColor="Red"/></AbsoluteLayout>簡単にコードを説明すると、下記のコードでAbsoluteLayout内の位置を元にコントロールを配置していく、と定義しています。AbsoluteLayout.LayoutFlags="PositionProportional"1AbsoluteLayout.LayoutFlags="PositionProportional"次にAbsoluteLayout内の位置指定と、配置するコントロールのサイズを指定しています。AbsoluteLayoutの左上が(0,0)で右下が(1,1)という感じです。下記のコードだと『右下(1,1)に50×50(50,50)サイズで配置』となります。AbsoluteLayout.LayoutBounds="1,1,50,50"1AbsoluteLayout.LayoutBounds="1,1,50,50"実際の画面がこちら。今回はStackLayoutを表示していますが、Opacity(不透明度:小さいほど透けてる)などを設定した画像を張れば、某フリマアプリとかにある右下の出品とか追加ボタンが出来ます。画像にタップイベントを仕込むのは今回は省略します。AbsoluteLayoutにおけるコントロールのサイズ指定では早速、AbsoluteLayoutにListViewを配置してみましょう。BackgroundColor="Red"/></AbsoluteLayout>すると下記のような画面になります。水色がAbsoluteLayoutの領域、赤色がListViewの領域です。AbsoluteLayoutを全て埋めてくれません。VerticalOptionsを設定したり、Gridを使っても下端までListViewが伸びません。(タイトルにはAbsoluteLayoutにおける、と書きましたが、Layout全般に言えることかもしれません。)そこで下記のようにAbsoluteLayoutの高さとListViewの高さをバインドします。Absolute}}"BackgroundColor="Red"/></AbsoluteLayout>すると、AbsoluteLayoutいっぱいまでListViewの領域が広がります。デバイスによって様々なサイズがある為、ListViewの高さは固定値をとれません。面倒ですが、こうしてListViewの高さをAbsoluteLayoutに合わせることが出来ました。最初にコードを載せてしまいます。}}}以上のコードで生成されるのが下記の画面です。ヘッダーを固定したうえでListViewを下端まで表示することが出来ました。表示されてめでたしめでたしなのですが、1点だけ注意点があります。それはAbsoluteLayoutの適用範囲に関して。XAMLを参照していただきたいのですが、AbsoluteLayoutはListViewしか内包していません。ここをヘッダーまで含めてしまうと、またもや下端まで届かなくなるのですが、その上で無理やりサイズ調整となると、AbsoluteLayoutの高さからヘッダーの高さを引いた高さをListViewの高さにバインドしなくてはいけなくなります。XamarinではMultiBindingが標準で搭載されておらず、調べてみると誰かが実装してくれたコードなども見つかるのですが、依存関係などで動かなかったりしてハードルがめちゃくちゃ高いです。※StackLayoutを使用する場合は高さのバインドは不要です。必須サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールAuthor:ささきゲームとC#が大好き。遊んだ分だけエンジニアシェアTOPへ。