So far, based on the sample UI project, I have figured out to create a dynamically populated (via script) horizontal scroll view based on Horizontal Layout group, content size fitter, and Layout element.
What I can’t figure out is how to do create a horizontal scroll view that behaves according to the following two conditions.
Condition 1: The content inside the scrollable area is not large enough (x-axis) to produce horizontal scrolling. The scroll view should center the content.
Condition 2: The content inside the scrollable area is larger, default the left side of the scroll content to align with the left side of the scrollable area.
I can find ways to configure the components to work one way or the other, but not both using a single configuration. Is this something that is possible out of the box or is a custom scripting solution needed to make this happen?
If your scroll view (not content) has a fixed size, then I would suggest adding a LayoutElement on the content with a Min Width set to the same width as the scoll view. Then you can choose the alignment in the HorizontalLayoutGroup.
Ah, this makes sense, but the scroll view is horizontally stretched to the full screen size so I don’t know if this will work.
However, after a night to sleep on it I’m wondering if from a user experience perspective if it might be better to use a carousel or cover flow style UI component.
Any hints on how it might be best to pursue a carousel style UI with this system.
Carousel or cover flow UIs cover a wide range of styles and layouts. How to implement it will depend a lot on the exact style you want.
However, I think you’ll need to large script the solution yourself to some extend, since there’s nothing built-in that support these types of controls out of the box.
I think it may be made on top of Scroll Rect. You basically need “onScroll” event to update “edges” of coverflow (will be added later) and ability to scroll to needed part of content to make it stop exactly on correct element (this may be tricky as it can collide with built-in scroll animation).