[Unity][UGUI]Scroll View的折叠UI

 

 

 

1.先创建Scroll View，对 Content实体添加 Vertical Layout Group组件

在其下面创建 若干个Button子物体，对Button的Text进行设置 便于区分其他子物体Button

2-4分别测试 3种不同的情况，来改变子物体的顺序，对Scroll View的显示有什么区别。

2.设置其中的一个按钮Button的gameobject.setActive(false)，非激活。

3.对其中的一个按钮Button的Rect Transform的Local Scale 为（0，0，0），大小缩小为0。

4.拖动其中一个按钮，使其的排序和如下图所示。

 

结合2-4的试验，可知道，有2种方法移动 Vertical Layout Group的 子物体的排序。

分别 是改变 其子物体 的排序，和 使其 的Active为false。

2.方法很简单，就是把 这些 按钮 放入一个 list或者 是一个 Transform的数组中。

从Button1开始到Button10，进行遍历，然后对每一个 物体 进行判断，是否有 需求，然后 对其进行设置SetActive(true)显示并对这个按钮赋值，否则 对其gameobject.SetActive(false)隐藏。

可以看到，当6-8的按钮隐藏后，下面的按钮 显示稀疏的原因是因为 按钮子物体不够多。

把这个TestfoldUI.cs挂载到一个空物体。

使得Button1-5按钮按下的响应事件对应TestfoldUI的flodGroupButton_1_5函数

Button6-8按钮按下的响应事件对应TestfoldUI的flodGroupButton_6_8函数。因为我把TestfoldUI设置为Canvas的组件因此按钮的按下的响应事件如下图所示。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TestfoldUI : MonoBehaviour {

    /// 

    /// 按钮1-5
    /// 
    public Transform[] groupButton_1_5;
    private bool bool_1;
    /// 

    /// 按钮6-8
    /// 
    public Transform[] groupButton_6_8;
    private bool bool_2;

    // Use this for initialization
    void Start () {
        bool_1 = false;
        bool_2 = false;

    }
    /// 

    /// 折叠按钮1-5
    /// 
    public void flodGroupButton_1_5()
    {
        foreach (Transform trans in groupButton_1_5)
        {
            trans.gameObject.SetActive(bool_1);
        }
        bool_1 = !bool_1;
    }
    /// 

    /// 折叠按钮6-8
    /// 
    public void flodGroupButton_6_8()
    {
        foreach (Transform trans in groupButton_6_8)
        {
            trans.gameObject.SetActive(bool_2);
        }
        bool_2 = !bool_2;
    }
}

 

4.的方法就要用到参考资料1中的

transform.SetAsFirstSibling()函数【设置其为父物体的第一个子物体】和

transform.SetParent()函数【设置其为父物体的最后一个子物体】

左边的 点击显示 后 显示的是 倒序的（在下面的代码中用/**/注释的部分）。右边才是 正常的。

 

 

 

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

public class TestfoldUI : MonoBehaviour {

    /// 

    /// 内容 对象
    /// 
    public Transform content;

    /// 

    /// 所有 按钮的 数组
    /// 
    public Transform[] button_array;

    /// 

    /// 显示的 按钮数组
    /// 
    public List showButton_array = new List();
    /// 

    /// 隐藏的 按钮数组
    /// 
    public List hideButton_array = new List();

    /// 

    /// 所有的 控制按钮。绿色的按钮
    /// 
    public Button[] controlButtons;
    /// 

    /// 现在正在按下的按钮
    /// 
    public Button controlButtonNow;
    /// 

    /// 排列在最底层的绿色 按钮
    /// 
    public List

foldControlButton = new List(); int num = 0; // Use this for initialization void Start () { } ///

/// 折叠按钮，按下按钮后的响应事件 ///

/// /// 开始的序号 /// 结束的序号 public void flodGroupButtonPush(Button button) { //初始化 用于 暂存对象 的数组 showButton_array = new List(); hideButton_array = new List(); foldControlButton = new List(controlButtons);// 所有的 绿色按钮 数组 foldControlButton.Remove(button);//从 所有的 绿色按钮 数组，则 当前的数组 为 排列在最底层的绿色 按钮 controlButtonNow = button;// 当前 绿色 按钮 if (num > 0 && content != null) { int a = 0; foreach (Transform trans_ in button_array) { if (a < num) { showButton_array.Add(trans_);//满足条件的 白色按钮 显示 a++; } else { hideButton_array.Add(trans_);//不满足条件的 白色按钮 隐藏 } } for (int i = hideButton_array.Count -1; i >= 0; i--)//使得 隐藏的白色按钮 置顶，为content子物体的排序第一位置 { hideButton_array[i].transform.localScale = Vector3.zero; hideButton_array[i].transform.SetAsFirstSibling(); } /*foreach (Transform trans_ in hideButton_array)//使得 隐藏的白色按钮 置顶，为content子物体的排序第一位置 { trans_.transform.localScale = Vector3.zero; trans_.transform.SetAsFirstSibling(); }*/ foreach (Button button_ in foldControlButton)//使得 显示的白色按钮 置顶，为content子物体的排序第一位置 { button_.transform.SetAsFirstSibling(); } for (int i = showButton_array.Count - 1; i>=0 ;i--)//使得 显示的白色按钮 置顶，为content子物体的排序第一位置 { showButton_array[i].transform.localScale = Vector3.one; showButton_array[i].transform.SetAsFirstSibling(); } /*foreach (Transform trans_ in showButton_array)//使得 显示的白色按钮 置顶，为content子物体的排序第一位置 { trans_.transform.localScale = Vector3.one; trans_.transform.SetAsFirstSibling(); }*/ controlButtonNow.transform.SetAsFirstSibling();//使得当前 绿色 按钮 置顶，为content子物体的排序第一位置 } } ///

/// 设置 显示按钮的数量 ///

/// public void setButtonNum(int _int) { num = _int; } }

 

 

相关资料：

1.[Unity][UGUI][Animation&Animator]折叠UI

2.

 

参考资料：

1.【Unity】改变子物体的顺序

2.

3.