facebook twitter hatena line email

「Unity/リスト表示/使いまわし」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎リスト作成)
(→‎スクロールバーの操作バーの縦幅がおかしくなるとき)
 
(同じ利用者による、間の11版が非表示)
行16: 行16:
 
#Assets/Canvas/LoopVerticalScrollRectが作成されることを確認
 
#Assets/Canvas/LoopVerticalScrollRectが作成されることを確認
 
#LoopVerticalScrollRectのInspectorで、AddComponentから、VerticalLayoutGroupを追加し、ControlChildSizeのWIdthとHeightにチェックと、ChildForceExpandのWidthにチェック。
 
#LoopVerticalScrollRectのInspectorで、AddComponentから、VerticalLayoutGroupを追加し、ControlChildSizeのWIdthとHeightにチェックと、ChildForceExpandのWidthにチェック。
−
ProjectのAssetsの下にPrefabsのdirを作成しておく。
+
#ProjectのAssetsの下にPrefabsのdirを作成しておく。
−
#LoopVerticalScrollRect/Contentの下に、適当にImageやTextなどのコンテンツを作り、AddComponentから、LayoutElementを追加して、MinHeightにチェックを入れ200、FlexibleWidthにチェックを入れ1を入れ、Prefabsの下にドラッグ。
+
#LoopVerticalScrollRect/Contentの下に、適当にImageやTextなどのコンテンツを作り、AddComponentから、LayoutElementを追加して、MinHeightにチェックを入れ縦幅(例えば200とか)を入れ、FlexibleWidthにチェックを入れ1を入れ、Prefabsの下にドラッグ。
−
#LoopVertialScrollRectに以下スクリプトを設定
+
#MainCameraとかに、以下LoopScrollRectMain.csを追加し、InspectorのscrollRectに、LoopVerticalScrollRectオブジェクトをドラッグ
 +
 
 +
LoopScrollRectMain.cs
 
<pre>
 
<pre>
 
using System.Collections.Generic;
 
using System.Collections.Generic;
行24: 行26:
 
using UnityEngine.UI;
 
using UnityEngine.UI;
  
−
[RequireComponent(typeof(LoopVerticalScrollRect))]
+
public class LoopScrollRectMain : MonoBehaviour, LoopScrollPrefabSource, LoopScrollDataSource
−
[DisallowMultipleComponent]
+
−
public class LoopScrollRectInit : MonoBehaviour, LoopScrollPrefabSource, LoopScrollDataSource
+
 
{
 
{
−
     [SerializeField] private GameObject prefab;
+
     [SerializeField] LoopVerticalScrollRect scrollRect;
 +
    [SerializeField] GameObject prefab;
 
     [SerializeField] int totalCount = 10;
 
     [SerializeField] int totalCount = 10;
 
     Stack<Transform> pool = new Stack<Transform>();
 
     Stack<Transform> pool = new Stack<Transform>();
−
     private void Start()
+
     void Start()
 
     {
 
     {
−
         var scrollRect = GetComponent<LoopVerticalScrollRect>(); ;
+
         scrollRect.prefabSource = (LoopScrollPrefabSource)this;
−
        scrollRect.prefabSource = this;
+
         scrollRect.dataSource = (LoopScrollDataSource)this;
−
         scrollRect.dataSource = this;
+
 
         scrollRect.totalCount = totalCount;
 
         scrollRect.totalCount = totalCount;
 
         scrollRect.RefillCells();
 
         scrollRect.RefillCells();
 +
        // スクロールバーの縦幅調整
 +
        scrollRect.verticalScrollbar.transform.GetComponent<RectTransform>().sizeDelta
 +
            = new Vector3(30f, scrollRect.content.sizeDelta.y);
 
     }
 
     }
−
     // Objectが新規表示の時
+
     // Objectが枠中になった時
 
     GameObject LoopScrollPrefabSource.GetObject(int index)
 
     GameObject LoopScrollPrefabSource.GetObject(int index)
 
     {
 
     {
行54: 行57:
 
     {
 
     {
 
         trans.gameObject.SetActive(false);
 
         trans.gameObject.SetActive(false);
−
         trans.SetParent(transform, false);
+
         trans.SetParent(scrollRect.transform, false);
 
         pool.Push(trans);
 
         pool.Push(trans);
 
     }
 
     }
行64: 行67:
 
}
 
}
 
</pre>
 
</pre>
 +
 
==縦リストにスクロール追加==
 
==縦リストにスクロール追加==
 
#LoopVertialScrollRectの下にUI/Scrollbarを追加。
 
#LoopVertialScrollRectの下にUI/Scrollbarを追加。
行69: 行73:
 
#LoopVertialScrollRectのInspectorのVerticalScrollbarに、上で作ったScrollbarをドラッグ。
 
#LoopVertialScrollRectのInspectorのVerticalScrollbarに、上で作ったScrollbarをドラッグ。
  
−
==スクロールが動かないとき==
+
==スクロールバーが動かないとき==
 
Canvasを作ったときに自動で作られる、EventSystemが、ヒエラルキーに作成されてるか確認して、なければ追加する。
 
Canvasを作ったときに自動で作られる、EventSystemが、ヒエラルキーに作成されてるか確認して、なければ追加する。
  
−
==参考==
+
==スクロールバーの操作バーの縦幅がおかしくなるとき==
−
https://light11.hatenadiary.com/entry/2022/05/16/201949
+
Prefabsに入れたPrefabのオブジェクトのInspectorを開いて、LayoutElementなどが正しく設定されてるか確認。MinHeightに縦幅(例えば200とか)を、入れて、FlexibleWidthに、チェックをいれ、1を入れる。
  
 +
==コンテンツが左によるとき==
 +
ipadとかで、横幅になる際に、左によってしまう場合
 +
#LoopVerticalScrollRect/ContentのInspectorのRectTransformをLeftからCenterへ
 +
 +
==参考==
 
https://github.com/qiankanglai/LoopScrollRect/blob/master/Samples~/Demo/Scripts/InitOnStart.cs
 
https://github.com/qiankanglai/LoopScrollRect/blob/master/Samples~/Demo/Scripts/InitOnStart.cs
 +
 +
https://light11.hatenadiary.com/entry/2022/05/16/201949
  
 
==その他==
 
==その他==

2023年7月5日 (水) 12:18時点における最新版

LoopScrollRectとは

無料で使える、使い回しができるリスト

インストール

  1. Unityメインメニュー/Window/PackageManager/左上の+/gitURLから以下を追加
  2. https://github.com/qiankanglai/LoopScrollRect.git
  3. Packages/LoopScrollRectが追加されてることを確認

サンプル追加

  1. Unityメインメニュー/Window/PackageManager/左上の+/gitURLから以下を追加
  2. https://github.com/qiankanglai/LoopScrollRect.git
  3. SamplesをimportするとAssets/Samples/LoopScrollRect/1.1.2-p1以下にDemoが追加される

縦リスト作成

  1. Unityメインメニュー/GameObject/UI/LoopVerticalScrollRect
  2. Assets/Canvas/LoopVerticalScrollRectが作成されることを確認
  3. LoopVerticalScrollRectのInspectorで、AddComponentから、VerticalLayoutGroupを追加し、ControlChildSizeのWIdthとHeightにチェックと、ChildForceExpandのWidthにチェック。
  4. ProjectのAssetsの下にPrefabsのdirを作成しておく。
  5. LoopVerticalScrollRect/Contentの下に、適当にImageやTextなどのコンテンツを作り、AddComponentから、LayoutElementを追加して、MinHeightにチェックを入れ縦幅(例えば200とか)を入れ、FlexibleWidthにチェックを入れ1を入れ、Prefabsの下にドラッグ。
  6. MainCameraとかに、以下LoopScrollRectMain.csを追加し、InspectorのscrollRectに、LoopVerticalScrollRectオブジェクトをドラッグ

LoopScrollRectMain.cs 

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LoopScrollRectMain : MonoBehaviour, LoopScrollPrefabSource, LoopScrollDataSource
{
    [SerializeField] LoopVerticalScrollRect scrollRect;
    [SerializeField] GameObject prefab;
    [SerializeField] int totalCount = 10;
    Stack<Transform> pool = new Stack<Transform>();
    void Start()
    {
        scrollRect.prefabSource = (LoopScrollPrefabSource)this;
        scrollRect.dataSource = (LoopScrollDataSource)this;
        scrollRect.totalCount = totalCount;
        scrollRect.RefillCells();
        // スクロールバーの縦幅調整
        scrollRect.verticalScrollbar.transform.GetComponent<RectTransform>().sizeDelta
            = new Vector3(30f, scrollRect.content.sizeDelta.y);
    }
    // Objectが枠中になった時
    GameObject LoopScrollPrefabSource.GetObject(int index)
    {
        if (pool.Count == 0)
        {
            return Instantiate(prefab);
        }
        Transform candidate = pool.Pop();
        candidate.gameObject.SetActive(true);
        return candidate.gameObject;
    }
    // Objectが枠外になった時
    void LoopScrollPrefabSource.ReturnObject(Transform trans)
    {
        trans.gameObject.SetActive(false);
        trans.SetParent(scrollRect.transform, false);
        pool.Push(trans);
    }
    // 要素が表示される時
    void LoopScrollDataSource.ProvideData(Transform trans, int index)
    {
        trans.Find("Text").GetComponent<Text>().text = "文章" + index.ToString();
    }
}

縦リストにスクロール追加

  1. LoopVertialScrollRectの下にUI/Scrollbarを追加。
  2. ScrollbarのInspectorのScrollbarのDirection をTopToBottomに変更
  3. LoopVertialScrollRectのInspectorのVerticalScrollbarに、上で作ったScrollbarをドラッグ。

スクロールバーが動かないとき

Canvasを作ったときに自動で作られる、EventSystemが、ヒエラルキーに作成されてるか確認して、なければ追加する。

スクロールバーの操作バーの縦幅がおかしくなるとき

Prefabsに入れたPrefabのオブジェクトのInspectorを開いて、LayoutElementなどが正しく設定されてるか確認。MinHeightに縦幅(例えば200とか)を、入れて、FlexibleWidthに、チェックをいれ、1を入れる。

コンテンツが左によるとき

ipadとかで、横幅になる際に、左によってしまう場合

  1. LoopVerticalScrollRect/ContentのInspectorのRectTransformをLeftからCenterへ

参考

https://github.com/qiankanglai/LoopScrollRect/blob/master/Samples~/Demo/Scripts/InitOnStart.cs

https://light11.hatenadiary.com/entry/2022/05/16/201949

その他

TableScrollViewという別のプラグインもあり

https://github.com/catsnipe/TableScrollView

「http://wiki.nonip.net/index.php?title=Unity/リスト表示/使いまわし&oldid=17273」から取得