移动端屏幕适配之Scroll View（做菜案例）

     对于UGUI而言， 屏幕的适配还是比较容易的，只要设置好锚点就可以了，问题不大 。但当使用到Scroll View的时候 ，恰巧正好也使用了Grid排布，这里就有点问题了。下面我来详细说说这个

一：首先 ，对于没有添加grid排布的scroll view， 他的适配按照正常的来就行了。当需要用到scroll view排布的时候，给scroll view下面的子物体content添加grid，我这里使用的是Vertical Layout Group

grid

但是，当生成子物体的时候 ，content的大小不会变化，其下的子物体不能实现拖动的效果，要想实现拖到哪在哪，有两种解决方法

第一种

在content上面添加Content Size Fitter组件，并且设置Vertical Fit 为Preferred Size（根据布局元素的首选高度来驱动高度），这样content的大小会随着子物体的增加而变长

第二种

首先在刚开始的时候设置grid的长度为0

//Grid的长度随着生成物体个数变化

this.gameObject.GetComponent().sizeDelta =newVector2(this.gameObject.GetComponent().sizeDelta.x, 0);

然后每生成一个子物体，grid的y值都增加子物体的高度和设置的spacing大小（这个方法只能使用在Grid Layout Group布局中）

this.gameObject.GetComponent().sizeDelta =newVector2(this.gameObject.GetComponent().sizeDelta.x,this.gameObject.GetComponent().sizeDelta.y +this.GetComponent().cellSize.y +this.GetComponent().spacing.y);

二、第一个小问题解决了，接着就会出现第二个，设置的content size fitter不起作用：因为我这里是要实现菜谱做菜的详细步骤，整个panel是个scroll view,在content上面添加垂直排布以及content fit组件，为的就是之后加载步骤预制体的时候可以使content的长度变长。在这步骤的上方会出现图片、文字介绍之类的，如下图

步骤界面

步骤父物体

parent上也同样得添加垂直布局以及Content Fit组件。

当加载完步骤子物体后，会出现我上面所说的Content的长度不会增加，解决方法呢是当子物体全部加载完后，再重新设置一下Vertical Fit为Preferred Size即可，至于原因，我也没搞明白，知道的大神还望给我说下~

重新设置fit

三、说到重点了，当一切收拾好后，打包到手机上运行后就会发现又有问题了 ，那就是content下的子物体加载出来后变小了并没有适配屏幕，点击之后到步骤界面，步骤下的子物体也是一样变小，原因就出在conent上添加的布局组件，子物体不会像锚点一样去适配，大小已经固定，而如果你的屏幕分辨率变化，子物体也会相应的变化，比如手机的分辨率为900*1280，这时加载出来的子物体大小将缩小为0.8。所以这里要想做适配，就需要代码里去实现。

首先，我又重新设置好所有的锚点，确定没问题后，开始撸代码。因为我在unity里设置的屏幕以及Canvas大小都是720*1280，搜索页面的菜谱子物体预制体的x是703，这样加载出来是正常的，所以这里可以知道原始比originRaito = 703.0f / 720.0f,只要加载出来的子物体的大小scale * ratio= 原始比/当前比 即可正常适配。

设置子物体大小

同样，dishpanel的子物体大小也同样设置即可。

到此我们的菜谱就没问题啦，可以搜索做菜啦 ~~