如何在Unity3d中仅将两个对象设置为水平组布局？

Question

What I am trying to achieve is similar to GridLayout technique. In Grid Layout there is option for constraint-fixed column count, there I set the value to 2.

The problem with grid layout is that when we set the cell size to a specific value after that the cell size will not expand itself to all other screen sizes. So trying with manually set HorizontalGroup Layout with only two columns. The problem lies is when I need to instantiate many items. It should come in the order 1,2 items in row one and 3,4 items in row two and so on. The one I tried with Gridview is shown in the Link

Answer 1

I did this using a combintation of HorizontalLayoutGroup , VerticalLayoutGroup and a simple StayQuadratic I wrote to keep the items quadratic by their width.

public class StayQuadratic : MonoBehaviour
{
    private RectTransform rectTransform;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
    }

    private void Update()
    {
        rectTransform.sizeDelta = Vector2.one * rectTransform.rect.width;
    }
}

Ofcourse it might be enough to set this size only once since you won't change the screen size dynamically in a build.

• The root object needs a VerticalLayoutGroup width

  • childControlHeight = true;
  • childControlWidth = true;
  • childForceExpandHeight = true;
  • childForceExpandWidth = true;

  and a ContentSizeFitter (just for expanding the background at the bottom or in case you want to use it for scroll)

• It will attach rows. A row needs a HorizontalLayoutGroup with

  • childControlHeight = false; (The height will be controlled by the StayQuadratic )
  • childControlWidth = true;
  • childForceExpandHeight = true;
  • childForceExpandWidth = true;

I made following script to set it up. For this example I just generate all objects and items but ofcourse you could as well use Prefabs with the same settings.

[RequireComponent(typeof(ContentSizeFitter), typeof(VerticalLayoutGroup))]
public class GridWith2Columns : MonoBehaviour
{
    public Sprite sprite;

    private HorizontalLayoutGroup _currentRow;
    private GameObject placeholder;
    private int itemCounter;

    private void Awake()
    {
        var verticle = GetComponent<VerticalLayoutGroup>() ? GetComponent<VerticalLayoutGroup>() : gameObject.AddComponent<VerticalLayoutGroup>();
        verticle.childAlignment = TextAnchor.UpperCenter;
        verticle.childControlHeight = true;
        verticle.childControlWidth = true;
        verticle.childForceExpandHeight = true;
        verticle.childForceExpandWidth = true;

        var sizeFitter = GetComponent<ContentSizeFitter>() ? GetComponent<ContentSizeFitter>() : gameObject.AddComponent<ContentSizeFitter>();
        sizeFitter.horizontalFit = ContentSizeFitter.FitMode.Unconstrained;
        sizeFitter.verticalFit = ContentSizeFitter.FitMode.PreferredSize;
    }

    public void AddChild()
    {
        // if exists remove placeholder
        if (placeholder)
        {
            if (Application.isPlaying) Destroy(placeholder);
            else DestroyImmediate(placeholder);
        }

        // Every second item we add a new horizontal row
        // starting with the first ;)
        if (itemCounter % 2 == 0)
        {
            var newRowObj = new GameObject("row", typeof(RectTransform), typeof(HorizontalLayoutGroup));
            newRowObj.transform.SetParent(transform, false);
            _currentRow = newRowObj.GetComponent<HorizontalLayoutGroup>();
            _currentRow.childAlignment = TextAnchor.UpperCenter;
            _currentRow.childControlHeight = false;
            _currentRow.childControlWidth = true;
            _currentRow.childForceExpandHeight = true;
            _currentRow.childForceExpandWidth = true;
        }

        // Add a new item child to the current
        // I use some example settings like sprite and color just to show how it works
        // you can ofcourse also simply instantiate a prefab
        var newItem = new GameObject("item", typeof(RectTransform), typeof(Image), typeof(StayQuadratic));
        newItem.transform.SetParent(_currentRow.transform, false);
        var itemImage = newItem.GetComponent<Image>();
        itemImage.color = Color.red;
        itemImage.sprite = sprite;

        newItem.GetComponent<RectTransform>().sizeDelta = Vector2.one * _currentRow.GetComponent<RectTransform>().rect.width / 2;

        itemCounter++;

        // add an invisble filler in case of impair child count
        if (itemCounter % 2 != 0)
        {
            placeholder = new GameObject("placeholder", typeof(RectTransform), typeof(StayQuadratic));
            placeholder.transform.SetParent(_currentRow.transform, false);
            placeholder.GetComponent<RectTransform>().sizeDelta = Vector2.one * _currentRow.GetComponent<RectTransform>().rect.width / 2;
        }
    }

    // Don't mind this further it is just for adding the 
    // AddChild button to the inspector for the example
    [CustomEditor(typeof(GridWith2Columns), true)]
    private class AddchildsEditor : Editor
    {
        public override void OnInspectorGUI()
        {
            DrawDefaultInspector();

            EditorGUILayout.Space();

            if (GUILayout.Button("Add Child"))
            {
                ((GridWith2Columns)target).AddChild();
            }
        }
    }
}

---