UI自适性问题

UI自适性问题

1.手机端摇杆制作

（1）创建空物体Pin定位左下角

为下面制作摇杆UI 定在屏幕左下角

（2）制作摇杆可触碰的范围Image 作为（1）的子物体

image的锚点在中间 PosX和PosY分别是长和宽的一半 中间的好处 下面方向盘和光标点的位置都是 （0 ，0） 好计算距离

（3）制作摇杆方向盘 作为（2）的子物体

（4）制作摇杆光标点 作为（3）的子物体

找到光标点相对于方向盘的边缘距离

（5）确定光标点相对于方向盘位移距离 并考虑自适性

 pointDis = Screen.height*1.0f / Constants.ScreenStandardHeight * Constants.ScreeenOPDis;

 Vector2 dir=evt.position-startPos;
            float len=dir.magnitude;
if (len > pointDis)
            {
                Vector2 clampDir = Vector2.ClampMagnitude(dir,pointDis);
                imgPoint.transform.position = startPos + clampDir;
            }
            else
            {
                imgPoint.transform.position = evt.position;
            }

因为是横板游戏所以 UI大小随着画布的高度变化

本人后面会写手游摇杆得具体制作细节 这里只考虑UI自适性问题

2.经验进度条的制作

（1）布局UI

这里包括EXP图片 经验条边框 是个经验条进度图片 和经验百分比文本

（2）经验条边框铺满全屏适配

为了经验条边框可以适应手机屏幕得变化 所以Rect Transform要设置strech的方式

（3）经验进度条铺满全屏适配 （Rect Transform为strech）

再创建一个 GridGroup ItemList 作为十张经验进度条图片的父类，通过组件Grid Layout Group 来使十张图片均匀分散在经验条边框内

（4）自动排布适配

这时就会发现问题 随之屏幕高度的变化 经验条边框的大小也会随之变化 我们怎么计算 自动排版组件中的Cell Size的数值

这里EXP图片的宽度是定制 经验条之间的空格距离也是定值

通过Screen.height/标准高度 的比值 *标准宽度 得到得实际画布宽度

实际画布宽度减去上面说的定制 就可以得到 实际 十张图片占得宽度/10 即可解决问题

这里需要代码实现 加载这个 UI界面时需要对自动排版组件得Cell Size 的数值调整

        float globalScale = Constants.ScreenStandardHeight*1.0f / Screen.height;
        float screenWidth = Screen.width * globalScale;
        float cellSizeX = (screenWidth - 132) / 10;
        grid.cellSize = new Vector2(cellSizeX,3.3f);