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

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

ただいまの
回答率

90.83%

  • C#

    6301questions

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

  • Visual Studio

    1625questions

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

  • Xamarin

    440questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 188

takuo-nkmr

score 2

 前提・実現したいこと

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 14:48

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

    キャンセル

  • 2018/04/24 15:26

    上記、提示いただいておりました「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で質問しよう!

  • ただいまの回答率 90.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    6301questions

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

  • Visual Studio

    1625questions

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

  • Xamarin

    440questions

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