質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

2回答

2581閲覧

Xamarin.FormsでListViewの1行あたりの表示数を端末の向きで変動させたい

takuo-nkmr

総合スコア8

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

0グッド

0クリップ

投稿2018/04/19 14:16

編集2018/04/19 14:24

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

こんなのは如何でしょう?
FlowListView for Xamarin.Forms

投稿2018/04/20 04:48

hihijiji

総合スコア4150

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takuo-nkmr

2018/04/20 05:48

ご回答ありがとうございます。 質問前に上記を使用したのですが、端末を回転させた際の表示数変更ができませんでした。 (こちらの使用方法が悪かっただけかもしれませんが・・・)
takuo-nkmr

2018/04/24 06:26

上記、提示いただいておりました「FlowListView for Xamarin.Forms」を使用して 今回の目的の機能を実装することができました。 私の認識不足でした・・・ありがとうございました。 解決した際のソース等は追記事項として記載しておきます。
guest

0

FlowListView for Xamarin.Forms」を使用して、画面の回転時(OnSizeAllocated)に対象のListViewの
FlowColumnCountの設定値を更新することで実現できました。

該当のソースはxaml、コードビハインドそれぞれ下記となります。

また、下記コードを含むサンプルプロジェクトを下記に作成致しました。
https://github.com/takuo-nkmr/FlowListViewSample

xml

1<?xml version="1.0" encoding="utf-8"?> 2<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 3 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 4 xmlns:local="clr-namespace:FlowListViewSample" 5 xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView" 6 x:Class="FlowListViewSample.FlowListViewSamplePage"> 7 <flv:FlowListView x:Name="FlowList" 8 FlowColumnCount="1" HasUnevenRows="false" 9 FlowItemsSource="{Binding Items}" RowHeight="100"> 10 <flv:FlowListView.FlowColumnTemplate> 11 <DataTemplate> 12 <Frame BackgroundColor="#6D6D6D" Padding="1" 13 HasShadow="false"> 14 <StackLayout HorizontalOptions="FillAndExpand" 15 BackgroundColor="#FFF"> 16 <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 17 Text="{Binding Path=Title}"/> 18 </StackLayout> 19 </Frame> 20 </DataTemplate> 21 </flv:FlowListView.FlowColumnTemplate> 22 </flv:FlowListView> 23</ContentPage> 24

C#

1using System.Collections.ObjectModel; 2using Xamarin.Forms; 3using DLToolkit.Forms.Controls; 4using FlowListViewSample.Model; 5 6namespace FlowListViewSample 7{ 8 public partial class FlowListViewSamplePage : ContentPage 9 { 10 ObservableCollection<ItemModel> Items = new ObservableCollection<ItemModel>(); 11 12 private double width = 0; 13 private double height = 0; 14 15 public FlowListViewSamplePage() 16 { 17 InitializeComponent(); 18 FlowListView.Init(); 19 20 FlowList.FlowItemsSource = Items; 21 22 for (var i = 1; i <= 30; i++) 23 { 24 var itemModel = new ItemModel() 25 { 26 Title = "Test-" + i.ToString() 27 }; 28 29 Items.Add(itemModel); 30 } 31 } 32 33 protected override void OnSizeAllocated(double width, double height) 34 { 35 base.OnSizeAllocated(width, height); 36 37 if (this.width != width || this.height != height) 38 { 39 this.width = width; 40 this.height = height; 41 if (width > height) 42 { 43 // Landscape : 2 items per row 44 FlowList.FlowColumnCount = 2; 45 46 } 47 else 48 { 49 // Portrait : 1 item per row 50 FlowList.FlowColumnCount = 1; 51 } 52 } 53 } 54 } 55} 56

■実行結果
イメージ説明
イメージ説明

一応うまくいきましたが、リストの内容が画像を含むものになったりすると
パフォーマンスに難がありそうにも見えます。

とはいえ、本件の目的は達成できましたので、解決済みと致します。
ありがとうございました!

投稿2018/04/24 06:49

takuo-nkmr

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問