Horizontal layout - fit the view

UI UGUI
1

SOLVED! See the post below for correct answer.

I’m using horizontal layout UI component to create markers on a slider. What I currently have is the following:

2904690--213929--2017-01-02 12_01_01-.png

However, I would like the markers to start from the beginning and the end of the slider to achieve following:

2904690--213930--2017-01-02 12_01_19-.png

I can do this by altering the spacing variable of the horizontal layout. However, if the amount of markers can change, the spacing value has to be recalculated somehow.

How can I achieve this? Does someone have a tip how to calculate the correct spacing value or is there another way to do this?

2

hmm… you’re looking to have it behave like this?

ex:

1 Like
3

Yes, more like the top one of your examples.

4

Bump.

Does anyone have any idea how to achieve this?

5

Kind Reddit user mendorr provided an example in this thread. It was a lot simpler than I thought, I guess I misunderstood what the scaling value actually means.

Here is his simple, but well working solution:

public class SetDotSpacing : MonoBehaviour {

    public HorizontalLayoutGroup layoutGroup;
    public float dotWidth = 32f;
    public RectTransform lengthRectTransform;

    void Update ()
    {
        if (transform.childCount > 0)
        {
            int dotCount = transform.childCount;
            layoutGroup.spacing = (lengthRectTransform.rect.width - (dotCount * dotWidth)) / (dotCount - 1);
        }

    }

    void OnValidate ()
    {
        layoutGroup = GetComponent<HorizontalLayoutGroup>();
        lengthRectTransform = GetComponent<RectTransform>();
    }

}
1 Like