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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,631评论 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,824评论 1 45
  • 在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。 由于Android系统的开...
    知青的叶阅读 1,555评论 0 2
  • 这一刻 你尽管绽放 别管寒冷曾侵蚀过你的身躯 别管冰雪曾折断过你的枝干 这一刻 你尽管绽放 别管将随风飘落的下一秒...
    叶子写字的地方阅读 408评论 1 1