How to set density based on screen size?

[Vindorable]

Thank you for this amazing asset!
I'm building for mobile and there are various screen sizes.
When I build for 9:20 it looks ok but changing it to 9:16 it is super crammed.
What can I do to fix this?

[LanKuDot]

Hi, thanks for using the asset!
Here is the equation for calculating the distance between boxes:
unitPos = rectDistance / (numOfBoxes - 1) / boxDensity
In the vertical mode, the rectDistance is the height of the rectTransform where CircularScrollingList.cs is attached at.
In the horizontal mode, it will be the width of it.
Therefore, you could get the proper boxDensity by this equation:
boxDensity = rectDistance / (numOfBoxes - 1) / unitPos
where unitPos should be a constant value which is suitable for the application.

[Vindorable]

It is possible to use 'height' (the height of an element assuming all elements have the same height) and 'gap' (spacing between each element) instead?
So what I'm trying to have is like Unity Scrollview where the positions of the elements are fixed and it gets masked based on the height of the rectTransform. Because based on the mobile phone screen height you either see more or less depending on its aspect ratio.
In this screenshot, I attempted to do that:

But in this portion, I couldn't figure out the masking (or show only those elements that fit the height of the rectTransform):

            TopBaseline = _unitPos * (numOfBoxes / 2 - boundAdjust);
            BottomBaseline = -TopBaseline;
            MiddleBaseline = _unitPos * boundAdjust;

            _maxPos = TopBaseline + _unitPos;
            _minPos = -_maxPos;
            _sideChangingMinPos = _minPos + _unitPos * 0.5f;
            _sideChangingMaxPos = _maxPos - _unitPos * 0.5f;

[LanKuDot]

How about putting the list under a rectTransform with mask?
The height of the rectTransform where the list is at is fixed, and the one with mask is flexible.

[Vindorable]

Yes I did that but the topmost element is now masked. How do I get the topmost element to be in the mask?

[LanKuDot]

Got it, if the list type is "Circular" and the focusing position is "Top".
Set the anchors and pivot of the rectTransform where the list is at as below:

It will make the topmost element in the mask:

The reason why the list type must be "Circular" is that the bottom element will be masked.

[LanKuDot]

Is the problem fixed? If not, I think I have to re-think about the position calculation.

[Vindorable]

Sorry, I just got to it. I tried it and it works :D
And it looks so much better! Thank you!