美文网首页
iOS不同宽高比图片的填充适配—imageView中的图片左右两

iOS不同宽高比图片的填充适配—imageView中的图片左右两

作者: ___F | 来源:发表于2021-03-05 21:59 被阅读0次

    需求:

    我们APP瀑布流列表的图片的比例是16:9,但网络请求的图片有一些不同比例的,产品需求是图片在不变形情况下,保留左右两边不截取,左右两边不留白,上下部分可截取可留白。

    方案:

    苹果提供了修改UIimageView填充模式的属性contentMode,其中有这样的两种模式:

    UIViewContentModeScaleAspectFit:图片原始比例完整显示在imageView中,但会有留白,如下所示
    image

    比正常比例宽的图片上下会留白

    image

    比正常比例高的图片左右会留白

    UIViewContentModeScaleAspectFill:图片原始比例充满imageView,但会有裁剪,即部分图片内容在imageView中显示不下,如下所示
    image

    比正常比例宽的图片左右会截取

    image

    比正常比例高的图片上下会截取

    方案:

    这两个模式都不能单独完成,两边不截取,不留白这个需求,所以要在加载图片时获取图片的宽高比与imageView的宽高比做比较,分别选用不同的模式。

     if (image.size.width/image.size.height > 16.0/9.0) {
        //比正常比例宽的图片
        imageView.contentMode = UIViewContentModeScaleAspectFit;
     } else {
        //比正常比例高的图片
        imageView.contentMode = UIViewContentModeScaleAspectFill;
     }
    

    这样就可以完成左右不截取,不留白,图片不变形的需求了。

    相关文章

      网友评论

          本文标题:iOS不同宽高比图片的填充适配—imageView中的图片左右两

          本文链接:https://www.haomeiwen.com/subject/invdqltx.html