美文网首页
iOS图片拉伸高级技巧

iOS图片拉伸高级技巧

作者: petter102 | 来源:发表于2019-03-01 12:53 被阅读8次

项目中需要设置一个跟屏幕等大的view背景图片。但是图片的上下两部分都有人物 所以不能够拉伸。这就需要我们只是拉伸图片中间的空白背景。

我用两种方法分别实现需要的效果。

  • 1.使用imageview添加到背景view上。在设置图片的拉伸方式
  • 2.使用view的contents 方法设置view的layer位图, 再设置layer的位图来设置可拉伸区域和不可拉伸区域。
    由于项目因素我这里就不再上图了
    趁现在思路清晰,我来赶紧记录一下。
方法一 使用uiimageView的stretchableImageWithLeftCapWidth
UIImage * newImage =  [shareImage stretchableImageWithLeftCapWidth:kScreenWidth topCapHeight:kScreenHeight/2];

代码如上,网上介绍这个方法的文章有很多。我要说的是如何做到宽度上不拉伸,只在高度上拉伸某一指定部分
上面的两个参数LeftCapWidth:就是左侧不可拉伸的区域,这个方法是根据这个左侧不可拉伸区域的宽度自动计算出来右边不可拉伸区域的宽度

rightCapWidth = screenWidth - leftCapWidth -1;

这里之所以去掉一个像素,是因为这个方法默认的就是拉伸指定的1像素
我们设置左侧的不可拉伸区域为屏幕的宽度,那么右侧的不可拉伸区域就是0
所以在屏幕宽度上就不会拉伸。
我们设置topCapHeight 就是上部分的不可拉伸区域为kscreenHeight / 2也就是屏幕高度的一半
那么下部分的不可拉伸区域就是

bottomCapHeight = kscreenHeight - topCapHeight -1;

这样我么就得到了一个宽度不拉伸,高度中间只拉伸一个像素的图片
这个时候不要设置imageview 的contentmode

方法二 使用layer 的contentCenter属性拉伸图片

设置好layer的位图之后,就可以通过设置contentCenter属性来设置图片的拉伸区域。
注意:contentCenter属性是一个CGRect 系统默认的contentCenter 是(0,0,1,1);
来解释一下 这个属性四个数字的意思。
这个contentCenter其实是表示了一个矩形的可拉伸的区域。
设置好了可拉伸区域就可以得到不可拉伸的区域了。。
同样的我们再次想要的到一个宽度不拉伸高度居中拉伸的图片
我们就可以设置ContentCenter = CGRectMake(0,0.5,1,0);
需要注意的是这个rect是个比例范围是(0,1);

相关文章

  • iOS图片拉伸高级技巧

    项目中需要设置一个跟屏幕等大的view背景图片。但是图片的上下两部分都有人物 所以不能够拉伸。这就需要我们只是拉伸...

  • 图片拉伸处理

    Code Sketch GitHub StretchImageDemo Articles iOS 图片拉伸技巧 i...

  • iOS 图片拉伸技巧

    在项目中有的图片需要拉伸处理,常用的有两种方式: 1. 代码: iOS图片拉伸技巧 2. 在xcode中设置图片的...

  • iOS 图片拉伸技巧

    在项目中有的图片需要拉伸处理(比如QQ聊天信息的Message Button背景图片),常用的有两种方式: 一. ...

  • ios图片拉伸技巧

    要点:1在 assets 中点击show slicing 可以可视化点九拉伸图。2可以在 uiimageview ...

  • iOS图片拉伸技巧

    小马哥的博客 这里是连接 到iOS 6.0为止,iOS提供了3种图片拉伸的解决方案,接下来分别详细介绍这些方案。

  • iOS图片拉伸技巧

    iOS图片拉伸技巧 转载地址http://blog.csdn.net/q199109106q/article/de...

  • iOS 图片拉伸技巧

    第一种:拉伸一张图片的中心位置 第二种:拉伸图片的某个区域(可选拉伸模式) 注意:只拉伸左右,要保持图片宽度与图片...

  • iOS图片拉伸技巧

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简...

  • iOS图片拉伸技巧

    比如下面张图片,本来是设计来做按钮背景的: 现在我们把它用作为按钮背景,按钮尺寸是150x50: 运行效果图 可以...

网友评论

      本文标题:iOS图片拉伸高级技巧

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