Android通过scaleType裁剪缩放图片适配不同屏幕不同ImageView尺寸

旧城等待， 2023-10-17 22:09 73阅读 0赞

**Android通过scaleType裁剪缩放图片适配不同屏幕不同ImageView尺寸**

实验方法，先找一张不规则大图，尺寸：1024pix（宽） X 1465pix（高），原图如图：  
![70][]  
  
  
  
然后特意设置一个ImageView宽高均为600pix。观察不同scaleType配置下，Android对原图的裁剪缩放效果。左侧为代码，右侧为缩放和裁剪效果。  
（1）android:scaleType="fitXY"  
![70 1][]  
可见是铺面整个ImageView进行拉伸缩放。不对原图进行裁剪，仅仅缩放。  
  
  
（2）android:scaleType="center"  
![70 2][]  
这种情况下，要对原图裁剪，以图片中心为基准，以中心向四周出发，裁剪原图刚好为600pix X 600pix放到ImageView里面。  
  
  
（3）android:scaleType="centerInside"  
![70 3][]  
以图片中心为等比例缩放的基准，这种配置会使图片通过等比例放大或缩小一定落入到ImageView里面，缩放直到原图有一个象限（宽或高）触碰到ImageView的宽高为至，当然前提是整个图必须都得缩放到这个ImageView里面。就像本例一样，Android会对原图等比例缩放，缩放后的高度就是ImageView的高度，而宽度则不够，所以两边留空白（蓝色细线区域内即是）。  
如果原图宽大与高，那么本例显示的结果是原图缩放后的宽度和ImageView一样宽，由于高度缩放后不够，那么ImageView的高度（上方，下方）就会出现空白。这样的配置没有裁剪，仅是缩放。  
  
（4）android:scaleType="centerCrop"  
![70 4][]  
这种情况下结合了center和centerInside的特性。centerCrop将对原图进行等比例缩放后裁剪，可以看到原图片的顶部和底部已经被裁剪掉，缩放后的图片宽度和ImageView宽度一直，高度上进行剪除掉。  
  
上面提供的原图是一张宽小于高的图。下面再试一张宽比高大的图，1592pix（宽） X 1080Pix（高），原图：  
![70 5][]  
  
这次设置四个ImageView宽高均为400pix，代码：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:layout_width="400px"
            android:layout_height="400px"
            android:layout_alignParentLeft="true"
            android:background="@android:color/holo_blue_bright"
            android:scaleType="centerInside"
            android:src="@drawable/img" />
    
        <ImageView
            android:layout_width="400px"
            android:layout_height="400px"
            android:layout_alignParentRight="true"
            android:scaleType="centerCrop"
            android:src="@drawable/img" />
    
        <ImageView
            android:layout_width="400px"
            android:layout_height="400px"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:scaleType="center"
            android:src="@drawable/img" />
    
        <ImageView
            android:layout_width="400px"
            android:layout_height="400px"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:scaleType="fitXY"
            android:src="@drawable/img" />
    </RelativeLayout>

结果如图：  
![70 6][]  
fitXY，center和centerInside比如容易理解，scaleType中比较重要和比较难以理解的是centerCrop，对比本例中两张宽高不相同的图片等比例缩放效果可以总结出来，centerCrop的裁剪和缩放，是在对原图等比例缩放过程中，宽高两个属性谁先触碰到ImageView的宽高就停止缩放，然后剪除另外一侧。比如在缩放过程中，缩放图的高先等于ImageView的高，那么就剪除宽；如果图的宽在缩放过程中先等于ImageView的宽，那么就剪除高。  
  
现在的App在启动时候，会有一个广告或者称之为启动页的图，闪现而过，作为一个过渡的图画，然后进入App内容。这种情况下，可以利用android:scaleType="centerCrop"属性，但是前提是手机屏幕都是瘦长的屏幕（高比宽大），这样Android会把原图的宽和手机屏幕一样宽，但是高的部分Android对它们裁剪截取掉。所以，设计和UI出的图，也要配合着做成高比宽大的图方可。

[70]: https://img-blog.csdn.net/20180629163240765?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180629163301524?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180629163320414?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180629163341176?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180629163401788?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180629163457703?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180629163549418?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70