博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
界面自适应
阅读量:5245 次
发布时间:2019-06-14

本文共 3686 字,大约阅读时间需要 12 分钟。

关于 NGUI 的界面自动适应不同的手机分辨率,网上已经够多的了。如果你点进了这个网页,推荐一下这一篇吧:

 

下面是我自己的总结:

首先,为什么手机游戏不要使用 UIRoot.PixelPerfect?

这个选项会使图片按照原始的大小显示在手机上。会有什么问题呢? iPhone 3GS 分辨率是 480x320,iPhone 4 是 960x640。也就是说,宽高刚好1:2的关系。如果使用了 PixelPerfect ,你会发现,在 iPhone 3GS 上面的界面“看起来”比 iPhone 4 大一倍。太丑了。

 

其次,需要知道的是,一定要保证界面显示在手机上时,宽和高一定要等比缩放,否则会很丑。

既然需要等比缩放,那么必然会牵扯到一个问题,手机的分辨各不相同,怎么保证等比缩放?为了方便说明,假设设置设计分辨率是w/h=1/1。手机分辨率是w/h=1/1.2。

如果你选择“充满”w,那么,并且 h 方向上内容居中,那么,h 的两端就会填不满,造成“黑边”的情况。如果选择“充满”h,那么更糟糕,w方向上的内容有20%的内容无法显示在屏幕中,因为超出去了。

我们称填满后,会造成另一个方向上填不满的情况的那一个方向叫做”小边“,而填满之后会造成另一个方向内容超出屏幕的那一个方向叫做”大边“。那么在这个例子中,w就是小边,h就是大边。

内容被截断是无法接受的,所以通常的选择是,“充满”小边,使大边方向上的2端出现黑边,然后再想办法把黑边填充点内容,保证整个屏幕都有内容可以看。这个方案可以叫做《填充小的,居中大的,填充大的两端》

注意,不一定 w 是较小的那个,有的手机是 w,有的手机是 h。这取决于手机分辨率比例与设计分辨率之间的关系。所以我们需要在程序中加判断,决定哪一边是小边,哪一边是大边。

看上图,NGUI 只支持基于 Height 的缩放,也就是说,他只支持把 h 做为小边。这个是无法满足我们的需求的。以下是我的代码,是从最上面的链接里参考过来的,把这个脚本附加到 UIRoot 对象上就可以工作了:

1 using UnityEngine; 2 using System.Collections; 3  4 [RequireComponent(typeof(UIRoot))] 5 public class AdaptableUI : MonoBehaviour  6 { 7     public int manualWidth = 960; 8     public enum CallWhere 9     {10         Awake,// call only once11         Start,// call only once12         Update,// call when change13     }14     public CallWhere callWhere = CallWhere.Awake;15 16     public enum AdaptType17     {18         BasedOnHeight,19         BasedOnWidth,20     }21     [HideInInspector]22     [System.NonSerialized]23     public AdaptType adaptType = AdaptType.BasedOnHeight;24 25     private int cachedScreenWidth;26     private int cachedScreenHeight;27     private int originalManualHeight;28     private UIRoot uiroot;29 30     void Awake()31     {32         cachedScreenWidth = 0;33         cachedScreenHeight = 0;34         uiroot = GetComponent
();35 36 if (uiroot.scalingStyle != UIRoot.Scaling.FixedSize)37 {38 enabled = false;39 return;40 }41 42 originalManualHeight = uiroot.manualHeight;43 44 if (callWhere == CallWhere.Awake)45 this.AdaptUI();46 }47 48 void Start()49 {50 if (callWhere == CallWhere.Start)51 this.AdaptUI();52 }53 54 void Update()55 {56 if (callWhere == CallWhere.Update &&57 (cachedScreenWidth != Screen.width ||58 cachedScreenHeight != Screen.height))59 {60 cachedScreenWidth = Screen.width;61 cachedScreenHeight = Screen.height;62 63 AdaptUI();64 }65 }66 67 void AdaptUI()68 {69 if (!enabled)70 return;71 72 float currentScale = (float)Screen.width / (float)Screen.height;73 float manualScale = (float)manualWidth / (float)originalManualHeight;74 if (currentScale < manualScale)75 {76 uiroot.manualHeight = (int)((float)manualWidth * (float)Screen.height / (float)Screen.width);77 adaptType = AdaptType.BasedOnWidth;78 }79 else80 {81 uiroot.manualHeight = originalManualHeight;82 adaptType = AdaptType.BasedOnHeight;83 }84 }85 }

Call Where 如果是 Update,那么在 Windows 下就可以拉窗口大小实时地看表现。

 

黑边怎么填充?

还没有实践。

 

如果底图要求等比缩放,可以让底图大一些,超过设计分辨率的大小,让他居中显示。这种办法也只能满足分辨率比例在一定范围内。如果超过这个范围,仍然会出现黑边。

可以在代码中判断,如果比例实在太夸张了,则干脆将底图放大!直到充满为止。超出去一部分是没有关系的。

 

如果说底图不要求等比缩放(比如 Sliced 九宫格的那种),那么就更好办了,Anchors 设置为与 UIRoot 对齐就可以了。

 

需要对齐的界面元素怎么处理?

指的是,左上角的人物头像区域,左下角的摇杆,右下角的各种按钮,右边的任务自动寻路按钮等这些需要 “散布” 在屏幕边缘的界面元素。

还需要实践,目前想法是,与 Anchors 设置为与  UIRoot  对齐。不知道会不会和缩放的那一套机制冲突。

 

https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/ConfiguringYourApp/ConfiguringYourApp.html

转载于:https://www.cnblogs.com/answerwinner/p/3881242.html

你可能感兴趣的文章
Oracle忘记System密码怎么办?
查看>>
QMUI UI库 控件 弹窗 列表 工具类 MD
查看>>
Nodejs --我自己的学习笔记
查看>>
实现幸运抽奖
查看>>
数据库表直接生成Excel
查看>>
git常用使用命令
查看>>
pip 升级 Appium-Python-Client
查看>>
树莓派 ubuntu 系统下修改config.txt文件调整分辨率记录
查看>>
js移除数组中德重复数据
查看>>
使用集合组织相关数据
查看>>
Storm:最火的流式处理框架
查看>>
(二十)、MVC设计思想的优缺点
查看>>
Python程序员的进化史
查看>>
测试窗体只能用于来自本地计算机的请求。
查看>>
忘记mysql密码,如何修改方法。
查看>>
SGU 326 Perspective ★(网络流经典构图の竞赛问题)
查看>>
[转]JS中match、replace方法中使用正则表达式
查看>>
JAVA 调用matlab【转】
查看>>
JavaScript系列教程(九):数组
查看>>
8_DeclarationsAndStatements
查看>>