Unity UGUI Canvas的三种适配模式

Canvas 的 Canvas Scaler 组件就是用来做适配的。

UI Scale Mode 设置为 Scale With Screen Size 时，可在下方设置一个默认尺寸。在 Editor上设计 UI 时就是根据这个默认尺寸进行布局。针对不同屏幕的分辨率，会根据 Screen Match Mode 中的适配模式，对默认尺寸进行缩放来实现适配。

Screen Match Mode 提供三种适配方案。

Match Width or Height

此种模式下，可通过设置下方的 Match 值来选择是适配宽度还是适配高度，或者可以选择二者中间的某个值。

当 Match == 0 时，适配宽度。将宽度设置为屏幕宽度，并保持默认尺寸比例不变。如果此时高度超过屏幕高度，超出部分将会被裁切掉。

当 Match == 1 时，适配高度。将高度设置为屏幕高度，并保持默认尺寸比例不变。如果此时宽度超过屏幕宽度，超出部分将会被裁切掉。

Expand

保持缩放比例，不裁切

对默认尺寸进行缩放，并保证缩放后的宽高均小于或等于实际屏幕宽高的最大尺寸。

Shrink

保持缩放比例，裁切

对默认尺寸进行缩放，并保证缩放后的宽高均大于或等于实际屏幕宽高的最小尺寸。

eg：

默认尺寸：1920 * 1080

屏幕尺寸1：1792 * 828

屏幕尺寸2：1000 * 828

• Match Width or Height 模式（屏幕尺寸1）

当 Match == 0 时，缩放后 1792 * 1008 ，实际尺寸为 1792 * 828 （发生裁切）。实际效果如下图，白框为屏幕大小，蓝色区域为 1920 * 1080 的背景图。

当 Match == 1 时，缩放后 1472 * 828 ，实际尺寸为 1472 * 828 （屏幕左右两侧有黑边）

• Expand

对于屏幕尺寸1，按宽度缩放后 1792 * 1008 ，按高度缩放后 1472 * 828，实际尺寸为 1472 * 828

对于屏幕尺寸2，按宽度缩放后 1000 * 562 ，按高度缩放后 1472 * 828，实际尺寸为 1000 * 562

• Shrink

对于屏幕尺寸1，按宽度缩放后 1792 * 1008 ，按高度缩放后 1472 * 828，实际尺寸为 1792 * 1008

对于屏幕尺寸2，按宽度缩放后 1000 * 562 ，按高度缩放后 1472 * 828，实际尺寸为 1472 * 828