ugui权重适配手机屏幕

需求:

1、场景底部UI包含3个按钮;
2、3个按钮宽度相同,并能自适应各种尺寸的手机屏幕;
3、容器与按钮之间有padding;
4、3个按钮之间有间隔;

效果图

权重.png

实现

1、设置Canvas
1.1、设置Render Mode

共三种模式:
Screen Space-Overlay:不需要指定的摄像机,且UI出现在所有摄像机的最前面;
Screen Space-Camera:需要指定一个UICamrea,它支持UI前面显示3D对象和粒子系统;
World Space:UI和3D对象完全一样;

1.2、设置界面适配模式 Screen Match Mode

共三种模式:
Shrink: 保持缩放比例,裁切
Expand: 缩放不裁切
Match Width Screen Size:
如果是Match Width 那么就是适配宽度,把宽度设置为屏幕宽度,然后保持比例
如果Match height,那么适配高度,首先把高度设置为屏幕高度,然后保持比例
image.png

2、设置水平容器
2.1、新建子物体,添加Horizontal Layout Group脚本
2.2、设置水平容器锚点


锚点.png

2.3、设置Horizontal Layout Group脚本组件的padding和margin


间隔.png

2.4、添加3个按钮
会根据容器设置的属性,自动均分宽度,且自适应各种屏幕
image.png

你可能感兴趣的:(ugui权重适配手机屏幕)