美文网首页
ugui权重适配手机屏幕

ugui权重适配手机屏幕

作者: 小黑Unity_齐xc | 来源:发表于2019-05-28 14:04 被阅读0次

    需求:

    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权重适配手机屏幕

          本文链接:https://www.haomeiwen.com/subject/eczrtctx.html