最近学习遇到了一个UI自适应的问题
如下图:
1335*750
当切换到free aspect下
经验条因为没有设置两边对齐就会出现间隙问题
这几个小格子我是用的grid layout Group 来调整的,所以在自适应的时候,随着屏幕变化,只需要更改这个组件下的cellSize即可。
首先看第一张图
因为除经验条外其他的宽度都是固定大小的可以在其UI的rect transform组件下计算出其总宽度,然后再加上这十个经验条的总宽度就==屏幕的总宽度。然后就是小学生解方程就可以得出每个经验条的cellSize宽度大小。
- 注意这里的画布的UI Scale Mode模式是Scale With Screen 因为这样UI的缩放才会随着屏幕的变化而变化。也正是这样才引出我这个问题的出现
下面来看代码的实现
private void ScreenAdaptation()
{
//exp Screen Adaptation
// 获取GridLayoutGroup组件
GridLayoutGroup grid =
expPrgTrans.GetComponent<GridLayoutGroup>();
//计算出屏幕相对于原始屏幕的缩放比
float globalRate = 1.0F *
Constants.ScreenStandardHeight / Screen.height;
//计算出真正的屏幕宽度
float screenWidth = Screen.width * globalRate;
//然后计算CellSize大小
float cellSizeWidth = (screenWidth - 181) / 10;
//最后赋值
grid.cellSize = new Vector2(cellSizeWidth, 7);
}
- (screenWidth - 181) / 10 (181是我已经计算好的除经验条外的宽度)
到此结束,因为我对自适应这个也是小白,可能说的会有错误,欢迎指出
版权声明:本文为a_leaf_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。