需求:
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
网友评论