Xamarin.FormsでListViewの1行あたりの表示数を端末の向きで変動させたい
- 評価
- クリップ 0
- VIEW 1,496
前提・実現したいこと
Xamarin.Formsでアプリを開発しています。
ListViewの1行あたりのitem表示数を、縦向き時は1行1item、横向き時は1行2itemの表示となる
画面を作成したいです。
下記画像のようなイメージです。
※追記:上記図ですが、横向き時は ×portrait ◯landscape です。
試したこと
カスタムレイアウトを作成し、1行に2item以上表示するように回りこみさせるところまでは
作成できたのですが、1行の表示を2itemに制限することができておりません。
OnSizeAllocated時にStyleの切り替えを試みたのですが、カスタムレイアウトに適用するための
ResourceDictionaryの記載方法がわからず、そもそもこの方法で実現可能なのかも不明です。
制御可能な手段がありましたら、ご教授いただきたいです。
補足情報(FW/ツールのバージョンなど)
- Visual Studio for Mac 7.4.3
- Xamarin.Forms 2.5.0.121934
- 検証端末: Nexus7(Android6.0.1)
iPad Air2(iOS11.3)
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
こんなのは如何でしょう?
FlowListView for Xamarin.Forms
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
「FlowListView for Xamarin.Forms」を使用して、画面の回転時(OnSizeAllocated)に対象のListViewの
FlowColumnCountの設定値を更新することで実現できました。
該当のソースはxaml、コードビハインドそれぞれ下記となります。
また、下記コードを含むサンプルプロジェクトを下記に作成致しました。
https://github.com/takuo-nkmr/FlowListViewSample
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlowListViewSample"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
x:Class="FlowListViewSample.FlowListViewSamplePage">
<flv:FlowListView x:Name="FlowList"
FlowColumnCount="1" HasUnevenRows="false"
FlowItemsSource="{Binding Items}" RowHeight="100">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Frame BackgroundColor="#6D6D6D" Padding="1"
HasShadow="false">
<StackLayout HorizontalOptions="FillAndExpand"
BackgroundColor="#FFF">
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
Text="{Binding Path=Title}"/>
</StackLayout>
</Frame>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>
</ContentPage>
using System.Collections.ObjectModel;
using Xamarin.Forms;
using DLToolkit.Forms.Controls;
using FlowListViewSample.Model;
namespace FlowListViewSample
{
public partial class FlowListViewSamplePage : ContentPage
{
ObservableCollection<ItemModel> Items = new ObservableCollection<ItemModel>();
private double width = 0;
private double height = 0;
public FlowListViewSamplePage()
{
InitializeComponent();
FlowListView.Init();
FlowList.FlowItemsSource = Items;
for (var i = 1; i <= 30; i++)
{
var itemModel = new ItemModel()
{
Title = "Test-" + i.ToString()
};
Items.Add(itemModel);
}
}
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
if (this.width != width || this.height != height)
{
this.width = width;
this.height = height;
if (width > height)
{
// Landscape : 2 items per row
FlowList.FlowColumnCount = 2;
}
else
{
// Portrait : 1 item per row
FlowList.FlowColumnCount = 1;
}
}
}
}
}
一応うまくいきましたが、リストの内容が画像を含むものになったりすると
パフォーマンスに難がありそうにも見えます。
とはいえ、本件の目的は達成できましたので、解決済みと致します。
ありがとうございました!
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/04/20 14:48
質問前に上記を使用したのですが、端末を回転させた際の表示数変更ができませんでした。
(こちらの使用方法が悪かっただけかもしれませんが・・・)
2018/04/24 15:26
今回の目的の機能を実装することができました。
私の認識不足でした・・・ありがとうございました。
解決した際のソース等は追記事項として記載しておきます。