美文网首页iOS开发
ios图片拉伸技巧

ios图片拉伸技巧

作者: hypercode | 来源:发表于2018-01-30 10:15 被阅读30次

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

IOS中可视化拉伸图片技巧

一、补充

在我的另一篇博客http://my.oschina.net/u/2340880/blog/403996中探讨了IOS拉伸图像(UIImage)的几种方法和一些小经验,这篇是一个补充,再将xcode中的另一种可视化拉伸图像的方法的使用介绍给大家。

二、如何使用

IOS开发文档中的描述:https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

1、xcode5的新特性

xcode5之后,IOS为我们提供了一个管理图片的新方法Asset Catalogs,简单说来,它相当于一个目录,专门用来管理我们项目中的图片素材,包括Icon和启动页,这样使项目管理更加方便也更加简洁。

创建一个AssetCatalogs:在xcode中新建一个文件,选择AssetCatalogs,如下:

然后我们点开这个包,将图片直接拖入工具区即可:

2、使用AssetCatalogs中的可视化工具进行图片拉伸

完成了上面的步骤之后,我们可以对管理的图片进行处理,点击右下角的show Slicing按钮,我们就会进入可视化编辑区,如下:

如上图,有三条竖直线,其中边界的两条分别约束了图片两侧不被拉伸的区域范围,中间虚线和左侧虚线围成的部分,将是被复制拉伸的区域。水平方向的线同理。

很重要的一点:官方文档告诉我们,这个方法只能在iOS 7 或者 OS X v10.10之后使用。效果如下:

3、在xib文件中UIImage的拉伸

在xib文件中的UIImageView,在上面加上图片后,可以设置stretching这个属性:

这个属性的四个值:X,Y,Width,Height的取值范围是0-1;X,Y,用来确定一个点,比如我们设置为X=0.1,Y=0.1,则这个点就是图片的左上角开始,水平1/10处和竖直1/10处,设置图片的拉伸点为从这个点开始。后两个参数分别设置图片拉伸区域的宽度和高度,比如我们这样设置:Width=0.8,Height=0.8,则图片拉伸时上下左右各1/10的宽度不会被拉伸,中间部分被拉伸,还是刚才的图片,效果如下:

相关文章

  • 图片拉伸处理

    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图片拉伸技巧—— resizableImageWithCa

    原先以为很简单的东西,到了实际做的时候,才发现这里出错那里不对。浪费很多时间,究根结底,还是没有弄清楚文档。 在i...

网友评论

    本文标题:ios图片拉伸技巧

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