{"id":20272885,"url":"https://github.com/muak/aiforms.collectionview","last_synced_at":"2025-06-29T09:34:24.956Z","repository":{"id":52665505,"uuid":"150286485","full_name":"muak/AiForms.CollectionView","owner":"muak","description":"CollectionView for Xamarin.Forms","archived":false,"fork":false,"pushed_at":"2022-04-12T00:09:08.000Z","size":2359,"stargazers_count":57,"open_issues_count":9,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-06T20:40:46.431Z","etag":null,"topics":["infinitescroll","listview","recyclerview","uicollectionview","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muak.png","metadata":{"files":{"readme":"README-ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-25T15:17:04.000Z","updated_at":"2025-05-05T14:06:53.000Z","dependencies_parsed_at":"2022-08-21T14:40:15.928Z","dependency_job_id":null,"html_url":"https://github.com/muak/AiForms.CollectionView","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/muak/AiForms.CollectionView","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muak%2FAiForms.CollectionView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muak%2FAiForms.CollectionView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muak%2FAiForms.CollectionView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muak%2FAiForms.CollectionView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muak","download_url":"https://codeload.github.com/muak/AiForms.CollectionView/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muak%2FAiForms.CollectionView/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262570688,"owners_count":23330445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["infinitescroll","listview","recyclerview","uicollectionview","xamarin","xamarin-forms"],"created_at":"2024-11-14T12:47:23.386Z","updated_at":"2025-06-29T09:34:24.914Z","avatar_url":"https://github.com/muak.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CollectionView for Xamarin.Forms\n\nCollectionViewは、Xamarin.Formsで使用できるGridや水平方向レイアウトに対応した柔軟なListViewです。AndroidとiOSに対応しています。\n\n![Build status](https://kamusoft.visualstudio.com/NugetCI/_apis/build/status/AiForms.CollectionView)\n\n## コントロール\n\n* [GridCollectionView](#gridcollectionview)\n    * Grid状にアイテムを並べるListView\n* [HCollectionView](#hcollectionview) (HorizontalCollectionView)\n    * 水平方向にアイテムを並べるListView\n\n## 最小対応バージョン \n\niOS: iOS10  \nAndroid: version 5.1.1 (only FormsAppcompatActivity) / API22\n\n## デモ\n\n\u003cimg src=\"images/SS_ios.jpg\" height=\"800\" /\u003e \u003cimg src=\"images/SS_android.jpg\" height=\"800\" /\u003e\n\n\u003ca href=\"https://www.youtube.com/watch?feature=player_embedded\u0026v=qF4sVnE5Dao\n\" target=\"_blank\"\u003e\u003cimg src=\"https://img.youtube.com/vi/qF4sVnE5Dao/0.jpg\" \nalt=\"\" width=\"480\" height=\"360\" border=\"0\" /\u003e\u003c/a\u003e\n\n## 使用方法\n\n### Nuget でのインストール\n\n[https://www.nuget.org/packages/AiForms.CollectionView/](https://www.nuget.org/packages/AiForms.CollectionView/)\n\n```bash\nInstall-Package AiForms.CollectionView -pre\n```\n\n.NETStandardプロジェクトと各プラットフォームのプロジェクトにインストールする必要があります。\n\n### For iOS project\n\niOSの場合は AppDelegate.cs に以下の記述が必要です。\n\n```csharp\npublic override bool FinishedLaunching(UIApplication app, NSDictionary options) {\n    global::Xamarin.Forms.Forms.Init();\n\n    AiForms.Renderers.iOS.CollectionViewInit.Init(); //need to write here\n\n    LoadApplication(new App(new iOSInitializer()));\n\n    return base.FinishedLaunching(app, options);\n}\n```\n\n### Xaml からの使用方法 \n\n#### For GridCollectionView\n\n```xml\n\u003cContentPage \n    xmlns=\"http://xamarin.com/schemas/2014/forms\" \n    xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\" \n    xmlns:ai=\"clr-namespace:AiForms.Renderers;assembly=CollectionView\"\n    x:Class=\"Sample.Views.Test\"\u003e\n    \u003cai:GridCollectionView \n        ItemsSource=\"{Binding ItemsSource}\" TouchFeedbackColor=\"Yellow\"\n        ColumnWidth=\"100\" ColumnHeight=\"1.0\" \u003e\n        \u003cListView.ItemTemplate\u003e\n            \u003cDataTemplate\u003e\n                \u003cai:ContentCell\u003e\n                    \u003cLabel Text=\"{Binding Name}\" /\u003e\n                \u003c/ai:ContentCell\u003e\n            \u003c/DataTemplate\u003e\n        \u003c/ListView.ItemTemplate\u003e\n    \u003c/ai:GridCollectionView\u003e\n\u003c/ContentPage\u003e\n```\n\n#### For HCollectionView\n\n```xml\n    ...\n    \u003cai:HCollectionView \n        ItemsSource=\"{Binding ItemsSource}\" TouchFeedbackColor=\"Yellow\"\n        ColumnWidth=\"100\" HeightRequest=\"100\" Spacing=\"4\" IsInfinite=\"true\" \u003e\n        \u003cListView.ItemTemplate\u003e\n            \u003cDataTemplate\u003e\n                \u003cai:ContentCell\u003e\n                    \u003cLabel Text=\"{Binding Name}\" /\u003e\n                \u003c/ai:ContentCell\u003e\n            \u003c/DataTemplate\u003e\n        \u003c/ListView.ItemTemplate\u003e\n    \u003c/ai:HCollectionView\u003e\n```\n\n#### For GridCollectionView (グループ化)\n\n```xml\n    ...\n    \u003cai:GridCollectionView \n        ItemsSource=\"{Binding ItemsSource}\" TouchFeedbackColor=\"Yellow\"\n        ColumnWidth=\"100\" ColumnHeight=\"1.0\"\n        IsGroupingEnabled=\"true\" GroupHeaderHeight=\"36\"   \u003e\n        \u003cListView.GroupHeaderTemplate\u003e\n            \u003cDataTemplate\u003e\n                \u003cai:ContentCell\u003e\n                    \u003cLabel Text=\"{Binding Category}\" BackgroundColor=\"#E6DAB9\" /\u003e\n                \u003c/ai:ContentCell\u003e\n            \u003c/DataTemplate\u003e\n        \u003c/ListView.GroupHeaderTemplate\u003e\n        \u003cListView.ItemTemplate\u003e\n            \u003cDataTemplate\u003e\n                \u003cai:ContentCell\u003e\n                    \u003cLabel Text=\"{Binding Name}\" /\u003e\n                \u003c/ai:ContentCell\u003e\n            \u003c/DataTemplate\u003e\n        \u003c/ListView.ItemTemplate\u003e\n    \u003c/ai:GridCollectionView\u003e\n```\n\nHCollectionViewのグループでの使用は上と同じです。\n\n\u003e DataTemplateのルートには ViewCell ではなく ContentCell を配置する必要があることに注意してください。\n\n### グループ化した ItemsSouce の作成例\n\n```cs\npublic class PhotoGroup : ObservableCollection\u003cPhotoItem\u003e\n{\n    public string Head { get; set; }\n    public PhotoGroup(IEnumerable\u003cPhotoItem\u003e list) : base(list) { }\n}\n\npublic class PhotoItem\n{\n    public string PhotoUrl { get; set; }\n    public string Title { get; set; }\n    public string Category { get; set; }\n}\n\npublic class SomeViewModel\n{\n    public ObservableCollection\u003cPhotoGroup\u003e ItemsSource { get; } = new ObservableCollection\u003cPhotoGroup\u003e();\n\n    public SomeViewModel()\n    {\n        var list1 = new List\u003cPhotoItem\u003e();\n        for (var i = 0; i \u003c 20; i++)\n        {\n            list1.Add(new PhotoItem\n            {\n                PhotoUrl = $\"https://example.com/{i + 1}.jpg\",\n                Title = $\"Title {i + 1}\",\n                Category = \"AAA\",\n            });\n        }\n        var list2 = new List\u003cPhotoItem\u003e();\n        for (var i = 20; i \u003c 40; i++)\n        {\n            list2.Add(new PhotoItem\n            {\n                PhotoUrl = $\"https://example.com/{i + 1}.jpg\",\n                Title = $\"Title {i + 1}\",\n                Category = \"BBB\",\n            });\n        }\n\n        var group1 = new PhotoGroup(list1) { Head = \"SectionA\" };\n        var group2 = new PhotoGroup(list2) { Head = \"SectionB\" };\n\n        ItemsSource.Add(group1);\n        ItemsSource.Add(group2);\n    }\n}\n```\n\n### LoadMoreCommand と SetLoadMoreCompletion を使った実装例\n\n最後の項目までスクロールしたら続きを読み込むような処理は LoadMoreCommand と SetLoadMoreCompletion を使って実装できます。\n\n```xml\n\u003cai:GridCollectionView \n    ItemsSource=\"{Binding ItemsSource}\"\n    LoadMoreCommand=\"{Binding LoadMoreCommand}\"\n    SetLoadMoreCompletion=\"{Binding SetLoadMoreCompletion}\" \u003e\n    ...omitting\n\u003c/ai:GridCollectionView\u003e\n```\n\n```cs\npublic class SomeViewModel\n{\n    public ObservableCollection\u003cItem\u003e ItemsSource { get; } = new ObservableCollection\u003cItem\u003e();\n    public Command LoadMoreCommand { get; set; }\n    public Action\u003cbool\u003e SetLoadMoreCompletion { get; set; }\n\n    public async Task LoadMoreCommandExecute()\n    {\n        var items = await WebApi.GetItems(10);\n\n        if(items.Count == 0)\n        {\n            SetLoadMoreCompletion(true); // 全ての項目を読み込んだ\n            return;\n        }\n\n        foreach(var item in items)\n        {\n            ItemsSource.Add(item);\n        }\n\n        SetLoadMoreCompletion(false); // まだ全ての項目は読み込んでいない.\n    }\n}\n```\n\n## 使用可能なListViewの機能\n\n### Bindable properties\n\n* ItemsSource\n* IsGroupingEnabled\n* ItemTemplate\n* GroupHeaderTemplate\n* BackgroundColor\n* IsPullToRefreshEnabled – only GridCollectionView\n* RefreshCommand – only GridCollectionView\n* IsRefreshing – only GridCollectionView\n\n### Events\n\n* ItemTapped\n\n### Methods\n\n* ScrollTo\n\n### Caching Strategy\n\nListViewのCachingStrategyはGridCollectionViewとHCollectionViewの両方で使用可能です。\nただし、ListViewはデフォルトでRetainElementを使用しますが、CollectionViewではRecycleElementを使用することに注意してください。\n\nListViewCachingStrategyはプロパティではないので、もし変更する場合は、\"x:Arguments\" 構文を使用して設定する必要があります。\n\n```xml\n\u003cai:HCollectionView ...\u003e\n    \u003cx:Arguments\u003e\n        \u003cListViewCachingStrategy\u003eRetainElement\u003c/ListViewCachingStrategy\u003e\n    \u003c/x:Arguments\u003e\n    ...\n\u003c/ai:HCollectionView\u003e\n```\n\nあるいは、C#からコードで設定します。\n\n```cs\nvar collectionView = new HCollectionView(ListViewCachingStrategy.RetainElement);\n```\n\n## 画像を使う場合\n\nDataTemplateの要素に画像を使用する場合は、**[FFImageLoading](https://github.com/luberda-molinet/FFImageLoading)** を利用することを強く推奨します。\nCollectionViewには画像を非同期で処理したりキャッシュしたりする機能がないためです。\n\n## 共通の Bindable Properties (GridCollectionView / HCollectionView)\n\n* ItemTapCommand\n  * アイテムがタップされた時に発火するコマンド。\n* ItemLongTapCommand\n  * アイテムがロングタップされた時に発火するコマンド。\n* TouchFeedbackColor\n  * アイテムをタッチした時に表示するエフェクト色。\n* GroupFirstSpacing\n  * グループ内の最初のアイテムの上（GridCollectionView）または左（HCollectionView）の間隔。\n  * グループ機能を使っていない場合は最初のアイテムに適用されます。\n* GroupLastSpacing\n  * グループ内の最後のアイテムの下（GridCollectionView）または右（HCollectionView)の間隔。\n  * グループ機能を使っていない場合は最後のアイテムに適用されます。\n* [ScrollController](#scrollcontroller)\n  * ViewModelなどでCollectionViewのスクロールを制御する場合に使用するオブジェクト。\n* LoadMoreCommand\n  * 最後のアイテムの表示が検出された時に発火するコマンド。\n* SetLoadMoreCompletion\n  * 何か処理をした後で LoadMoreCommand を使い続ける場合は false を、そうでない場合は true をセットします。\n  * LoadMoreCommand が一度実行されると、SetLoadMoreCompletionに false をセットするまで再び LoadMoreCommand が実行されることはありません。\n* LoadMoreMargin\n  * LoadMoreCommandを発火させるまでの残りアイテム数。例えば3をセットすればおおよそ最後から3番目のアイテムが現れるくらいのタイミングでLoadMoreCommandが発火されます。規定値は0です。\n\n## GridCollectionView\n\nGrid状に各要素を配置するListViewです。これは [WrapLayout](https://github.com/muak/AiForms.Layouts#wraplayout) に似ていますが、セルをリサイクルできるという点などで異なります。\n\n### Bindable Properties\n\n* [GridType](#gridtype-enumeration)\n    * Gridレイアウトのタイプを UniformGrid か AutoSpacingGrid より選択します。(Default: AutoSpacingGrid)\n* PortraitColumns\n    * 縦向きの時に1行に表示する列数です。GridTypeがUniformGridの時のみ有効です。\n* LandscapeColumns\n    * 横向きの時に1行に表示する列数です。GridTypeがUniformGridの時のみ有効です。\n* RowSpacing\n    * 各行の間隔。\n* ColumnSpacing\n    * 各列の間隔。GridType が UniformGrid のときと、AutoSpacingGrid で SpacingType に Center が設定されているときのみ有効です。\n* ColumnWidth\n    * 各アイテムの列幅。GridType が AutoSpacingGrid のときのみ有効です。\n* ColumnHeight\n    * 各アイテムの高さ。5.0以下の場合は、幅に対する比率として扱われ、それより大きい値の場合は絶対サイズとして扱われます。\n* AdditionalHeight\n    * 追加のアイテムの高さ。この値と ColumnHeight を組み合わせると、高さを幅の100% + 15px にする といったような設定ができます。\n* GroupHeaderHeight\n    * グループヘッダーのセルの高さ。\n* [SpacingType](#spacingtype-enumeration)\n    * 列間の間隔の決め方を、Between と Center から選択します。GridType が AutoSpacingGrid のときのみ有効です。(Default: Between)\n* BothSidesMargin\n  * グループヘッダーセル以外のコンテンツ領域の左右の余白。GridType が UniformGrid のときのみ有効です。 (Default: 0)\n* PullToRefreshColor\n    * PullToRefreshのインジケータに使用する色。\n* IsGroupHeaderSticky\n  * グループヘッダーを上に固定するかどうか (iOS のみ) (default: true)\n* [その他の共通プロパティ](#%E5%85%B1%E9%80%9A%E3%81%AE-Bindable-Properties-GridCollectionView--HCollectionView)\n\n### Special Properties\n\n* ComputedWidth – ReadOnly\n    * 計算後の列幅。UniformGrid の場合に、実際のおおよその列幅を参照する場合などに使います。\n  \n    \u003e この値は、実際の幅より1pxほど異なることがあります。\n\n* ComputedHeight – ReadOnly\n  * 計算後のアイテムの高さ。\n\n### \u003ca href=\"#gridtype\"\u003e\u003c/a\u003eGridType Enumeration\n\n* UniformGrid\n    * 1行に配置する列数を指定します。各列幅は1行の幅をこの値で割った値になります。この列数は PortraitColumns と LandscapeColumns プロパティで指定できます。\n* AutoSpacingGrid\n    * 列幅を指定し、1行を満たすまでアイテムを配置して、各間隔を自動で調整します。列幅は ColumnWidth プロパティで指定でき、間隔の調整方法は、SpacingType プロパティで設定できます。\n\n### \u003ca href=\"#spacingtype\"\u003e\u003c/a\u003eSpacingType Enumeration\n\n* Between\n  * 両端に余白なしでアイテムを配置し、残りのスペースに他のアイテムを余白が均等になるように配置します。\n* Center\n  * 各アイテムはColumnSpacingで設定された間隔で均等に配置され、両端に残りのスペースを割り当てます。\n\n## HCollectionView\n\n水平方向にアイテムを配置するListViewです。IsInfinite プロパティを設定することでスクロールを循環させる（無限にする）ことができます。HCollectionViewもセルをリサイクルします。\n\n### Bindable Properties\n\n* ColumnWidth\n    * 列幅。\n* Spacing\n    * 各列の間隔。\n* GroupHeaderWidth\n    * グループヘッダーの幅。\n* IsInfinite\n    * スクロールを循環させるかどうか。 (Default: false)\n\n    \u003e iOSの場合、コンテナ幅を十分に満たす数のセルが必要です。\n    \u003e Androidの場合、完全に無限ではないので長時間スクロールすると端に到達することがあります。\n* [その他の共通プロパティ](#%E5%85%B1%E9%80%9A%E3%81%AE-Bindable-Properties-GridCollectionView--HCollectionView)\n\n### 行の高さについて\n\nHCollectionView の行の高さは、HeightRequestの値や、自身のサイズによって決定されます。固定値にする場合はHeightRequestを指定してください。\n\n## \u003ca href=\"#scrollcontroller\"\u003e\u003c/a\u003eScrollController\n\nこれは、ViewModelなどからスクロールのメソッドを呼び出すことができるオブジェクトです。\n以下のコードは、ViewModelから ScrollTo メソッドを呼び出している例です。\n\n```cs\npublic class SomeViewModel\n{\n    public ObservableCollection\u003cstring\u003e ItemsSource { get; } = new ObservableCollection\u003cstring\u003e{ new List\u003cstring\u003e{\"A\",\"B\",\"C\"} };\n    public IScrollController ScrollController { get; set; }\n\n    ...\n    public GoToItem(int target)\n    {\n        // Scroll to the specified item position at the first visible area position with animation. If the target is 1, scroll to \"B\".\n        ScrollController.ScrollTo(ItemsSource[target],ScrollToPosition.Start,true);\n    }\n    public GoToStart()\n    {\n        ScrollController.ScrollToStart(true); // scroll to \"A\" with animation\n    }\n    public GoToEnd()\n    {\n        ScrollController.ScrollToEnd(true); // scroll to \"C\" with animation\n    }\n}\n```\n\n```xml\n\u003cai:GridCollectionView \n    ItemsSource=\"{Binding ItemsSource}\"\n    ScrollController=\"{Binding ScrollController}\"\n    ...\n\u003e\n\u003c/ai:GridCollectionView\u003e\n```\n\n### IScrollController Methods\n\n* ScrollTo\n    * ``void ScrollTo(object sourceItem, ScrollToPosition scrollToPosition, bool animated = true)``\n    * ``void ScrollTo(object sourceItem, object sourceGroup ,ScrollToPosition scrollToPosition, bool animated = true)``\n    * アイテムを指定して、スクロールします。これはListViewのそれと同じです。\n    * 引数のアイテムはセルではなくItemsSourceの要素であることに注意してください。\n* ScrollToStart\n    * ``void ScrollToStart(bool animated = true)``\n    * 一番上か一番左にスクロールします。\n* ScrollToEnd\n    * ``void ScrollToEnd(bool animated = true)``\n    * 一番下か一番右にスクロールします。\n\n## License\n\nThe MIT Licensed.\n\nコードの一部は [Xamarin.Forms](https://github.com/xamarin/Xamarin.Forms) から取得しています.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuak%2Faiforms.collectionview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuak%2Faiforms.collectionview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuak%2Faiforms.collectionview/lists"}