Unity3D new UI System and List Views

Gering

I am trying to build a list view with the new Unity UI (2014). The vertical and scrollable list should contain image buttons, which should retain their aspect ratio based on their assigned image! All button should stretch to width of screen. The buttons shouldn't have a gap to the next one. (pretty much like a UITableView in iOS)

enter image description here

I found that the VerticalLayoutGroup which comes with the new UI would not help me, since it does not work well embedded in a ScrollRect. I think it would need to resize based on the containing items in order to get it working with the ScrollRect.

Another problem is that I couldn't get the buttons to retain their width to height aspect ratio, which I solved by writing a little script (see below).

To actually accomplish the desired list effect, I have created a Canvas with a ScrollRect which then contains a RectTransform for my custom ListLayout script. The children of the RectTransforms are the buttons.

The structure looks like this:

enter image description here

Every item in the list gets a keep aspect script which looks like:

public class KeepAspect : MonoBehaviour {

    public Sprite sprite;
    public float aspect = 1;

    void Start() {
        if (sprite != null) {
            aspect = sprite.bounds.size.x / sprite.bounds.size.y;
        }
    }

    void Update() {
        RectTransform rectTransform = GetComponent<RectTransform>();
        Rect rect = rectTransform.rect;
        rectTransform.sizeDelta = new Vector2(rect.width, rect.width * (1f / aspect));
    }
}

My custom ListLayout script, that calculates its height depending of the containing items:

public class ListLayout : MonoBehaviour {

    public enum Direction { Vertical, Horizontal }

    public Direction direction = Direction.Vertical;
    public float spacing = 0;


    void Start() {
    }

    RectTransform[] GetItems() {
        RectTransform rect = GetComponent<RectTransform>();
        RectTransform[] items = new RectTransform[rect.childCount];
        for (int i = 0; i < rect.childCount; i++) {
            items[i] = rect.GetChild(i).GetComponent<RectTransform>();
        }
        return items;
    }

    void Update() {

        RectTransform rectTransform = GetComponent<RectTransform>();
        RectTransform[] items = GetItems();

        // stick together
        if (direction == Direction.Vertical) {

            float y = 0;

            foreach (RectTransform item in items) {
                Rect rect = item.rect;
                item.anchoredPosition = new Vector2(0, -y);
                item.sizeDelta = new Vector2(rectTransform.rect.width, rect.height);
                y += rect.height + spacing;
            }

            // adjust height
            rectTransform.sizeDelta = new Vector2(rectTransform.sizeDelta.x, y);
        }

        // TODO: horizontal layout
    }
}

I have two questions to this approach:

1) Is there a way of doing a list view without custom (ugly) scrips? There has to be a better way?

2) In the KeepAspect script I would love to access the sprite from the GameObject automatically. The thing is, the Sprite is contained in the Image Script of the new UI System and it seems I can't access this one. MonoDevelop could not reference it? Or am I missing something?

Valera Kogut

You should use new Unity UI namespace in order to access new UI classes, methods and properties.

As an example:


using UnityEngine;
using UnityEngine.UI; // New Unity UI system from Unity 4.6 version

namespace TestExample {
    public class TestNewUI : MonoBehaviour 
    {
        public Image image;

        public Slider slider;

        private Sprite _sprite;

        void Start()
        {
            _sprite = image.sprite;
        }
    }
}

http://docs.unity3d.com/460/Documentation/ScriptReference/UI.Image.html

https://www.youtube.com/watch?v=TRLsmuYMs8Q


I think that this will help you ;-)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Unity3D instantiate list of prefabs in new UI

From Dev

Unity3D instantiate list of prefabs in new UI

From Dev

Unity3D: How to programmatically test new UI features

From Dev

Unity3D: How to programmatically test new UI features

From Dev

Unity3d new UI: How to set button's interactable zone bigger than the attached image?

From Dev

Basic purchase system in Unity3d

From Dev

Unity3d understanding positioning system

From Dev

Best practice for adding new UI elements to existing views

From Dev

Unity3D UI, calculation for position dragging an item?

From Dev

Unity3D : Blur the background of a UI canvas

From Dev

Creating navigation between Unity3D instantiated UI elements

From Dev

Unity3D SetActive freeze the UI panel

From Dev

In Unity3d How detect touch on UI or not?

From Dev

Alternative of Raycast for UI Items in Unity3D

From Dev

Unity3D - Screen Capture of particular UI elements

From Dev

Is it possible to make the Unity3D UI slider that follows a timeline?

From Dev

Unity3D UI, calculation for position dragging an item?

From Dev

Unity3D C# - Text UI

From Dev

Unity3D ignores basic cube as particle system mesh

From Dev

Unity3D - Replay a non-looping Particle System

From Dev

Unhandled Exception: System.Reflection.ReflectionTypeLoadException in Unity3d

From Dev

Unity3D ignores basic cube as particle system mesh

From Dev

C# List elements lifetime Unity3d

From Dev

Using a List<> to store methods in C# Unity3D?

From Dev

How to get installed apps list with Unity3D?

From Dev

Unity3d: Adding gameobject to List from an array

From Dev

How to randomly pick value from a list in Unity3D?

From Dev

Unity3D, build PNG from Panel of a Unity.UI?

From Dev

UI Router conditional ui views?

Related Related

  1. 1

    Unity3D instantiate list of prefabs in new UI

  2. 2

    Unity3D instantiate list of prefabs in new UI

  3. 3

    Unity3D: How to programmatically test new UI features

  4. 4

    Unity3D: How to programmatically test new UI features

  5. 5

    Unity3d new UI: How to set button's interactable zone bigger than the attached image?

  6. 6

    Basic purchase system in Unity3d

  7. 7

    Unity3d understanding positioning system

  8. 8

    Best practice for adding new UI elements to existing views

  9. 9

    Unity3D UI, calculation for position dragging an item?

  10. 10

    Unity3D : Blur the background of a UI canvas

  11. 11

    Creating navigation between Unity3D instantiated UI elements

  12. 12

    Unity3D SetActive freeze the UI panel

  13. 13

    In Unity3d How detect touch on UI or not?

  14. 14

    Alternative of Raycast for UI Items in Unity3D

  15. 15

    Unity3D - Screen Capture of particular UI elements

  16. 16

    Is it possible to make the Unity3D UI slider that follows a timeline?

  17. 17

    Unity3D UI, calculation for position dragging an item?

  18. 18

    Unity3D C# - Text UI

  19. 19

    Unity3D ignores basic cube as particle system mesh

  20. 20

    Unity3D - Replay a non-looping Particle System

  21. 21

    Unhandled Exception: System.Reflection.ReflectionTypeLoadException in Unity3d

  22. 22

    Unity3D ignores basic cube as particle system mesh

  23. 23

    C# List elements lifetime Unity3d

  24. 24

    Using a List<> to store methods in C# Unity3D?

  25. 25

    How to get installed apps list with Unity3D?

  26. 26

    Unity3d: Adding gameobject to List from an array

  27. 27

    How to randomly pick value from a list in Unity3D?

  28. 28

    Unity3D, build PNG from Panel of a Unity.UI?

  29. 29

    UI Router conditional ui views?

HotTag

Archive