Unity Scroll View使用

时间:2024-04-14 18:08:44

问题:

Unity Scroll View使用

很多时候我们需要在一个scroll view里面,content的大小随内容的大小变换,同时content还要使用layout group来使下面保持一定的规格排列,比如上面的vertical layout group,再同时,还需要下面的子物体的大小随自己的子内容来动态改变

例如聊天框 便捷任务框

Unity Scroll View使用

Unity Scroll View使用

 

之前我想只用这两种方式来解决,后来发现,使用layout group之后子物体不能再使用content size fitter,虽然在editor状态是没问题的,但是动态生成之后,会产生布局混乱的状态,后来我用代码计算宽度手动设置,但是这种方法太蠢,再查询了很多资料后,找到了一种完美的解决方案

Unity Scroll View使用

Unity Scroll View使用

把Child Controls Size你想要自动控制大小的宽或高 勾上

 

Unity Scroll View使用

 

把Content Size Fitter去掉

    public GameObject obj;
 
    // Use this for initialization
    void Start () {
        GameObject obj1 = Instantiate(obj, transform);
        obj1.GetComponentInChildren<Text>().text = "asddddddddddddddddddddddddddddddddddd";
        GameObject obj2 = Instantiate(obj, transform);
        obj2.GetComponentInChildren<Text>().text = "asddddddddddddddddddddddddddddddddddasdfsafadssaaaaaaaaaad";
        GameObject obj3 = Instantiate(obj, transform);
        obj3.GetComponentInChildren<Text>().text = "asddddddddddddd";
        GameObject obj4 = Instantiate(obj, transform);
        obj4.GetComponentInChildren<Text>().text = "asddddddddddddddd4444444444444444444444444ssssssssssssssssssssdddddddddddddddddddd";
        GameObject obj5 = Instantiate(obj, transform);
        obj4.GetComponentInChildren<Text>().text = "asddddddddddddddddddd";
        GameObject obj6 = Instantiate(obj, transform);
        obj4.GetComponentInChildren<Text>().text = "asddddd\n一二三\nCoder";


    }

 

 

 

Unity Scroll View使用

实现效果,类似于聊天室

 

------------------9.29更新--------------------------

稍微复杂一点的布局

Unity Scroll View使用

发现layout group有这样一个特性,

Unity Scroll View使用

 

当scale为1的时候才会完全对齐,否则会按照scale为1留下空位置

当使用字体的时候,很多情况会使用放大字体同时缩小scale的情况来使字体看的更清晰,

 

Unity Scroll View使用所以就需要这种父物体来控制布局,子物体来控制显示的方式

Unity Scroll View使用还可以使用layout element来控制忽视布局

Unity Scroll View使用单独控制scroll view的宽高

各个面板

 

Unity Scroll View使用

----------------------------------------------------------------

重点:熟练使用scroll view的要点是理解 layout group 、content size fitter、 layout element 这三个组件
————————————————
版权声明:本文为****博主「懒羊羊爱大便」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.****.net/qq_33413868/article/details/82783057