UGUI之Aspect Ratio Fitter组件介绍

博客迁移

个人博客站点，欢迎访问，www.jiingfengji.tech

正文

组件截图如下：

1、Aspect Mode：AspectMode枚举类型

public enum AspectMode 
{ 	                  
	//不使用适合的纵横比
	None,
	      
	//让Height随着Width自动调节
	WidthControlsHeight,
	
	//让Width随着Height自动调节
	HeightControlsWidth,
	         
	//宽度、高度、位置和锚点都会被自动调整，以使得该矩形拟合父物体的矩形内，同时保持宽高比例
    FitInParent,
    
	//宽度、高度、位置和锚点都会被自动调整，以使得该矩形覆盖父物体的整个区域，同时保持宽高比
	EnvelopeParent
}

2、Aspect Ratio：宽高比例，width/height

下面根据实际情况来介绍一下该组件。在我的工作中，遇到一种情况，玩家获得一些奖励，做成一个通用的UI界面，该界面通常包括以下东西：标题、获得按钮、中间是一排物品item，显然中间的一排物品item会用到水平布局，并且居中显示，每一个item又包括一个icon和一个text（显示count），如果此时存在某一个icon比其他的大些，就会显得很突兀，这个时候我就用到了该组件

给item预制件 中的icon 添加一个父物体，然后给icon加一个Aspect Ratio Fitter，AspectMode选用FitInParent，Aspect Ratio的值需要在代码中计算，因为我们在做这个UI的时候 ，肯定是根据数据来动态实例化这些item的，每一个icon的宽高比不一样，所以需要在代码中计算，代码如下：

Rect rect = GetComponent<Image>().sprite.rect;
AspectRatioFitter fitter = GetComponent<AspectRatioFitter>();
fitter.aspectRatio = rect.width / rect.height;

这种做法就会保持icon的大小基本一致，当然如果美术团队出的物品图片资源都一致大小，咱们也就省去了这一步。

以上知识分享，如有错误，欢迎指出，共同学习，共同进步。