Putting Dictionary/List using foreach as buttons in a scroll view?

Questions & Answers
1

Hello, i am trying to put each key value from dictionary to a scroll view list as buttons, so i tried stuff like Instantiate to spawn buttons, but one thing i don’t get is that how am i going to arrange them using Transform.position in the content of scroll view so they don’t all get in one place and please tell me whether i should use GUI.Button on GUI() or continue with Instantiate or any other method which i dont know about, i hope you understand what i want to say (sorry for my bad English).here is my code so far :

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

public class ColorButton : MonoBehaviour {

Dictionary<string, Color32> ColorList = new Dictionary<string, Color32>();
public RectTransform Content_InScrollView;
public GameObject Buttons;
// Use this for initialization

void Start() {
    ColorList.Add("LightGreen", new Color32(255, 255, 255, 255)); // Only as Example
    ColorList.Add("DarkGreen", new Color32(255, 0, 255, 255)); // Only as Example

      foreach (KeyValuePair<string, Color32> colorV in ColorList)
    {
        Instantiate(); // idk what to do anymore.. 

         
    }
}

}

(The reason for not putting each button manually in scroll view is that i will be putting more then a hundred buttons).
Any answer could be helpful. Thanks A Lot. (If you have a solution the code can be also in JavaScript i don’t mind i can use them both).

2

Well, try adding Vertical Layout Group to your parent object (the object you are adding the objects).

I have done something similar so take a look at my code.
This is how I add the colors :

// Initialize cyan colors
CyanColors.Add("Aqua", new HSV(180f, 100f, 100f));
CyanColors.Add("Cyan", new HSV(193f, 85.1f, 100f));
CyanColors.Add("LightCyan", new HSV(180f, 12.2f, 100f));
CyanColors.Add("PaleTurquoise", new HSV(180f, 26.5f, 93.3f));
CyanColors.Add("Aquamarine", new HSV(160f, 50.2f, 100f));

Now, each color is a prefab with a title and a background rawimage to present the color. This is how I made the colors buttons :

tempColor.GetComponent<Button>().onClick.AddListener(delegate { HueController.instance.SelectedColor(HSV.x, HSV.y, HSV.z); });

This is how I populate the parent object :

var d = ColorsDictionary.DictionariesDict.GetEnumerator();
while (d.MoveNext())
       {
              GameObject temp = Instantiate(ColorFamilyPrefab);
              temp.transform.SetParent(ColorsContent.transform);
    
              // Add the colors
              var c = d.Current.Value.GetEnumerator();
              while (c.MoveNext())
              {
                    temp.GetComponent<ColorFamilyPrefabController>().AddColor(c.Current.Value.GetHSVColor(), c.Current.Key, new Vector3(c.Current.Value.GetHue(), c.Current.Value.GetSaturation(), c.Current.Value.GetLightness()));
       }
}

If I understood exactly what you said, this will help you a lot. If not, ask me what troubles you further.

3

Hi @hydrox1

You probably have this solved by now, but as this is a Q+A site…

First, you should learn about UI system - Keywords you can use to search for more learning material, are all explained in manual, and Unity Learn section. These are: RectTransform, Layout Element, Vertical Layout Group, Grid Layout Group, Mask and ScrollRect.

Despite of this, here’s an example which will get you closer to what you need.

To have items automatically layout’ed in RectTransform:

A. Add ScrollRect to some RectTransform. Let’s call it root.

B. Add mask and Image to root rt.

C. Add another RectTransform as root’s child. Let’s call it scroller. Add a VerticalLayoutGroup to it.

D. Add scroller rt as Content of ScrollRect. Set viewport to be root itself.

E. In your script, create some field for GameObject, this is your item you want in list (in this case it was “prefab”).

F. Create a prefab with Image and LayoutElement components.

G. In your script, instead of Transform parent, use RectTransforms SetParent. In this example, panel is your root RectTransform:

for (int i = 0; i < 10; i++)
{
	var item = Instantiate(prefab) as GameObject;

	item.GetComponent<RectTransform>().SetParent(panel);
}

This will instantiate prefab panels/images correctly inside container. You will see that you’ll have to adjust ScrollRect and mask settings, but these are just a couple of clicks.

One small thing you still have to work out yourself; you’ll have to put whatever component you need in your prefab, and populate some text/image elements (whatever you will use) using data from your dictionary.

4

Well, thank you both for taking your time and writing your answers i have already solved my problem, but anyway thanks a lot for taking your time to comment and both of your comments were helpful. @eses @gvergidis