UGUI默認(rèn)提供了橫豎布局組件, 但有時(shí)候還需要一種扇形布局的組件,如下圖:

image.png

方法2:
使用C#寫(xiě)一個(gè)圓形(包含扇形)布局組件,以便擴(kuò)展更多,代碼如下:

using UnityEngine;
using UnityEngine.UI;

/// <summary>扇形布局組件</summary>
/// <author>Danny Yan</author>
[AddComponentMenu("Layout/Circle Layout Group", 150)]
public class CircleLayoutGroup : LayoutGroup
{
    public enum LayoutMode
    {
        /// <summar>平均分布</summary>
        Hypodispersion = 0,
        /// <summar>扇形分布</summary>
        Sector = 1,
    }

    [Header("分布模式: Hypodispersion(圓形平均分布) Sector(扇形分布)")]
    public LayoutMode mode = LayoutMode.Hypodispersion;

    [Header("半徑")]
    public float radius = 0;

    [Header("起始角度")]
    public float initAngle = 0;

    [Header("是否保持弧度值不變")]
    public bool keepRadLen = false;
    [Header("弧度保持不變的值(keepRadLen為true時(shí)有效)")]
    public float keepRadLenVal = 0f;
    [Header("扇形分布范圍")]
    public float sectorAngle = 0;
    [Header("扇形分布時(shí)且keepRadLen為false時(shí),是否中間對(duì)齊到扇形中心,否則兩端對(duì)齊")]
    public bool sectorAlignCenter = false;
    [Header("扇形分布且sectorAlignCenter為false時(shí),是否為逆時(shí)針")]
    public bool sectorClockwise = true;

    // public float fDistance;
    // [Range(0f, 360f)]
    // public float MinAngle, MaxAngle, StartAngle;
    protected override void OnEnable()
    {
        base.OnEnable();
        CalculateRadial();
    }
    public override void SetLayoutHorizontal()
    {
        // Util.Print("SetLayoutHorizontal");
        CalculateRadial();
    }
    public override void SetLayoutVertical()
    {
        // Util.Print("SetLayoutVertical");
        CalculateRadial();
    }
    public override void CalculateLayoutInputHorizontal()
    {
        base.CalculateLayoutInputHorizontal();
        // Util.Print("CalculateLayoutInputHorizontal");
        CalculateRadial();
    }
    public override void CalculateLayoutInputVertical()
    {
        // Util.Print("CalculateLayoutInputVertical");
        CalculateRadial();
    }
#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();
        CalculateRadial();
    }
#endif

    protected void CalculateRadial()
    {
        this.m_Tracker.Clear();
        if (transform.childCount == 0)
            return;

        if (this.mode == LayoutMode.Hypodispersion)
        {
            this.Hypodispersion();
        }
        else if (this.mode == LayoutMode.Sector)
        {
            this.Sector();
        }
    }

    /// 平均分布
    private void Hypodispersion()
    {
        // rectChildren來(lái)自父類,在CalculateLayoutInputHorizontal()中進(jìn)行的非active和IgonreLayout的子節(jié)點(diǎn)剔除
        if (this.rectChildren.Count <= 0) return;

        float perRad = 2 * Mathf.PI / rectChildren.Count;
        // float perAngle = 360 / rectChildren.Count;
        float initRad = this.initAngle * Mathf.Deg2Rad;

        this.SetLayout(initRad, perRad);
    }

    /// 扇形分布
    private void Sector()
    {
        if (rectChildren.Count <= 0) return;

        float perRad = 0;
        float initRad = this.initAngle * Mathf.Deg2Rad;
        // 扇形弧度
        var sectorRad = this.sectorAngle * Mathf.Deg2Rad;

        if (this.keepRadLen)
        {
            // 弧長(zhǎng)公式為: L = (angle * PI / 180) * radius = rad * radius, 要保持弧長(zhǎng)不變,則需要改變r(jià)ad即可, rad = L / radius
            perRad = keepRadLenVal / this.radius;
            if (sectorAlignCenter)
            {
                // 將initRad重置到sectorRad中線上
                initRad += (sectorClockwise ? sectorRad * .5f : -sectorRad * .5f);
                if (rectChildren.Count > 1)
                {
                    // 根據(jù)數(shù)量重置initRad
                    float _radOff = perRad * ((rectChildren.Count - 1) * 0.5f);
                    initRad -= (sectorClockwise ? _radOff : -_radOff);
                }
            }
            else
            {
                perRad = keepRadLenVal / this.radius;
            }
        }
        else
        {
            // 居中對(duì)齊到扇形中心
            if (sectorAlignCenter)
            {
                perRad = sectorRad / (rectChildren.Count + 1);
                initRad += sectorClockwise ? perRad : -perRad;
            }
            else
            {
                perRad = rectChildren.Count == 1 ? 0 : sectorRad / (rectChildren.Count - 1);
            }
        }

        if (!sectorClockwise)
        {
            perRad *= -1;
        }

        this.SetLayout(initRad, perRad);
    }

    private void SetLayout(float initRad, float perRad)
    {
        // 計(jì)算最佳大小
        float totalMin = 0;
        float totalPreferred = 0;
        float totalFlexible = 0;

        float minX = float.MaxValue;
        float maxX = float.MinValue;
        float minY = float.MaxValue;
        float maxY = float.MinValue;
        for (int i = 0; i < rectChildren.Count; i++)
        {
            var child = rectChildren[i];

            //禁用子節(jié)點(diǎn)recttransform相關(guān)屬性
            m_Tracker.Add(this, child,
            DrivenTransformProperties.Anchors |
            DrivenTransformProperties.AnchoredPosition |
            DrivenTransformProperties.Pivot);

            var size = child.rect.size;
            child.pivot = new Vector2(0.5f, 0.5f);
            child.anchorMin = new Vector2(0.5f, 0.5f);
            child.anchorMax = new Vector2(0.5f, 0.5f);
            child.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, size.x);
            child.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, size.y);

            // child.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, -pSize.x*.5f, size.x);
            // child.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, -pSize.y*.5f, size.y);
            // child.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left | RectTransform.Edge.Right, size.x*.5f, size.x);
            // child.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top | RectTransform.Edge.Bottom, size.y*.5f, size.y);

            // float min, preferred, flexible;
            // GetChildSizes(child, 0, out min, out preferred, out flexible);
            // size.x = LayoutUtility.GetMinSize(child, 0);
            // size.y = LayoutUtility.GetMinSize(child, 1);

            size *= 0.5f * child.localScale;
            Vector3 vPos = child.localPosition;
            var rad = initRad + perRad * i;
            vPos.x = this.radius * Mathf.Cos(rad);
            vPos.y = this.radius * Mathf.Sin(rad);
            child.localPosition = vPos;

            var left = vPos.x - size.x;
            if (left < minX) minX = left;
            var right = vPos.x + size.x;
            if (right > maxX) maxX = right;

            var bottom = vPos.y - size.y;
            if (bottom < minY) minY = bottom;
            var top = vPos.y + size.y;
            if (top > maxY) maxY = top;
        }
        
        // 此處寬高計(jì)算并不是很精確
        var w = Mathf.Abs(maxX - minX);
        var h = Mathf.Abs(maxY - minY);
        totalMin = this.radius;
        totalPreferred = w;
        if (this.mode == LayoutMode.Sector)
        {
            // totalPreferred += radius;
        }
        SetLayoutInputForAxis(totalMin, totalPreferred, totalFlexible, 0);
        totalPreferred = h;
        if (this.mode == LayoutMode.Sector)
        {
            // totalPreferred += radius;
        }
        SetLayoutInputForAxis(totalMin, totalPreferred, totalFlexible, 1);
    }
}

說(shuō)明:

1. 繼承自LayoutGroup,在SetLayoutXX()和CalculateLayoutInputXX()方法中直接調(diào)用CalculateRadial()進(jìn)行計(jì)算,Layout提供的Padding和Child Alignment不生效;
2. 提供圓形布局和扇形布局2種模式,圓形布局較為簡(jiǎn)單,扇形布局提供更多的效果方式,半徑和起始角度是通用的;

3. 圓形布局只能平均分布,效果圖如下:

   
   
   image.png
4. 扇形模式下必須設(shè)置分布角度(sectorAngle值),同時(shí)分為普通扇形平均分布和強(qiáng)制弧度長(zhǎng)度不變分布:

扇形模式下的效果對(duì)比:

普通平均分布:

image.png

image.png

改變半徑,間距變大

強(qiáng)制保持弧度長(zhǎng)度:

image.png

image.png

改變半徑,item之間的弧度長(zhǎng)度不變

轉(zhuǎn)載請(qǐng)注明出處: http://www.reibang.com/p/d02395b6689c