ScrollView Adapter (ListView, GridView)
スクリプト/GUI
$5.00 (税抜き) => 無料化 100%OFF 【開催期間】2019年8月21日〜
スクロールビューを拡張して、機能性豊かなListView, GridViewを再現するスクリプトです。
ソシャゲの「カード一覧」タイプのグリッドビューができます。
機能一覧
・プラットフォームに依存しない
・ソシャゲのカード一覧のような「グリッド」型のスクロールビュー
・アイテム(セル)をクリックすると展開 / 折りたたみ
・異なるアイテムサイズに対応した縦、横スクロールビュー
・指定したセル番号にスムーズスクロールして移動
・アイテムの追加時にコンテンツの端に固定して自動スクロール
スクロールビューの種類(サンプルシーン)
「ScrollView Adapter (ListView, GridView)」には
3種類のサンプルシーンが含まれています。
① Classic GridView
セルを縦、横、等間隔に配置するスクロールバー。
「イメージと名前」が一組のセル。
追加を行うと左から順に追加され、列数を超えると次の行にシフトします。
ソシャゲのカード管理画面で良く見る定番のスタイルですね。
② Vertical Classic ListView
垂直スクロールのリストビューです。
クリック時に「セルの展開 / 折りたたみ」ができます。
-クリック時にアイテムを展開/折りたたみするユーティリティスクリプト
① Horizontal Classic ListView
水平方向のリストビューです。
セルをつまんで左右への移動、スクロールバーでの移動がスムーズ。
サンプルシーンを起動する前の準備
単体で起動するとセルに何も表示されない場合があります。
「Build Settings」に3つのサンプルシーンを登録すると解決します。
パネルの操作方法
画面左にデバッグ用の操作パネルが表示されます。
Set Count:指定した数のセル数にセット
SmoothScrollTo:セルに割り振られた番号へスムーズにスクロール
+1 Tall:スクロールビューの最後尾にセルを1つ追加する
-1 Tall:スクロールビューの最後尾のセルを1つ削除する
+1 Head:スクロールビューの先頭にセルを1つ追加する
-1 Head:スクロールビューの先頭のセルを1つ削除する
指定したセル番号へスムーズに移動
① Classic GridView
3列1行のグリッドビュー
全40セルが表示されていて何番のセルを中央にフォーカスさせるか指定します。
指定したセル番号がちゃんと画面内に表示されました。
指定したセルをフォーカスする際のスムーズアニメーションは中々カッコ良い。
② Vertical Classic ListView
セルの高さが可変していても大丈夫!
ちゃんと指定セル番号を中央に表示してくれました。
固定フラグON/OFFの挙動について
「+1 Tall」「-1 Tall」にてリストビューの最後に、
追加 & 削除を行った際に、スクロールビューのフォーカス位置が変わります。
末尾にセルを追加(固定する ON)
リストビューの最後にフォーカスを合わせた状態で
セルの追加&削除を行うと、
スクロールビューの表示位置がコンテンツの端まで移動して何が追加されたのか同時にチェックできるようになります。
末尾のセルを削除(固定しない OFF)
最終セルから順に削除していくと、最終位置を表示したまま削除します。
先頭からセルを削除
先頭セルから1つ1つ消していく動作です。
フラグON/OFFでフォーカスがどう変化するか確認してみました。
どちらも同じ挙動の結果。
フラグON / OFFどちらもスタート地点にフォーカスしたまま消えてくれます。
先頭からセルを追加
それとは逆に、スタート地点のビューを表示している状態で、
セルを先頭から追加するとどうなるか確認してみます。
これがちょっと厄介っぽくて、
フラグがONの場合はコンテンツの端に合わせる処理が入るため、
先頭からセルを追加していくと、1行ずつですがズレていく結果になりました。
(フラグONの扱いは「コンテンツの端を表示している時のみ作動する」条件を付け加えればこの現象は起きないと思われます)
ちなみに「リストが空の状態」からスタートしてみた結果、
「コンテンツの端」にいると見なして最終位置にフォーカスを合わせて追従してくれました。これは違和感なくて良い感じですね。
フラグOFF / 先頭にフォーカスを合わせた場合の挙動です。
先頭からセルを追加してもスクロールバーの位置に変化はありません。
その場をキープしたまま追加されるようになります。
コンテンツの端に合わせてない時の挙動
スクロールバーの位置から中間辺りを参照しています。
この状況で、「セルの追加&削除」を行った際の挙動がどうなるか見てみましょう。
追加:1行ズレが発生する
削除:ズレる事はなくスクロールバーのみ変化する
フラグONにしたままですと、
セル追加時にズレが発生することが判明しました。
解決策として、スクロールバーの表示位置がどこを見ているか判定して、
コンテンツの端以外の時は「フラグOFF」に切り替えれば改善すると思います。
作り方(構造チェック)
Prefabをシーンに投入する
3種類のリストビューは完成状態がPrefabになっており、
それをシーンにドロップするシンプルな設計でした。
UIElementsフォルダ内のPrefabをcanvasの子にするとリストビューの外観がサンプルと同じようになります。
・HorizontalListView
・VerticalGridView
・VerticalListView
スクリプトをアタッチする
シーンに追加したPrefabに対応するサンプルスクリプトをアタッチ。
スクリプトの中身を確認してどのように動くか確認しておきましょう。
コード設定:
(これらの手順に従って、次のコード例でどのように実行されるかを常に確認します。HorizontalClassicListView.cs)
GameObject-> UI-> Scrollを使用してスクロールビューを作成した後の通常のフローは次のとおりです。
表示:
1. create your own implementation of CAbstractViewsHolder, let's name it MyItemViewsHolder
2. create your own implementation of ClassicSRIA<MyItemViewsHolder>, let's name it MyClassicSRIA
3. override Start(), call base.Start(), after which:
4. MyClassicSRIA.ResetItems(int count)を1回(およびデータセットが変更されるたびに)呼び出すと、作成が必要なビューごとにCreateViewsHolder(int)が呼び出されます。
-newOrRecycledViewsHolder.rootはnullになるため、プレハブをインスタンス化する必要があります)、割り当てて、newOrRecycledViewsHolder.CollectViews()を呼び出します。または、そのAbstractViewHolder.Init(..)を呼び出すことができます
メソッドは、主にプレハブをインスタンス化し、(必要に応じて)呼び出します
CollectViews()-作成後、MyClassicSRIA.UpdateItemViewHolder()のみが表されたときに呼び出されます
アイテムの変更-MyClassicSRIA.UpdateViewsHolder(MyItemViewsHolder)は、アイテムを表示する場合、または単に更新する必要がある場合に呼び出されます。
-newOrRecycledViewsHolder.ItemIndexを使用してアイテムインデックスを取得します。これにより、データセットから関連モデルを取得できます。-ここでは、newOrRecycledViewsHolder.rootはnullではありません(ビューホルダーがCreateViewsHolder(..)で適切に作成された場合)。
UI要素の値の変更のみが必要な有効なオブジェクトが割り当てられています(一般的な方法は、モデルを取得してビュー自体を更新するビューホルダーにヘルパーメソッドを実装することです)
まとめ
サンプルのリストビューを触っただけですが、完成度がとても高く気分が高まりました。
コンテンツの端に固定するフラグの扱いだけ、実装してみないとわかりませんが気になるポイントかなと思えます。
また、基本的にリストビューの制御には「コーディングが必要」です。
「コーディングできない」方は、
有料版がビジュアルスクリプティングの「Playmaker」に対応していますので検討してみるのも良さそうです。
アセット説明(機械翻訳)
Unity 4.7.2 以降のバージョンが必要
簡単なListViewまたはGridViewを作成できる便利なスクリプトのセット。
オブジェクトプーリングを使用しないため、アイテムが過剰にない場合にのみ役立ちます。
これは最適化されていない Optimized ScrollView Adapterの簡易バージョンで、より大きな機能セットにアクセスできます。
含まれる機能:
-プラットフォームに依存しない
-アイテムは異なるサイズを持つことができます(LayoutElementを使用)
-実行時に、リスト内の任意の位置にアイテムを追加/削除します
-追加時にコンテンツの開始/終了エッジを固定します
-SmoothScrollTo特定のアイテム
-クリック時にアイテムを展開/折りたたみするユーティリティスクリプト
デモシーン:
-垂直リストビュー
-水平リストビュー、
- グリッドビュー
独自のユースケースをコーディングする必要があることに注意してください。 コア機能のみを提供します。 デモシーンにはそれぞれ、実行方法を正確に示すサンプルスクリプトが含まれています。
セール情報
2019年8月21日 無料化しました。定価 $5.00 (税抜き)
Optimized ScrollView Adapter
高機能&最適化したフルバージョン(別売り)
スクリプト/GUI
$39.00(税抜き) 【更新日】2019年8月14日
パフォーマンスの最適化、機能性をグレードアップしたUnityの組み込みスクロールビューの究極の代替品。
任意のデバイスのリスト、グリッド、またはテーブルを使用して、大量のデータを効率的に表示できます。
YouTube: 3.0 | 3.1 | 4.1 | 4.3 | 5.0
Apps using OSA | In-browser demo (WebGL) | Android demo (APK)
Manual | Playmaker tutorial
Forum | Discord chatroom
扱うデータが多くなって負荷が気になったら、
「Optimized ScrollView Adapter」を検討すると良いでしょう。
アセット説明によるとビッグデータ級の「20億個のアイテム」が処理できるそうです。
•テーブルのようなデータの値を表示/変更できるTableView
•アイテムは異なるサイズを持つことができます
•通常のScrollRectを親/子としてネストするなど、ネストされたScrollViewsはすぐにサポートされます(パフォーマンスのためにデフォルトで無効になっています)
•クリック時にアイテムを展開/縮小するために使用できるサンプルシーンのシンプルなExpandCollapseOnClickユーティリティスクリプト
•無限ループ、オプション
・表示されていない場合でも、アイテムのサイズをリアルタイムで変更します(アニメーションなど)
•ギャラリーエフェクト-サイドアイテムよりも大きいミドルアイテム、またはローテーションの変更を含むカスタム
•リスト内のアイテム(並べ替え)、2つのリスト間(転送中)、または外部(孤立)のドラッグ
•固定または自動適応可能な番号の行/列を持つGridView
•PackedGridLayout-可能な限り効率的に異なるサイズのアイテムを指定されたスペースに配置するための自己完結型スクリプト
•オプションの視差効果を備えたコンテンツの背景スクロール効果
「Playmaker」をサポート
ビジュアルスクリプティング「Playmaker」をサポートしています。
要コーディング技術
(!)中程度のプログラミング経験が必要です。限られた機能セットにアクセスできるPlaymakerユーザーの場合は必要ありません。
パブリッシャーのアセット(記録用)
【毎日更新】アセット割引情報サイト
毎日リアルタイム更新。
「作家セール、無料アセット、新作アセット」お得な最新情報を入手しよう!
※ 土曜・日曜・月曜はアセットストアのお休み。
2018年度 イチオシアセット
バーチャルYoutuberシロがご紹介する2018年度のオススメアセット
過去セールから神アセットを探す
過去大セールで登場したタグです。ぜひご活用下さい。
- MADNESS SALE カテゴリーの記事一覧 - Unity AssetStoreまとめ
- Back to School セール カテゴリーの記事一覧 - Unity AssetStoreまとめ
- Unite 2017 Tokyo記念セール カテゴリーの記事一覧 - Unity AssetStoreまとめ
- Biggest Sale Ever カテゴリーの記事一覧 - Unity AssetStoreまとめ
- Wishlist Sale カテゴリーの記事一覧 - Unity AssetStoreまとめ
- Holiday Sale カテゴリーの記事一覧 - Unity AssetStoreまとめ
※右サイドバーの「月別アーカイブ」や「タグ」からチェックすることもできます。
アセットの検索方法
アセット名、パブリッシャー名など入力してご活用下さい。
↑ ブックマークしておくと超便利!オススメ
【2018年度】無料化&無料アセットまとめ
【3Dモデル】
【シェーダ・パーティクル・Skybox】
【テクスチャ&マテリアル】
【エディタ&スクリプト 前編】
【エディタ&スクリプト 後編】
落ち着いた頃に2018年度の無料まとめ記事作ります。
【過去ログ】無料アセット
【過去ログ】作者セール&注目アセット