zoukankan      html  css  js  c++  java
  • Unity ugui的ScrollView控件

    由于我经常时间一长就忘记,到要用的时候又要查,又要摸索,很浪费时间,所以写下这篇文章。

    scrollview就是一个能上下或者左右拖动的ui列表,背包、展示多个按钮等情况的时候会用到。

    要组成一个完整能用的ScrollView,需要以下几个组件:

    scroll rect、 mask、各种layout。大致ui层级结构如下:

     先说说scroll rect 这个东西是位于最上面父节点的组件(就是名字叫做"Scroll View"的游戏物体), content属性下的物体是放各种item的;horizontal和vertical是各种垂直横行拖动。

     

    viewPort上面要放mask组件,用于遮挡超出viewport框框的item图案。

    然后是content,它下面放各种item1、2、3、4...,想要让它能自动排列item项,需要有下面那三个组件,选一个就好(这些组件的里面有些默认选项,强烈建议勾都去掉)

    自动生成的物体item放在content节点下。

    content的大小适不适中,关系到最后的拖动效果。太大的话最后结果会有剩余的空余地方,很不好看;太小的话最后结果可能会造成无论怎么拖动,都看不到所有的item项。

    为了应对上述所说的情况,我们要对content物体的rect transform控件进行设置,以下以Vertical layout Group形式进行代码示例:

    //前言:假设content是带有“content”组件,用来存放item的物体
    //itemPer是预制体
    GlobalUtil.Clear(content.transform);//删除除了第0个的所有元素
    Dictionary<int, Area>.Enumerator it = DataManager.areaDic.GetEnumerator();
    RectTransform rect = content.GetComponent<RectTransform>();
    rect.sizeDelta = new Vector2(rect.sizeDelta.x, 0f);//content的高度置0
    float btn_rect = itemPer.GetComponent<RectTransform>().rect.height;//获取单个按钮的高度
    int index = 0;
    while (it.MoveNext())
    {
        GameObject item = Instantiate(itemPer);
        item.transform.SetParent(content.transform);//设置父物体
        item.transform.localScale = itemPer.transform.localScale;
        Text areaText = item.transform.Find("areaNoText").GetComponent<Text>();
        item.SetActive(true);
        areaText.text = Convert.ToString(it.Current.Value.areaNo);
        index++;
    }
    float tempHeight = btn_rect * index;//临时高度
    float contentHeight = content.transform.parent.transform.GetComponent<RectTransform>().rect.height;
    //如果算出的高度 > content的高度,就用算出来的高度,否则就用conten的高度
    if (tempHeight > contentHeight)
    {
        rect.sizeDelta = new Vector2(rect.sizeDelta.x, tempHeight);//高度=个数*每个item的高度
    }
    else
    {
        rect.sizeDelta = new Vector2(rect.sizeDelta.x, contentHeight);
    }

    这样就能让content获得合适的大小了。如果使用gridlayout的话算法要变一下,要根据item和content的宽度来算。

  • 相关阅读:
    当 Messaging 遇上 Jepsen
    Dubbo 在跨语言和协议穿透性方向的探索:支持 HTTP/2 gRPC
    MongoDB与阿里云达成战略合作,最新数据库独家上线阿里云!
    新网银行微服务转型实践
    微服务架构四大金刚利器
    揭秘2019 双11背后的阿里巴巴超强网络
    揭秘2019双11背后的云网络 – 双11网络架构和洛神系统
    小程序的餐饮之路:从流量捕手到流量塘主的进阶秘籍
    备忘录(Memento)模式
    状态(state)模式
  • 原文地址:https://www.cnblogs.com/Transmuter/p/11168474.html
Copyright © 2011-2022 走看看