ListView what a mess!!!

For the past few days, I've been trying to build a list view with variable height sizes for the items. It's been a complicated process, and I'm surprised at how much coding is required to achieve this effect, or how I might have to purchase it on the asset store. If there is a unity system to achieve this simple effect, then is very hided. I'm wondering why Unity hasn't built a component like this. Instead of building a new cinematic feature, they should focus on improving the IDE to make it more appealing for newbies.

For instance, there is no contextual help to understand the multitude of properties Unity has, and some components lack tooltips or instructions on how to use them.
The game template... very good! the developers that made it, you are the best, but bro, it's unuseful. if a newbie start to read that code, and the mess inside, it will throw the computer from the window hoping there is someone from unity under the street. (i'm joking). since, your experience and your salary you got it from the information on this forum here is another free advice. make simple games, or for each component you should have a guide on how to use it. Bro each component no i show you how to make a 2d platform rather then 3d game. this is just a showing off. start from the small, because as newbie developers, they start from using component and some of them you can use in 1000 way with their 1000 property and functions.
I wonder how people who code the Unity engine and use all these unfamiliar functions learn them. At this rate, it'll take me 20 years to become a senior developer.
Unity has created one of the most beautiful software I have ever seen. However, they keep repeating the same mistake as Microsoft by building multiple versions of the same thing, causing confusion with usage, installation, and updates. This can be frustrating, and it's a mess. I applied to Unity, but they refused my application, even though I have 20 years of development experience. My code master once said, "Don't reinvent the wheel," and I wonder if Unity is aware of this concept. Is it that hard to build something new without impacting all the games or improving the old one? Stakeholders would be much happier if Unity could simplify things like Microsoft and Google. I'm laughing so much about their Google Play Games SDK; it took me more than a week to make it work. The API (leaderboard and achievement) had a task list of 30 points, and I had to copy, paste, sh256 codes or flags here and there. Is this the way of programming? who is architect in charge of this mess?

i'm very mad and apologize for my frustration.

 

For where, with what? Game or Editor, IMGUI or UGUI or UIElements or..?

 

AHAAH.... you are right... It's for a game, i'm using scrollrect and vertical layout in the content.

 

Given that you're experienced, you probably know all that, but:

It is not a simple effect, it is a classic component that implements MVC framework, and normally games do not have list views, especially with variable sizes. Normally any unfolding component like that in a video game has fixed height per row and now you know why.

I believe unity would not have interest implementing stuff like that, because this is GUI framework territory.

If you're looking for inspiration or example implementations, you can take a look at Qt framework, its QListView and ModelView framework.

https://doc.qt.io/qt-5/qlistview.html
https://doc.qt.io/qt-5/model-view-programming.html#model-view-classes

Unity UGUI is partially inspired by Qt (see Vertical Layout Group, for example), but does not have feature parity with it. For example, there's no equivalent of QGridLayout in unity.
---
Another thing you could try to do is to implement List through Vertical Layout Group where each row will be Horizontal Layout Group with a "span" meaning empty item with Layout Element component at leftmost position. In this case arrangement of items will be done by UI items, though I can't guarantee it will be done quickly.
---

Regarding unity coding practices, multiple people, including me, criticized unity diving too deep into "corporate" coding practices used, for example in functions like this:
https://docs.unity3d.com/2018.4/Doc...ntSystems.ExecuteEvents.ExecuteHierarchy.html

This is absolutely not newbie friendly.

 

UGUI : Just use a vertical layout group as noted above and let the children control the height. if the children are more complex than just a single thing, use a content fitter on them.
UITK : use flexbox.
IMGUI : just calculate as you go.

As for learning, read the docs, look at examples and just play with elements. No one "learns" it all, it is just a matter of googling and knowing where to look. Seriously, read the docs/api, all of them. It's boring, and you won't remember everything (or really even a fraction of it), but you will (ideally) remember that you saw things, and vaguely where they are. That's the important part, knowing where to look for stuff. It's much easier to figure things out if you have some familiarity with the ground you are going to cover. It really helps.

 

Looking at this from a design/ux perspective I would say that you will be hard pressed to find any notable examples of list views that have variable height items in them. Why? Because it makes for terrible design and user experience to begin with.

Imagine photos app that shows each image thumbnail to scale, rather than forcing each image into a common thumbnail size.

 

Just because it couldbe a train wreck doesn't mean it always will be. Lists with fold out items are one example where this would be relevant. It doesn't have to be a dozen different things of unique sizes making life awkward, it could be closed items of a consistent size and one open item of arbitrary size.

A list with sub-lists is another potentially valid use, such as the Unity Hierarchy or the Project tab in one-column mode (it could also be implemented other ways, of course). An item with 2 child items will be shorter than an item with 15 child items. It may also be valid to have parent / child items be of different sizes.

Unity's Inspector is also a perfect example of this. A vertical list of components, each of an arbitrary height, each containing a vertical list of widgets of potentially variable height.

 

If by ListView you mean one that separates data from visuals and only creates visual elements for the visible items, then supporting variable item height is complicated for one very simple reason: calculating the scroll position and size.

Unlike a flexbox or vertical layout group, which have access to all of their contents and their heights, a list view only creates enough visual elements to fit it's size. If all elements use the same visual template with a fixed size, it can easily determine which item to display at a given scroll position and the total size of the scroll contents without having to create a visual element for each entry beforehand.

 

i don't think it should be a complicate effect to achieve. using a scrollview , in the content object i would add a vertical layout and instantiate the prefabs one by one. the vertical layout should set the width size for each child and the child should expand in height if needed , is this correct?

scrollrect
--viewport
--- content ----> vertical layout with control child size only width, and child force expand width and height?

prefabs

container
--background
--image
--text

i would like to achieve this type of list view.

thank you for your help.

 

what am i doing wrong?

 

First, that is not remotely true. And that is not a "ux perspective". The OP is asking how, not if they should, and given they didn't provide in details on what they were using it is for or how it is being used, please do NOT tell others their design is "terrible" based on literally no context.

 

Impossible to tell, you aren't showing the layout group settings or the settings on any of the sub elements.

 

This is exactly what this very page with forum posts is: a vertical list where each item has a different height.

 

Each element inside the vertical layout group needs a "content size fitter" component to re-calculate its height based on the text size, and the layout group must not touch the child elements' height at all.

 

Honestly for a vanilla approach using Scroll rect and layout it is pretty straightforward.
The content rect of the scroll rect need to have content size fitter and vertical layout group.
Then each element of the scrollrect can just change its height and viola. done.
How would you know how much height each element needs? That's pretty specific to your situation so there is no the right way to do it.

The above approach won't scale past 30 50 or so data though. You'll need to virtualize the row and only change the data inside each row. I use 3rd party ScrollRect to handle this virtualization for me.