コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity】【UGUI Super ScrollView】項目をグリッド状に並べるスクロールビューを作る

はじめに

 
「UGUI Super ScrollView」では
項目をグリッド状に並べるスクロールビューを作ることができます

作成例は上記の GitHub リポジトリの
「Assets/Example/06_Grid/Example.unity」シーンで確認できます

作成例

f:id:baba_s:20180309123707g:plain

ソースコード

スクロールの項目で使用するデータ

public sealed class ListItemData
{
    private readonly string m_name;

    public string Name { get { return m_name; } }

    public ListItemData( string name )
    {
        m_name = name;
    }
}

スクロールの項目

using UnityEngine;
using UnityEngine.UI;

[DisallowMultipleComponent]
public sealed class ListItemUI : MonoBehaviour
{
    [SerializeField] private Button m_buttonUI  = null;
    [SerializeField] private Text   m_textUI    = null;

    private ListItemData m_data;

    private void Awake()
    {
        m_buttonUI.onClick.AddListener( () => print( m_data.Name ) );
    }

    public void SetDisp( ListItemData data )
    {
        m_data = data;

        m_textUI.text = data.Name;
    }
}

スクロールビュー

using SuperScrollView;
using System.Linq;
using UnityEngine;

[DisallowMultipleComponent]
public sealed class Example : MonoBehaviour
{
    [SerializeField] private LoopListView2  m_view          = null  ;
    [SerializeField] private GameObject     m_original      = null  ;
    [SerializeField] private int            m_countPerRow   = 0     ;

    private ListItemData[] m_list;

    private void Start()
    {
        m_list = Enumerable
            .Range( 0, 20 )
            .Select( c => ( c + 1 ).ToString( "0000" ) )
            .Select( c => new ListItemData( c ) )
            .ToArray()
        ;

        int count = m_list.Length / m_countPerRow;
        if ( 0 < m_list.Length % m_countPerRow )
        {
            count++;
        }

        m_view.InitListView( count, OnUpdate );
    }

    private LoopListViewItem2 OnUpdate( LoopListView2 view, int index )
    {
        if ( index < 0 ) return null;

        var itemObj  = view.NewListViewItem( m_original.name );
        var children = itemObj.GetComponentsInChildren<ListItemUI>( true );

        for ( int i = 0; i < m_countPerRow; i++ )
        {
            int itemIndex   = index * m_countPerRow + i;
            var child       = children[ i ];
            var childObj    = child.gameObject;

            if ( m_list.Length <= itemIndex )
            {
                childObj.SetActive( false );
            }

            var data = m_list.ElementAtOrDefault( itemIndex );

            if ( data != null )
            {
                childObj.SetActive( true );
                child.SetDisp( data );
            }
            else
            {
                childObj.SetActive( false );
            }
        }

        return itemObj;
    }
}

ゲームオブジェクト

スクロールの項目

f:id:baba_s:20180309123243p:plain

スクロールの項目の親

f:id:baba_s:20180309123259p:plain

スクロールビュー

f:id:baba_s:20180309123309p:plain

スクロールビューを操作するクラス

f:id:baba_s:20180309123316p:plain