首页 > 代码库 > UIGrid+自适应

UIGrid+自适应

如下图所示:一个Grid下面有六个Button,它们需要在不同的分辨下拉伸适应(Horizontal)宽度,以保证填充满底部

image

首先有这两个要点:

1、UIGrid中的Cell Width是根据屏幕比例动态调整的

2、NGUI的UICamera有一个onScreenResize 委托

我的布局如下:

1、首先Grid下有六个子Button,Grid的参数设置如下:Cell Width是根据我的图片的大小,这里设置个大概值就好,因为不同分辨率,我们需要动态调整这个值

image image

2、每个子Child即Button都绑定上UIStretch脚本,并把Style设置为Horizontal(水平),其中的Relative Size=1/6 ~=0.16667

image

3、绑定GridTest脚本在Grid上:

using UnityEngine;using System.Collections;public class GridTest : CUIBase{    UIGrid btnsGrid;    // Use this for initialization    void Start()    {        btnsGrid = (UIGrid)GetControl<UIGrid>("BtnsGrid");        UIWidget _widget = GetControl<UIWidget>("BtnsGrid/Btn01HomeBtn");        btnsGrid.cellWidth = _widget.width;        btnsGrid.Reposition();        UICamera.onScreenResize += ScreenSizeChanged;    }    // Update is called once per frame    void Update()    {    }    void ScreenSizeChanged()    {        UIWidget _widget = GetControl<UIWidget>("BtnsGrid/Btn01HomeBtn");        btnsGrid.cellWidth = _widget.width;        btnsGrid.Reposition();//Grid重新进行排序            CBase.Log("size change");    }}

<style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

4、点击Play,修改屏幕分辨率,我们可以看到在不同的分辨下,这六个Button都可以完全填充底部区域。

image image