Correggere 'FlowLayoutGroup' in Unity3D, come HorizontalLayoutGroup ecc.

Question

Dire che si desidera il normale flusso nello stream in Unity UI. Esempi:

Infatti, per rispondere THIS question ho già raggiunto il flusso di sinistro a filo "nel modo più duro". Definire un "gruppo verticale di righe" in Unity autolayout, collegare FattieFlow al livello superiore,

public class FattieFlow : MonoBehaviour 
{ 
    public GameObject modelRow; 
    public GameObject modelItem; 
    public void Flow() 
    { 
     screen = GetComponent<RectTransform>().rect.width; 

     // move downwards any which need to be moved downwards 
     int row = 0; 
     while (row < transform.childCount) // (dynamic) 
     { 
      if (transform.GetChild(row).gameObject.activeSelf) FlowRow(row); 
      ++row; 
     } 
     // et cetera.... 
    } 
} 

FattieFlow sarà completamente ri-flusso a filo-sinistra (manipolando le linee, nel modo più difficile). Ecco uno script, demo, ecc: the hard way.

Ma questa è una soluzione scadente.

Idealmente, iniziando con UI.HorizontalLayoutGroup e UI.VerticalLayoutGroup dovrebbe essere possibile creare

FlowLayoutGroup

cui dispone, allineati a sinistra, in un blocco. (E in effetti dovrebbe espandersi, e così via, il blocco come richiesto ... esattamente come HorizontalLayoutGroup si comporta).

Sembrerebbe che tu debba iniziare con HorizontalOrVerticalLayoutGroup e lavorare da lì.

Come si dovrebbe fare questo (se non esiste già esistente)?

Answer 1

Finora ho si avvicinò con questo:

FlowLayoutGroup

using UnityEngine; 
using System.Collections; 
using UnityEngine.UI; 

[AddComponentMenu("Layout/Flow Layout Group", 153)] 
public class FlowLayoutGroup : LayoutGroup 
{ 
    public enum Corner { 
     UpperLeft = 0, 
     UpperRight = 1, 
     LowerLeft = 2, 
     LowerRight = 3 
    } 

    public enum Constraint { 
     Flexible = 0, 
     FixedColumnCount = 1, 
     FixedRowCount = 2 
    } 

    protected Vector2 m_CellSize = new Vector2(100, 100); 
    public Vector2 cellSize { 
     get { return m_CellSize; } 
     set { SetProperty(ref m_CellSize, value); } 
    } 

    [SerializeField] protected Vector2 m_Spacing = Vector2.zero; 
    public Vector2 spacing { 
     get { return m_Spacing; } 
     set { SetProperty(ref m_Spacing, value); } 
    } 

    protected FlowLayoutGroup() 
    {} 

#if UNITY_EDITOR 
    protected override void OnValidate() 
    { 
     base.OnValidate(); 
    } 

#endif 

    public override void CalculateLayoutInputHorizontal() 
    { 
     base.CalculateLayoutInputHorizontal(); 

     int minColumns = 0; 
     int preferredColumns = 0; 

     minColumns = 1; 
     preferredColumns = Mathf.CeilToInt(Mathf.Sqrt(rectChildren.Count)); 

     SetLayoutInputForAxis(
      padding.horizontal + (cellSize.x + spacing.x) * minColumns - spacing.x, 
      padding.horizontal + (cellSize.x + spacing.x) * preferredColumns - spacing.x, 
      -1, 0); 
    } 

    public override void CalculateLayoutInputVertical() 
    { 
     int minRows = 0; 

     float width = rectTransform.rect.size.x; 
     int cellCountX = Mathf.Max(1, Mathf.FloorToInt((width - padding.horizontal + spacing.x + 0.001f)/(cellSize.x + spacing.x))); 
//  minRows = Mathf.CeilToInt(rectChildren.Count/(float)cellCountX); 
     minRows = 1; 
     float minSpace = padding.vertical + (cellSize.y + spacing.y) * minRows - spacing.y; 
     SetLayoutInputForAxis(minSpace, minSpace, -1, 1); 
    } 

    public override void SetLayoutHorizontal() 
    { 
     SetCellsAlongAxis(0); 
    } 

    public override void SetLayoutVertical() 
    { 
     SetCellsAlongAxis(1); 
    } 

    int cellsPerMainAxis, actualCellCountX, actualCellCountY; 
    int positionX; 
    int positionY; 
    float totalWidth = 0; 
    float totalHeight = 0; 

    float lastMaxHeight = 0; 

    private void SetCellsAlongAxis(int axis) 
    { 
     // Normally a Layout Controller should only set horizontal values when invoked for the horizontal axis 
     // and only vertical values when invoked for the vertical axis. 
     // However, in this case we set both the horizontal and vertical position when invoked for the vertical axis. 
     // Since we only set the horizontal position and not the size, it shouldn't affect children's layout, 
     // and thus shouldn't break the rule that all horizontal layout must be calculated before all vertical layout. 

     float width = rectTransform.rect.size.x; 
     float height = rectTransform.rect.size.y; 

     int cellCountX = 1; 
     int cellCountY = 1; 

     if (cellSize.x + spacing.x <= 0) 
      cellCountX = int.MaxValue; 
     else 
      cellCountX = Mathf.Max(1, Mathf.FloorToInt((width - padding.horizontal + spacing.x + 0.001f)/(cellSize.x + spacing.x))); 

     if (cellSize.y + spacing.y <= 0) 
      cellCountY = int.MaxValue; 
     else 
      cellCountY = Mathf.Max(1, Mathf.FloorToInt((height - padding.vertical + spacing.y + 0.001f)/(cellSize.y + spacing.y))); 

     cellsPerMainAxis = cellCountX; 
     actualCellCountX = Mathf.Clamp(cellCountX, 1, rectChildren.Count); 
     actualCellCountY = Mathf.Clamp(cellCountY, 1, Mathf.CeilToInt(rectChildren.Count/(float)cellsPerMainAxis)); 

     Vector2 requiredSpace = new Vector2(
      actualCellCountX * cellSize.x + (actualCellCountX - 1) * spacing.x, 
      actualCellCountY * cellSize.y + (actualCellCountY - 1) * spacing.y 
     ); 
     Vector2 startOffset = new Vector2(
      GetStartOffset(0, requiredSpace.x), 
      GetStartOffset(1, requiredSpace.y) 
     ); 

     totalWidth = 0; 
     totalHeight = 0; 
     Vector2 currentSpacing = Vector2.zero; 
     for (int i = 0; i < rectChildren.Count; i++) 
     { 
      SetChildAlongAxis(rectChildren[i], 0, startOffset.x + totalWidth /*+ currentSpacing[0]*/, rectChildren[i].rect.size.x); 
      SetChildAlongAxis(rectChildren[i], 1, startOffset.y + totalHeight /*+ currentSpacing[1]*/, rectChildren[i].rect.size.y); 

      currentSpacing = spacing; 

      totalWidth += rectChildren[i].rect.width + currentSpacing[0]; 

      if (rectChildren[i].rect.height > lastMaxHeight) 
      { 
       lastMaxHeight = rectChildren[i].rect.height; 
      } 

      if (i<rectChildren.Count-1) 
      { 
       if (totalWidth + rectChildren[i+1].rect.width + currentSpacing[0] > width) 
       { 
        totalWidth = 0; 
        totalHeight += lastMaxHeight + currentSpacing[1]; 
        lastMaxHeight = 0; 
       } 
      } 
     } 
    } 
} 

Come utilizzare

1. Collegare questo script al vostro pannello, proprio come si usa altro gruppi di layout come GridViewLayout
2. Aggiungi elemento UI (pulsanti, immagini, ecc.) Come figlio del pannello.
3. Aggiungi ContentSizeFitter componente per i bambini e impostare Horizontal Fit e Vertical Fit oggetti da Assegnata
4. Aggiungi Layout Element componente da bambino e impostare Preferred Width e Preferred Height valori. Questi valori controlleranno le dimensioni dell'elemento dell'interfaccia utente. Puoi anche utilizzare Min Width e Min Height.
5. Aggiungi tutti gli elementi che desideri e applica la stessa procedura per ottenere la dimensione desiderata.

Questo è come sembra in finestra Impostazioni:

testato con pulsanti di diverse dimensioni e funziona bene.

NOTA:

• Ho modificato GridLayoutGroup classe dal codice Unità di interfaccia utente per ottenere desiderato comportamento. Come è derivato da LayoutGroup che controlla proprietà per bambini RectTransform. Abbiamo bisogno di usare ContentSizeFitter e LayoutElement sui bambini per cambiare la loro dimensione .
• Funziona solo per flusso orizzontale a partire da sinistra in alto a differenza di GridLayout che consente di avviare la verticale e iniziare da altri angoli pure. Non lo considero una limitazione poiché si tratta solo di un comportamento prevedibile da un gruppo di layout di flusso .
• Ho anche aggiunto uno Repository on GithHub nel caso qualcuno volesse contribuire ad esso.

Grazie!